Area Chart
Emphasize the magnitude of change over time. The filled area makes it easy to visualize volume or cumulative data.
Installation
dotnet add package Lumeo.Charts
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <AreaChart />
| Category | Unique Visitors | Page Views |
|---|---|---|
| Mon | 3240 | 9810 |
| Tue | 4180 | 12540 |
| Wed | 3870 | 11200 |
| Thu | 5120 | 15870 |
| Fri | 6340 | 19420 |
| Sat | 4980 | 14730 |
| Sun | 3650 | 10900 |
Smooth curves with a gradient fill — the default look that works well for a single metric like total visits.
| Category | Active Users |
|---|---|
| Mon | 3240 |
| Tue | 4180 |
| Wed | 3870 |
| Thu | 5120 |
| Fri | 6340 |
| Sat | 4980 |
| Sun | 6650 |
Set GradientFill for a real vertical gradient — the area fades from the brand/theme colour at the top to transparent at the bottom, the look modern dashboards use for a single hero metric.
| Category | Unique Visitors | Page Views |
|---|---|---|
| Mon | 3240 | 9810 |
| Tue | 4180 | 12540 |
| Wed | 3870 | 11200 |
| Thu | 5120 | 15870 |
| Fri | 6340 | 19420 |
| Sat | 4980 | 14730 |
| Sun | 3650 | 10900 |
Stack multiple series to show cumulative volume. The filled areas make the combined total immediately visible.
| Category | Organic Search | Direct | Paid Social |
|---|---|---|---|
| Jan | 18400 | 9200 | 5100 |
| Feb | 21300 | 10800 | 6300 |
| Mar | 19800 | 9900 | 5800 |
| Apr | 24700 | 12300 | 7200 |
| May | 28100 | 14100 | 8400 |
| Jun | 32600 | 16400 | 9700 |
| Jul | 30200 | 15100 | 8900 |
| Aug | 34800 | 17400 | 10300 |
| Sep | 38400 | 19200 | 11400 |
| Oct | 41900 | 20900 | 12600 |
| Nov | 37600 | 18800 | 11100 |
| Dec | 44200 | 22100 | 13400 |
Compare three traffic channels over a full year with gradient fills. Overlapping areas reveal seasonality patterns.
| Category | Enterprise | Professional | Starter |
|---|---|---|---|
| Jan | 48300 | 22100 | 8400 |
| Feb | 51200 | 24300 | 9100 |
| Mar | 53700 | 25800 | 9700 |
| Apr | 57400 | 27600 | 10400 |
| May | 61800 | 29900 | 11200 |
| Jun | 67200 | 32400 | 12100 |
| Jul | 64900 | 31200 | 11700 |
| Aug | 70300 | 34100 | 12800 |
| Sep | 75800 | 36800 | 13700 |
| Oct | 81400 | 39500 | 14700 |
| Nov | 77200 | 37400 | 13900 |
| Dec | 85600 | 41800 | 15600 |
Stacked gradient fill shows how three revenue streams compose total ARR month over month.
| Category | Inbound (GB) | Outbound (GB) |
|---|---|---|
| Mar 1 | 1843 | 921 |
| Mar 2 | 2012 | 1006 |
| Mar 3 | 1934 | 967 |
| Mar 4 | 2178 | 1089 |
| Mar 5 | 2341 | 1171 |
| Mar 6 | 2589 | 1295 |
| Mar 7 | 2467 | 1234 |
| Mar 8 | 2712 | 1356 |
| Mar 9 | 2934 | 1467 |
| Mar 10 | 3187 | 1594 |
| Mar 11 | 3042 | 1521 |
| Mar 12 | 3298 | 1649 |
| Mar 13 | 3512 | 1756 |
| Mar 14 | 3789 | 1895 |
| Mar 15 | 3634 | 1817 |
| Mar 16 | 3912 | 1956 |
| Mar 17 | 4123 | 2062 |
| Mar 18 | 4389 | 2195 |
| Mar 19 | 4234 | 2117 |
| Mar 20 | 4523 | 2262 |
| Mar 21 | 4712 | 2356 |
| Mar 22 | 4934 | 2467 |
| Mar 23 | 4789 | 2395 |
| Mar 24 | 5123 | 2562 |
| Mar 25 | 5312 | 2656 |
| Mar 26 | 5589 | 2795 |
| Mar 27 | 5434 | 2717 |
| Mar 28 | 5723 | 2862 |
| Mar 29 | 5912 | 2956 |
| Mar 30 | 6189 | 3095 |
| Mar 31 | 6034 | 3017 |
| Apr 1 | 6323 | 3162 |
| Apr 2 | 6512 | 3256 |
| Apr 3 | 6789 | 3395 |
| Apr 4 | 6634 | 3317 |
| Apr 5 | 6923 | 3462 |
| Apr 6 | 7112 | 3556 |
| Apr 7 | 7389 | 3695 |
| Apr 8 | 7234 | 3617 |
| Apr 9 | 7523 | 3762 |
| Apr 10 | 7712 | 3856 |
| Apr 11 | 7934 | 3967 |
| Apr 12 | 7789 | 3895 |
| Apr 13 | 8123 | 4062 |
| Apr 14 | 8312 | 4156 |
Dense daily data becomes navigable with the DataZoom slider. Disable dots to keep the chart clean.
| Category | Unique Visitors | Page Views |
|---|---|---|
| Mon | 3240 | 9810 |
| Tue | 4180 | 12540 |
| Wed | 3870 | 11200 |
| Thu | 5120 | 15870 |
| Fri | 6340 | 19420 |
| Sat | 4980 | 14730 |
| Sun | 3650 | 10900 |
Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.
API Reference
AreaChart
| Property | Type | Default | Description |
|---|---|---|---|
| Categories | List<string> | [] | X-axis labels for each data point. |
| Series | List<ChartSeriesData> | [] | Data series with filled areas. |
| Smooth | bool | false | Uses bezier curves for smooth edges. |
| Gradient | bool | true | Applies a gradient fade to the filled area. |
| GradientFill | bool | false | Opt into a real vertical gradient: each series' area fades from its own brand/theme colour at the top to transparent at the bottom. Off by default so existing charts are unchanged (Gradient stays opacity-only). |
| GradientStops | List<EChartGradientColorStop>? | null | Custom gradient stops applied to every series' fill (implies GradientFill). Offsets run 0 (top) → 1 (bottom); colours accept theme tokens like var(--color-primary). |
| Stacked | bool | false | Stacks series areas cumulatively. |
| ShowDots | bool | true | Shows dot markers on the line. |
| DataZoom | bool | false | Enables zoom slider for long time-series. |
| Colors | List<string>? | null | Custom color palette. |
| LabelStrategy | ChartLabelStrategy | Smart | How category-axis labels are rendered. Smart auto-rotates at higher densities; ShowAll forces all horizontal; Auto thins overlapping labels. |
| LabelRotate | int? | null | Manual rotation override in degrees on top of LabelStrategy. |
| 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) |
| ShowLegend | bool | true | Toggles the series legend above the area chart. |
| ShowTooltip | bool | true | Shows the cross-series tooltip on hover. |
| Width | string | "100%" | CSS width applied to the chart container. |
| Height | string | "350px" | CSS height applied to the chart container. |
| Theme | string? | null | Overrides the ECharts theme; null follows the app's light/dark mode. |
| PhantomCycleMs | int | 1400 | Phantom-mode refresh interval in milliseconds. Lower = faster data cycling while loading. |
| ShowDataLabels | bool | false | Renders the numeric value at each data point on the area. |
| LabelPosition | string | "top" | Position of data labels relative to each point (e.g. top, inside). |
| LabelFormat | string? | null | ECharts format string applied to point data labels. |
| Toolbox | bool | false | Shows the toolbox with save-as-image, restore, and view controls. |
| ColorPalette | List<string>? | null | Overrides the chart's base color palette across all area series. |
| AnimationDuration | int? | null | Override entry animation duration (ms); null uses the ECharts default. |
| AnimationEasing | string? | null | ECharts easing function name applied to entry animations. |
| MarkLine | EChartMarkLine? | null | Optional mark line(s) overlaid on the area chart (e.g. averages, thresholds). |
| MarkPoint | EChartMarkPoint? | null | Optional mark point annotations highlighting min/max or specific points. |
| MarkArea | EChartMarkArea? | null | Optional mark area shading to highlight x or y ranges. |