Chart Sonifier
betaHear a chart: each series played as pitch over time, and a slider that steps through it and speaks each value.
- Data
- 3 files
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add chart-sonifiernpm packages installed: class-variance-authority.
import { ChartSonifier } from "@/components/ui/chart-sonifier";Default
With Dither Bar
Single Short Series
<ChartSonifier>
| Prop | Type | Default |
|---|---|---|
label (required)What the chart shows. Names the group of controls. | string | — |
series (required) | readonly ChartSonifierSeries[] | — |
categoriesWhat each point is, in order: dates, names. Without them points are numbered. | readonly string[] | — |
defaultIndex | number | 0 |
defaultMuted | boolean | false |
defaultSeriesKey of the series to start on. Defaults to the first. | string | — |
defaultSpeed | SonifierSpeed | "normal" |
formatCategory | (category: string, index: number) => string | — |
formatValue | (value: number) => string | — |
indexThe slider's point (controlled). Follows the playhead while playing. | number | — |
onIndexChange | (index: number) => void | — |
onSeriesChange | (key: string) => void | — |
size | "sm" | "md" | "md" |
unitSaid after each value: "deployments", or | string | SonifierUnit | — |
variant | "outline" | "plain" | "outline" |
Plus every attribute of <div> except children.
Nothing makes a sound until someone presses Play or moves the slider — the audio context is only created then — and Pause, Escape from anywhere in the group, and Mute silence it at once, with a fade too short to hear. Everything the sound conveys is also text: a one-sentence summary of the chosen series (range, overall trend, highest and lowest points) describes the group, and the slider's aria-valuetext reads "Tue 14 Oct: 42 deployments" for each point. Arrow keys step a point, Page keys a tenth, Home and End go to the ends, and each step plays that point's note unless muted. While playing, the thumb follows the playhead but the announced value holds still, so a screen reader does not talk over the notes; on pause the new position is announced once through a status region ("Paused at …"), unless the slider has focus and announces it itself. Play is named for what it will do (Play or Pause); Mute is a toggle button with aria-pressed; speed is a native radio group and the series a native select. Where the Web Audio API is missing, Play is disabled and says why, and the slider still reads every value.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes