BrushChart

A long series with a strip below it for dragging out the part to look at.

SourcePackage @kerf-js/veneer

Preview

tsx

import { BrushChart } from '@kerf-js/veneer'export function Signups() {  return (  <BrushChart    title="Signups per day"    description="Drag across the lower strip to zoom"    data={SIGNUPS_DAILY}    x="day"    y="signups"    name="Signups"    domain={[80, 220]}    ticks={TICKS}    target={GOAL_LINE}    annotation="First day over target"  />  )}const wobble = (i: number) =>  (Math.sin(i * 12.9898) * 43758.5453) % 1const SIGNUPS_DAILY = Array.from(  { length: 120 },  (_, i) => ({    day: `Day ${i + 1}`,    signups: Math.round(      118 +        Math.sin(i / 9) * 26 +        i * 0.5 +        wobble(i) * 12,    ),  }),)const TICKS = [100, 160, 220]const GOAL_LINE = { y: 160, label: 'Target 160' }

Installation

npm install @kerf-js/veneer

Usage

tsx

import { BrushChart } from '@kerf-js/veneer'

Accessibility

Every chart has a text alternative and a table view of its numbers, so nothing depends on seeing the marks. See Chart for its keyboard support.

API Reference

Prop	Type	Default	Description
`title`	`string`	—	The heading.
`level`	`2 \| 3 \| 4 \| 6 \| 5`	—	The title's heading level: one below the heading the chart sits under. Default 3, a chart in a page section.
`description`	`unknown`	—	One supporting line under the title.
`toolbar`	`unknown`	—	Beside the view toggle: a layout switch, a range picker.
`state`	`"error" \| "loading" \| "empty"`	—	Replaces the plot, in the same frame. With no data the frame shows `empty` on its own.
`loading`	`string`	—	Shows that work is under way.
`empty`	`{ title: string; detail?: unknown; }`	—	The title and detail shown in place of the plot when there is no data.
`error`	`{ title: string; detail?: unknown; }`	—	A message that marks the field invalid and says why.
`action`	`unknown`	—	The next step under an empty or error state: a Retry button.
`data`	`object[]`	—	The series to draw.
`summary`	`string \| ((c: { data: object[]; title: string; }) => string)`	—	One sentence for screen readers and the page; generated from the data when absent.
`x`	`string`	—	The key in each row that names the point on the x axis.
`y`	`string`	—	The key of the value in each row.
`name`	`string`	—	The name it posts under in a form.
`domain`	`[number, number]`	—	The fixed y range.
`target`	`Reference`	—	A level to watch: `{ y, label }`.
`ticks`	`number[]`	—	The y values that get a label.
`format`	`Fmt`	—	Turns a value into the text shown.
`annotation`	`string`	—	A note on the first value over `target`.
`gap`	`number`	—	The space between children, from veneer's space scale.

RelatedLine chart