Area Chart Card
Composition over time - several series as stacked areas with soft gradient fills, a dashed cursor, and a count-up headline that swaps to the hovered category's total. One prop switches between stacked, overlapping and 100% views; another swaps the monotone spline for straight segments.
Visitors
94,700
+8.2%Installation
Area Chart Card is part of BoardUI Pro.
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
Variants
stacked (default) reads as volume, overlap compares series against each other, and percent normalises every category to 100% so the chart reads as share. shape picks the curve.
{/* Overlapping translucent areas - comparison rather than composition */}<AreaChartCard variant="overlap" />
{/* 100% stacked: every category fills the height, so it reads as share */}<AreaChartCard variant="percent" />
{/* Straight segments instead of the monotone spline */}<AreaChartCard shape="sharp" />Data
data is a flat list of rows keyed by label with a numeric field per series; series names those fields and, optionally, their colours. Totals, the legend, the tiles and every hover state are derived. The period pill is a dropdown when you pass ranges; with no data props the card ships three demo periods, which is what the previews above use.
// One row per category, one numeric field per series.const data = [ { label: "Jan", organic: 2400, referral: 1200, paid: 800 }, { label: "Feb", organic: 2800, referral: 1400, paid: 700 }, // …];
<AreaChartCard title="Visitors" data={data} series={[ { key: "organic", label: "Organic" }, // palette colour { key: "referral", label: "Referral" }, { key: "paid", label: "Paid", color: "var(--color-chart-3)" }, // or your own ]} headline={64820} // optional resting headline (defaults to the grand total) delta={0.082} // "+8.2%" chip range="This year" // static pill… tiles // stat tile per series under the chart/>
// …or a working period dropdown: each range overrides data / delta / headline.<AreaChartCard ranges={[ { id: "year", label: "This year", data: thisYear, delta: 0.082 }, { id: "prev", label: "Last year", data: lastYear, delta: -0.036 }, ]}/>