AreaChart
Area chart for trends with volume emphasis — filled regions, optionally stacked.
Playground
- New
- Returning
| Category | New | Returning |
|---|---|---|
| Jan | 4 | 6 |
| Feb | 7 | 3 |
| Mar | 5 | 8 |
| Apr | 9 | 5 |
| May | 12 | 7 |
| Jun | 10 | 9 |
Loading...
Loading syntax highlighting...01 Examples
Single area
A filled region under one series, anchored to the zero baseline — good for cumulative volume at a glance.
| Category | Series 1 |
|---|---|
| W1 | 20 |
| W2 | 32 |
| W3 | 28 |
| W4 | 44 |
| W5 | 52 |
| W6 | 48 |
Loading...
Loading syntax highlighting...Stacked
`stacked` accumulates series into bands, so the top edge reads as the total while each band shows its contribution.
- New
- Returning
| Category | New | Returning |
|---|---|---|
| Jan | 4 | 6 |
| Feb | 7 | 3 |
| Mar | 5 | 8 |
| Apr | 9 | 5 |
| May | 12 | 7 |
Loading...
Loading syntax highlighting...Overlaid
Without `stacked`, series overlay with a translucent fill so you can compare their shapes directly.
- New
- Returning
| Category | New | Returning |
|---|---|---|
| Jan | 4 | 6 |
| Feb | 7 | 3 |
| Mar | 5 | 8 |
| Apr | 9 | 5 |
| May | 12 | 7 |
Loading...
Loading syntax highlighting...02 Customization
Fill opacity + colors
Tune `fillOpacity` and set per-series colors to match a brand or emphasise one band.
- New
- Returning
| Category | New | Returning |
|---|---|---|
| Jan | 4 | 6 |
| Feb | 7 | 3 |
| Mar | 5 | 8 |
| Apr | 9 | 5 |
| May | 12 | 7 |
Loading...
Loading syntax highlighting...03 Accessibility
SVG with role="img"
The SVG carries role="img" with a generated aria-label that also notes when the chart is stacked.
Data-table fallback
A visually hidden table mirrors every value per series so the filled regions are never the only way to read the data.
04 API Reference
17 props 1 required
Add filter
Grouping
Summary
Column visibility
No matching properties |
No matching properties
05 Installation
Import
Loading...
Loading syntax highlighting...