Area Chart
A smooth area chart with gradient fill, Catmull-Rom curves, and multi-series support.
Preview
Import
import { AreaChart } from "@sigil-ui/components";Usage
<AreaChart
series={[
{ label: "Revenue", points: [...] },
{ label: "Expenses", points: [...], color: "var(--s-error)" },
]}
curve="smooth"
showGrid
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | AreaChartSeries[] | — | Data series to render |
width | number | 500 | SVG width |
height | number | 250 | SVG height |
stacked | boolean | false | Stack multiple series |
showGrid | boolean | true | Show horizontal grid lines |
curve | "smooth" | "linear" | "smooth" | Line interpolation method |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Default area and line color |
--s-border | Grid lines |
--s-text-muted | Axis labels |
--s-font-mono | Label font family |