Brush chart

A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.

$npx shadcn@latest add @silicon-ui/brush-chart

datachartnew

Installation

$npx shadcn@latest add @silicon-ui/brush-chart

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/brush-chart/brush-chart.tsx
- components/silicon-ui/brush-chart/brush-chart.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { BrushChart } from "@/components/silicon-ui/brush-chart/brush-chart";

Prop	Type	Default
`data*`	`BrushChartDatum[]`	—
`label*` What is measured, such as "Daily active users". Names the chart for assistive technology.	`string`	—
`unit` Unit after each value, such as "users".	`string`	`""`
`formatValue`	`(value: number) => string`	`value => grouped.format(value)`
`formatTick` Formats the value axis. Defaults to a compact number, such as 12K.	`(value: number) => string`	`value => compact.format(value)`
`formatDate` Formats a date in the tooltip and announcements.	`(date: Date) => string`	`date => fullDate.format(date)`
`annotations` Events drawn as markers on both charts.	`BrushChartAnnotation[]`	`[]`
`range` Controlled window as [start, end] epoch milliseconds. A new value glides the window there.	`[number, number]`	—
`defaultRange` Initial window when uncontrolled. Defaults to the whole series.	`[number, number]`	—
`onRangeChange` Called while the window is dragged, resized, stepped, or reset.	`(range: [number, number]) => void`	—
`minSpan` Smallest window in milliseconds. Defaults to seven days.	`number`	`7 * DAY`
`height` Main plot height in pixels.	`number`	`240`
`overviewHeight` Overview strip height in pixels.	`number`	`52`
`emptyLabel`	`string`	`"No data yet"`
`ref`	`Ref<HTMLElement>`	—
`className`	`string`	—