brand-ui — ChartBrush

import { ChartBrush } from "@elabs-ai/components-charts";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui ChartBrush chart (from @elabs-ai/components-charts) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look ChartBrush up before writing code: `npx -y @elabs-ai/components-cli docs ChartBrush` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-charts is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Examples

2 live examples

Controlled

Controlled: the parent owns the window through `selection` and hands back what `onSelectionChange` reports, so a drag keeps going. The button sets a window of its own, and the brush moves there.

API

`ChartBrush`

Prop	Type	Description
`onSelectionChange`	`(domain: ChartBrushSelection \| null) => void`	Callback when brush selection ends. Domain is the selected time range.
`brushDirection`	`"horizontal" \| "vertical" \| "both"`	Brush direction. Default: "horizontal" for time range selection.
`selectedBoxStyle`	`React.SVGProps<SVGRectElement>`	Fill style for the selected region. Default: chart segment style.
`initialSelection`	`ChartBrushSelection \| null`	Initial selection so the brush overlay is visible on load (e.g. first 50% of range).
`selection`	`ChartBrushSelection \| null`	Current selection (e.g. from parent state). When set, the brush is controlled: it draws this window, and `null` draws none. Hand back the value `onSelectionChange` reports — the brush already shows it, so a drag in progress keeps going. Any other value (a reset button, a linked chart) redraws the window there. Wins over `initialSelection`. The brush does not snap back on its own: a parent that ignores `onSelectionChange` and keeps passing the same `selection` still lets the user drag the window away from it.
`useWindowMoveEvents`	`boolean`	Use window move events for brush (can fix coordinate offset when SVG is in transformed container). Default: true for brush-in-strip.
`blurPx`	`number`	Backdrop blur on dimmed track (0–5 px). Default: 1.5
`fadeOuterEdges`	`boolean`	Fade dimmed regions at the outer track edges. Default: true
`selectionPattern`	`ChartBrushSelectionPattern`	Optional pattern overlay inside the brush selection window.

`ChartBrushLayout`

Prop	Type	Description
`data`required	`Record<string, unknown>[]`	Full dataset backing the brush strip and main chart.
`xDataKey`	`string`
`enabled`required	`boolean`	When false, children render without brush zoom state.
`height`required	`number`	Fixed height of the brush strip in pixels.
`className`	`string`
`children`required	`(layout: ChartBrushLayoutState) => ReactNode`
`brushStrip`	`(layout: ChartBrushLayoutState) => ReactNode`	Mini chart + brush handles rendered below the main chart when `enabled`.

`ChartBrushSelectionOverlay`

Prop	Type	Description
`innerWidth`required	`number`
`innerHeight`required	`number`
`selectionX0`required	`number`
`selectionX1`required	`number`
`pattern`	`ChartBrushSelectionPattern`

`ChartBrushTrackOverlay`

Prop	Type	Description
`innerWidth`required	`number`
`innerHeight`required	`number`
`selectionX0`required	`number`	Pixel x of the selection start within the plot area.
`selectionX1`required	`number`	Pixel x of the selection end within the plot area.
`blurPx`	`number`	Backdrop blur in px (0–5). Default: 1.5
`fadeOuterEdges`	`boolean`	Fade blur at the outer left/right track ends. Default: true

Also accepts: ChartBrushTrackOverlayStyle