Area Chart
A filled line chart, for volume over time where the magnitude matters as much as the trend.
Area or line?
The fill implies the area under the curve means something — a total accumulating. For comparing the shape of several series against each other, an unfilled Line Chart stays readable where overlapping fills turn to mud.
Two series, stacked
Curve styles
step is the honest choice for values that hold and jump — a plan tier, a headcount — where a smooth curve would imply readings that never happened.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number; value2?: number }[] | One entry per point along the x-axis. value2 adds a second series. | |
| variant | 'default' | 'stacked' | 'step' | 'linear' | 'default' | Curve style. Stacked lays value2 on top of value rather than overlapping them. |
| seriesLabels | [string, string?] | Names for value and value2, used in the tooltip and legend. | |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Preset height. |
| height | number | Pixel height override; takes precedence over size. |