Dither Bar
betaStacked bars drawn in dithered cells that grow on change, with series highlighting on hover and a per-column readout.
- Data
- 1 file
- 1 npm package
- Accessibility notes
- Draws on a canvas
Loading the example…
pnpm dlx @dowel-ui/cli add dither-barnpm packages installed: class-variance-authority.
import { DitherBar } from "@/components/ui/dither-bar";Default
Dither Stacked Bar
Gallery
Pinned Series
With Visible Table
Static
<DitherBar>
| Prop | Type | Default |
|---|---|---|
data (required) | readonly DitherBarDatum[] | — |
label (required)What the chart shows. Names the image, the columns and the data table. | string | — |
series (required) | readonly DitherBarSeries[] | — |
activeSeriesThe pinned series key (controlled). | string | null | — |
animate | boolean | true |
categoryLabelHeader of the data table's category column. | string | "Category" |
cell | number | — |
defaultActiveSeries | string | null | null |
descriptionReplaces the generated summary in the image's accessible name. | string | — |
formatValue | (value: number) => string | formatDitherValue |
maxAxis maximum. Defaults to a round number above the tallest stack. | number | — |
onActiveSeriesChange | (key: string | null) => void | — |
showLegend | boolean | true |
showTableShow the data table. It is always present for assistive technology. | boolean | false |
size | "sm" | "md" | "lg" | "md" |
totalLabelLabel for the totals row and column. | string | "Total" |
Plus every attribute of <div> except children.
The plot is role="img" with an aria-label summarising every stack. Each column is a button named with its full breakdown and total; focus shows the readout and pressing pins it (aria-pressed). Legend entries are buttons that preview a series on hover or focus and pin it when pressed. The data is always in a table, visually hidden unless showTable is set. Series are named in the legend and readout, never by colour alone.
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