Four hand-drawn SVG line charts — multi-series, single metric, period comparison and annotated steps — that reveal left to right, morph with springs and read out values on hover or arrow keys.
Multi-series
multi-series.tsxUp to four series, volt first and the rest neutral or dashed; legend toggles rescale the axis with a spring morph and the crosshair reads every visible line.
| Prop | Type | Default | Description |
|---|---|---|---|
title / subtitle | string | — | Heading and caption. |
labels | string[] | — | X-axis labels, one per point. |
series | LineSeries[] | — | { id, label, values }. The first series is primary. |
formatValue | (n: number) => string | — | Formats tooltip values. |
formatTick | (n: number) => string | — | Formats y-axis ticks. |
Gradient metric
gradient-metric.tsxOne metric under a volt gradient with labelled peak and low markers, an average guide, a glowing latest point and a headline that follows the crosshair.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Daily signups" | Metric name. |
values | number[] | — | Series, oldest first. |
labels | string[] | — | One label per value. |
formatValue | (n: number) => string | — | Formats headline, ticks and markers. |
caption | string | "Last 30 days" | Caption under the headline. |
Period comparison
period-comparison.tsxThis period in solid volt against the last in dashed neutral, the gap shaded, with week, month and quarter tabs that morph both lines together.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Cumulative bookings" | Card heading. |
periods | ComparisonPeriod[] | — | { key, labels, current, previous, previousLabel }. Equal point counts let lines morph. |
defaultPeriod | string | "Month" | Initially selected tab. |
formatValue | (n: number) => string | — | Formats values and ticks. |
Step with annotations
step-annotations.tsxA step line for values that change in jumps, a dashed plan limit and numbered notes that pop a callout on hover or focus and step with arrow keys.
| Prop | Type | Default | Description |
|---|---|---|---|
title / subtitle | string | — | Heading and caption. |
labels | string[] | — | One label per step. |
values | number[] | — | Value held from each label until the next. |
annotations | StepAnnotation[] | — | { index, title, body } notes pinned to points. |
limit | number | 40 | Dashed ceiling line. |
unit | string | "seats" | Unit used in copy. |
Install the whole set
Installs every line charts variant at once. Each section above has its own command for a single variant.
Accessibility
- Each chart is role="img" with a summary of its range, extremes or comparison; the plot area is focusable and arrow keys move the crosshair with a polite readout.
- Legend chips and period tabs are buttons with aria-pressed; annotation markers are buttons that step through with left and right arrows.
- Axis labels are HTML, strokes stay crisp at any size, and reduced motion swaps the reveal and morphs for an instant render.