> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Brush

Renders a scrollbar that allows the user to zoom and pan in the chart along its XAxis.

## Usage

```tsx theme={null}
import { LineChart, Line, Brush } from 'recharts';

<LineChart data={data}>
  <Line dataKey="value" />
  <Brush />
</LineChart>
```

## Props

<ParamField path="dataKey" type="string | number | function">
  The key or getter function of a group of data.
</ParamField>

<ParamField path="height" type="number" default="40">
  Height of the brush in pixels.
</ParamField>

<ParamField path="travellerWidth" type="number" default="5">
  The width of each traveller (the draggable handles on each end).
</ParamField>

<ParamField path="traveller" type="ReactElement | function">
  Custom traveller component. Can be a React element or a render function.
</ParamField>

<ParamField path="x" type="number">
  The x-coordinate of brush.
  If left undefined, it will be computed from the chart's offset and margins.
</ParamField>

<ParamField path="y" type="number">
  The y-coordinate of brush.
  If left undefined, it will be computed from the chart's offset and margins.
</ParamField>

<ParamField path="width" type="number">
  Width of the brush in pixels.
  If undefined, defaults to the chart width.
</ParamField>

<ParamField path="data" type="array">
  The source data. If not provided, uses data from chart context.
</ParamField>

<ParamField path="startIndex" type="number">
  The default start index of brush.
  If the option is not set, the start index will be 0.
</ParamField>

<ParamField path="endIndex" type="number">
  The default end index of brush.
  If the option is not set, the end index will be calculated by the length of data.
</ParamField>

<ParamField path="gap" type="number" default="1">
  Number of data points to skip between chart refreshes.
</ParamField>

<ParamField path="padding" type="object" default="{top: 1, right: 1, bottom: 1, left: 1}">
  Padding around the brush content.

  ```tsx theme={null}
  <Brush padding={{ top: 5, right: 5, bottom: 5, left: 5 }} />
  ```
</ParamField>

<ParamField path="fill" type="string" default="#fff">
  The fill color of the brush background.
</ParamField>

<ParamField path="stroke" type="string" default="#666">
  The stroke color of the brush.
</ParamField>

<ParamField path="tickFormatter" type="function">
  The formatter function of ticks.

  ```tsx theme={null}
  (value: any, index: number) => number | string
  ```
</ParamField>

<ParamField path="alwaysShowText" type="boolean" default="false">
  Whether to always show the text labels on the travellers.
</ParamField>

<ParamField path="leaveTimeOut" type="number" default="1000">
  Time in milliseconds before the brush interaction ends after the mouse leaves.
</ParamField>

<ParamField path="ariaLabel" type="string">
  Aria label for accessibility.
</ParamField>

<ParamField path="children" type="ReactElement">
  A mini chart element to render inside the brush showing an overview of the data.
  Typically a smaller version of the main chart.
</ParamField>

### Event handlers

<ParamField path="onChange" type="function">
  The handler of changing the active scope of brush.

  ```tsx theme={null}
  (startEndIndex: { startIndex: number; endIndex: number }) => void
  ```
</ParamField>

<ParamField path="onDragEnd" type="function">
  The handler called when dragging ends.

  ```tsx theme={null}
  (startEndIndex: { startIndex: number; endIndex: number }) => void
  ```
</ParamField>

<ParamField path="className" type="string">
  CSS class name for styling.
</ParamField>

## Notes

If a chart is synchronized with other charts using the `syncId` prop on the chart,
the brush will also synchronize the zooming and panning between all synchronized charts.

## Source

`https://github.com/recharts/recharts/blob/main/src/cartesian/Brush.tsx`