# Area Chart

Source: https://lumeo.nativ.sh/components/charts/area

# Area Chart

Emphasize the magnitude of change over time. The filled area makes it easy to visualize volume or cumulative data.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Charts

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<AreaChart />

Preview Code

Gradient Area

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

Preview Code

Stacked Area

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

Preview Code

Multi-Channel Traffic

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

Preview Code

Stacked Gradient — Revenue Breakdown

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

Preview Code

Daily Bandwidth with DataZoom

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

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

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.