Overview
Filled SVG area chart for showing magnitude and cumulative trends across an ordered x domain.
Usage
Guidance
Use When
- Showing magnitude under a trend line.
- Comparing cumulative or stacked contribution over an ordered domain.
Avoid When
- Exact point comparison matters more than area magnitude — use line-chart instead.
- Comparing discrete category totals — use bar-chart instead.
Rendering and customization
AreaChart uses SVG, with guide margins derived from the rendered tick labels, rotation, and axis titles. Its default theme inherits currentColor, keeps the chart background transparent, and resolves series colors from --cinder-chart-series-*; pass theme to override only the fields you need. Gradient resource IDs are scoped to the component's existing id.
Set tooltip={true} for the default focus-aware visual tooltip, or pass a Snippet<[ChartTarget]> for custom content. Pass mark to replace each default series mark while retaining the chart's scales, guides, focus targets, and semantic data table. Mark points include pixelY0, the resolved lower baseline for filled areas and stacked bands. Series above 2,000 points are decimated for SVG rendering. The interaction model retains the complete dataset, while the data table evenly samples at most 2,000 rows and discloses the displayed and total point counts in its caption.
When to use
- Showing magnitude under a trend line.
- Comparing cumulative or stacked contribution over an ordered domain.
- Exact point comparison matters more than area magnitude — use line-chart instead.
- Comparing discrete category totals — use bar-chart instead.
Examples
Empty state
An area chart with reserved layout and no available data.
Loading state
An area chart with reserved layout while data loads.
Usage area
A single-series area chart for product usage.
Stacked retention
A stacked area chart comparing retained accounts by cohort.
Props
| Name | Type | Default | Description |
|---|---|---|---|
label required | text | Accessible label for the chart. Required for screen readers. | |
description | text | Optional description rendered below the label. | |
series required | ChartCartesianSeries[] | Series rendered as independent filled areas or stacked areas. | |
mode | 'single' | 'stacked' | 'single' | Area rendering mode. Default single. |
height | number | 280 | Pixel height of the chart viewport. Default 280. |
xAxis | ChartAxisConfiguration & { /** Tick-label rotation in degrees. Default `0`. */ tickLabelRotation?: number; } | Configuration for the x-axis label and tick formatting. | |
yAxis | {
label?: string;
tickCount?: number;
format?: ChartTickFormatter;
} | Configuration for the y-axis label and tick formatting. | |
legendPosition | 'top' | 'bottom' | 'none' | 'top' | Where to render the series legend relative to the chart. Default top. |
hiddenSeriesIds bindable | string[] | [] | IDs of series currently hidden from the chart. Can be two-way bound with bind:hiddenSeriesIds. |
loading | boolean | false | Whether the chart is in a loading state. Default false. |
dataTableCaption | text | Custom data table caption; falls back to label. | |
dataTableVisibility | 'screen-reader-only' | 'visible' | 'hidden' | 'screen-reader-only' | Controls data table visibility. Default screen-reader-only. |
maximumInteractivePoints | number | 500 | Maximum number of interactive focus targets before keyboard navigation is disabled. Default 500. |
theme | {
foreground?: string;
muted?: string;
grid?: string;
background?: string;
palette?: string[];
} | Partial visual theme override. Omitted fields inherit the surrounding application. | |
tooltip | boolean | false | Opt-in visual tooltip. Pass a snippet to replace the default visual content. |
mark | snippet | Per-series renderer override. The chart retains scales, guides, focus, and data-table semantics. | |
empty | snippet | ||
loadingContent | snippet | ||
id | text |