Theme River Chart
Visualize thematic changes over time as a flowing river. Each stream represents a category, and its width changes with the data value at each time point.
Installation
dotnet add package Lumeo.Charts
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <ThemeRiverChart />
| Name | Value |
|---|---|
| 1 | 2025-01, 38, React |
| 2 | 2025-02, 44, React |
| 3 | 2025-03, 41, React |
| 4 | 2025-04, 58, React |
| 5 | 2025-05, 62, React |
| 6 | 2025-06, 71, React |
| 7 | 2025-01, 22, Vue |
| 8 | 2025-02, 27, Vue |
| 9 | 2025-03, 31, Vue |
| 10 | 2025-04, 29, Vue |
| 11 | 2025-05, 34, Vue |
| 12 | 2025-06, 38, Vue |
| 13 | 2025-01, 18, Svelte |
| 14 | 2025-02, 21, Svelte |
| 15 | 2025-03, 24, Svelte |
| 16 | 2025-04, 28, Svelte |
| 17 | 2025-05, 33, Svelte |
| 18 | 2025-06, 37, Svelte |
| Name | Value |
|---|---|
| 1 | 2025-01, 38, React |
| 2 | 2025-02, 44, React |
| 3 | 2025-03, 41, React |
| 4 | 2025-04, 58, React |
| 5 | 2025-05, 62, React |
| 6 | 2025-06, 71, React |
| 7 | 2025-01, 22, Vue |
| 8 | 2025-02, 27, Vue |
| 9 | 2025-03, 31, Vue |
| 10 | 2025-04, 29, Vue |
| 11 | 2025-05, 34, Vue |
| 12 | 2025-06, 38, Vue |
| 13 | 2025-01, 18, Svelte |
| 14 | 2025-02, 21, Svelte |
| 15 | 2025-03, 24, Svelte |
| 16 | 2025-04, 28, Svelte |
| 17 | 2025-05, 33, Svelte |
| 18 | 2025-06, 37, Svelte |
The same data with a custom Colors palette and the ECharts Toolbox enabled — hover the chart for save-as-image and data-view controls.
| Name | Value |
|---|---|
| 1 | 2025-01, 38, React |
| 2 | 2025-02, 44, React |
| 3 | 2025-03, 41, React |
| 4 | 2025-04, 58, React |
| 5 | 2025-05, 62, React |
| 6 | 2025-06, 71, React |
| 7 | 2025-01, 22, Vue |
| 8 | 2025-02, 27, Vue |
| 9 | 2025-03, 31, Vue |
| 10 | 2025-04, 29, Vue |
| 11 | 2025-05, 34, Vue |
| 12 | 2025-06, 38, Vue |
| 13 | 2025-01, 18, Svelte |
| 14 | 2025-02, 21, Svelte |
| 15 | 2025-03, 24, Svelte |
| 16 | 2025-04, 28, Svelte |
| 17 | 2025-05, 33, Svelte |
| 18 | 2025-06, 37, Svelte |
Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.
API Reference
ThemeRiverChart
| Property | Type | Default | Description |
|---|---|---|---|
| Data | List<string[]> | [] | Each entry is [date, value, category]. |
| ShowLegend | bool | true | Shows or hides the chart legend. |
| IsLoading | bool | false | When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state. |
| ShowLoadingSkeleton | bool | true | Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true). |
| SkeletonKind | ChartSkeletonKind | (chart default) | Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic). |
| SkeletonStyle | ChartSkeletonStyle | Phantom | Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay. |
| ShowLoadingLabel | bool | true | Shows a small "Loading…" pill in the top-right corner whenever IsLoading is true. Layered on top of any SkeletonStyle. Set to false for bare visuals. (rc.18) |
| LoadingText | string? | "Loading…" | Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. (rc.18) |
| Width | string | "100%" | Chart container width as a CSS length. |
| Height | string | "350px" | Chart container height as a CSS length. |
| Theme | string? | null | ECharts theme name applied to this chart instance. |
| Colors | List<string>? | null | Explicit series colors overriding the theme palette. |
| ColorPalette | List<string>? | null | Named palette used to seed series colors. |
| ShowTooltip | bool | true | Shows or hides hover tooltips on the river bands. |
| ShowDataLabels | bool | false | Show value labels on the data points. |
| LabelPosition | string | "top" | Position of data labels relative to the points. |
| LabelFormat | string? | null | ECharts label formatter template string. |
| DataZoom | bool | false | Enable scroll and drag zoom controls on the time axis. |
| Toolbox | bool | false | Show ECharts toolbox with save, restore, and zoom utilities. |
| AnimationDuration | int? | null | Animation length in milliseconds when rendering. |
| AnimationEasing | string? | null | ECharts easing function name applied to animations. |
| PhantomCycleMs | int | 1400 | Phantom-mode refresh interval in milliseconds while loading. |