Charts
LineChart, BarChart, DonutChart and Sparkline — hand-rolled SVG on d3-scale/d3-shape, animated.
srui's charts are hand-rolled SVG built on d3-scale/d3-shape (standing
decision: full control over preset styling and animation). Line paths draw
themselves in via the pathLength={1} trick; bars grow from their own
baseline with transform-box: fill-box; the donut sweeps its
stroke-dashoffset like the line chart.
Installation
import { LineChart, BarChart, DonutChart, Sparkline } from "@iammikz/srui";
LineChart
LineChart props
| Prop | Type | Default | Description |
|---|---|---|---|
labels | string[] | — | X-axis category labels |
series | LineChartSeries[] ({ name, values, color? }) | — | One stroked path each |
height | number | 240 | Plot height in px (viewBox width is 600) |
area | boolean | false | Fill under the line with 15% opacity |
tooltip | boolean | true | Hover/keyboard tooltip — guide line + value bubble at the nearest point |
showGrid / showLegend | boolean | true | Toggle gridlines / legend |
className | string | — | For the wrapping figure |
Series colors default to var(--chart-1) … var(--chart-8).
Tooltips: hover (or focus + arrow keys) any point to get a guide line
with dots and a bubble listing every series' value — the interactive layer
srui charts were missing, on the same hand-rolled SVG (no recharts
dependency). BarChart highlights the hovered bar group the same way.
Area mode
BarChart
BarChart props
Same shape as LineChart minus area: labels, series, height,
showGrid, showLegend, className. Multiple series render grouped
bars; bars animate in with a per-bar stagger.
DonutChart
A ring/gauge whose arc sweep animates like the line draw-in. Use it for part-to-whole values (a single slice) or progress.
DonutChart props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text under the value |
value | number | — | 0–100 portion of the ring |
suffix | string | "" | Rendered after the value |
size | number | 160 | SVG size in px |
color | string | var(--chart-2) | Arc color |
Sparkline
A minimal LineChart variant — no axes, gridlines or legend — sized for
inline use in a table cell or a StatCard-style tile.
Sparkline props
| Prop | Type | Default | Description |
|---|---|---|---|
values | number[] | — | The series |
width / height | number | 120 / 36 | SVG dimensions |
color | string | var(--chart-1) | Stroke color |
strokeWidth | number | 2 | Stroke weight |
Accessibility
Each chart SVG carries role="img" and an aria-label describing the
series ("Line chart: Revenue" / "Line chart with 2 series"); legends are
figcaptions. For data-critical contexts, provide the underlying numbers
in a table or sr-only text — charts are decorative summaries by default.
All draw/grow animations are motion-safe:-gated with final states baked
into the markup, so reduced-motion users always see complete charts (see
the pathLength={1} gotcha in the plan).