# ChartBrush

> Overview of the whole series with a draggable window.

Source: https://ui.jcsoftdev.com/docs/components/chart-brush

Overview of the whole series with a draggable window. Drag the window to
pan, its handles to resize, or anywhere outside to draw a new window.
Keyboard: arrows pan, Shift+arrows resize the end, Home/End jump.

## Import

```ts
import { ChartBrush } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/core`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => {
    const [range, setRange] = useState<IndexRange>(args.range);
    return (
      <ChartBrush
        {...args}
        range={range}
        onChange={setRange}
        valueText={`Día ${range[0] + 1} al día ${range[1] + 1}`}
      />
    );
  },
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count` * | `number` |  | Total number of categories (the full, un-zoomed data). |
| `series` * | `readonly { id: string; color: string; data: ReadonlyArray<number \| null>; }[]` |  | Full-length series drawn as the overview. |
| `indices` | `readonly number[]` |  | Original category index of each entry of `series` when the series were downsampled. |
| `range` * | `IndexRange` |  | Selected window, inclusive indices. |
| `onChange` * | `(range: IndexRange) => void` |  |  |
| `width` * | `number` |  |  |
| `left` * | `number` |  | Align with the plot above. |
| `right` * | `number` |  |  |
| `height` | `number` | `52` |  |
| `label` * | `string` |  |  |
| `valueText` * | `string` |  | Text for screen readers describing the window, e.g. "6 oct – 20 oct". |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-chartbrush--default)
- [Full Range](/storybook/?path=/story/charts-primitives-chartbrush--full-range)

## Source

`packages/ui/src/charts/core/cartesian/brush.tsx`