Lumeo

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 />

Smooth curves with a gradient fill — the default look that works well for a single metric like total visits.

Stack multiple series to show cumulative volume. The filled areas make the combined total immediately visible.

Compare three traffic channels over a full year with gradient fills. Overlapping areas reveal seasonality patterns.

Stacked gradient fill shows how three revenue streams compose total ARR month over month.

Dense daily data becomes navigable with the DataZoom slider. Disable dots to keep the chart clean.

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.
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.