Area Chart
Compare changes over time with filled data series.
Preview
Import
import { AreaChart } from "@sigil-ui/components";Usage
<AreaChart
series={[
{
label: "Revenue",
points: [
{ label: "Jan", value: 40 },
{ label: "Feb", value: 55 },
{ label: "Mar", value: 48 },
{ label: "Apr", value: 72 },
{ label: "May", value: 85 },
{ label: "Jun", value: 95 },
],
},
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | AreaChartSeries[] | — | — |
width | number | — | — |
height | number | — | — |
stacked | boolean | false | Stacked areas. |
showGrid | boolean | true | Show grid lines. |
curve | "smooth" | "linear" | smooth | Curve type. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-success | Success |
--s-warning | Warning |
--s-error | Error |
--s-border | Border |
--s-text-muted | Text muted |
--s-font-mono | Font mono |