Dither Line
betaA smooth monotone line over a drifting dithered gradient fill, with a keyboard-operable point scrubber.
- Data
- 1 file
- 1 npm package
- Accessibility notes
- Draws on a canvas
Loading the example…
pnpm dlx @dowel-ui/cli add dither-linenpm packages installed: class-variance-authority.
import { DitherLine } from "@/components/ui/dither-line";Default
Revenue Spline Line
Gallery
With Visible Table
Static
<DitherLine>
| Prop | Type | Default |
|---|---|---|
data (required) | readonly DitherLineDatum[] | — |
label (required)What the chart shows. Names the image, the scrubber and the data table. | string | — |
animate | boolean | true |
categoryLabel | string | "Point" |
cell | number | — |
colorColour token or CSS colour expression for the line and fill. Default "primary". | string | "primary" |
defaultIndex | number | null | — |
descriptionReplaces the generated summary in the image's accessible name. | string | — |
formatValue | (value: number) => string | formatDitherValue |
index | number | null | — |
maxAxis maximum. Defaults to the largest value plus 20% headroom. | number | — |
onIndexChange | (index: number | null) => void | — |
showAxisShow point labels under the plot. | boolean | true |
showTableShow the data table. It is always present for assistive technology. | boolean | false |
size | "sm" | "md" | "lg" | "md" |
valueLabel | string | "Value" |
Plus every attribute of <div> except children.
The plot is role="img" with an aria-label giving the range, high and low. The scrubber over it is a slider: arrow keys step a point, Page keys jump, Home/End go to the ends, Escape hides the cursor, and aria-valuetext announces the point and value shown in the readout. The data is always in a table, visually hidden unless showTable is set.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes