AreaChart
A filled area chart for emphasising volume and cumulative values over time.
Installation
npx dafink-ui add area-chartRequires: recharts
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data | ChartDataPoint[] | - | Array of data objects. |
| xKey | string | - | Key to use as the x-axis label. |
| series | ChartSeries[] | - | Areas to render. |
| stacked | boolean | false | Stack areas on top of each other. |
| height | number | 240 | Chart height in px. |
| showLegend | boolean | true | Whether to show the legend. |
| showGrid | boolean | true | Whether to show the background grid. |
| className | string | "" | Extra classes applied to the container. |
Accessibility
AreaChart behaves like LineChart: the SVG root is Tab-focusable, ArrowLeft/ArrowRight step a shared tooltip across the x-axis, and Enter pins it; the wrapping div carries role="img" and aria-label="Area chart". Because it supports stacked, the stepped tooltip lists every series' value at that x-axis index at once, not just the one nearest the pointer; the legend renders static labels only.