Loading…

Dither Area

beta

An area chart filled with dithered cells over a cell grid, with a date scrubber that swells the cells around it.

Data
1 file
1 npm package
Accessibility notes
Draws on a canvas

Playground

Installation

The CLI installs dither-canvas as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add dither-area

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { AREA } from "@/components/ui/dither-area";

Examples

Every example the tests run, live and operable, side by side.

Default
Dither Area Growth
Gallery
Controlled
Info Colour
With Visible Table
Static

API

Generated from the component's own types, so a prop cannot appear here without existing.

<DitherArea>

Prop	Type	Default
`data` (required)	`readonly DitherAreaDatum[]`	—
`label` (required) What the chart shows. Names the image, the scrubber and the data table.	`string`	—
`animate`	`boolean`	`true`
`categoryLabel` Data table headers.	`string`	`"Point"`
`cell`	`number`	—
`color` Colour token or CSS colour expression for the fill. Default "primary".	`string`	`"primary"`
`defaultIndex`	`number \| null`	—
`description` Replaces the generated summary in the image's accessible name.	`string`	—
`formatValue`	`(value: number) => string`	`formatDitherValue`
`index` Cursor point (controlled); null hides it.	`number \| null`	—
`max` Axis maximum. Defaults to the largest value.	`number`	—
`onIndexChange`	`(index: number \| null) => void`	—
`showAxis` Show value ticks and point labels.	`boolean`	`true`
`showTable` Show 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.

Accessibility

The plot is role="img" with an aria-label giving the range, start, end and peak. The scrubber over it is a slider: arrow keys step a point, Page keys jump a tenth, Home/End go to the ends, Escape hides the cursor, and aria-valuetext announces the date and value shown in the readout. Axis ticks are aria-hidden; the data is always in a table, visually hidden unless showTable is set.

Quality

Measured from the source and its tests at build time.

All scores

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

New members per day

Point

Value

Jun 15

Jun 16

Jun 17

Jun 18

Jun 19

Jun 20

Jun 21

Jun 22

Jun 23

Jun 24

Jun 25

Jun 26

Jun 27

Jun 28

Jun 29

Jun 30

Jul 1

Jul 2

Jul 3

Jul 4

Jul 5

Jul 6

Jul 7

Jul 8

Jul 9

Jul 10

Jul 11

Jul 12

Jul 13

Jul 14

Prop

Type

Default

data

readonly DitherAreaDatum[]

—

label

What the chart shows. Names the image, the scrubber and the data table.

string

—

animate

boolean

true

categoryLabel

Data table headers.

string

"Point"

cell

number

—

color

Colour token or CSS colour expression for the fill. Default "primary".

string

"primary"

defaultIndex

number | null

—

description

Replaces the generated summary in the image's accessible name.

string

—

formatValue

(value: number) => string

formatDitherValue

index

Cursor point (controlled); null hides it.

number | null

—

max

Axis maximum. Defaults to the largest value.

number

—

onIndexChange

(index: number | null) => void

—

showAxis

Show value ticks and point labels.

boolean

true

showTable

Show the data table. It is always present for assistive technology.

boolean

false

size

"sm" | "md" | "lg"

"md"

valueLabel

string

"Value"