Brush

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

Usage

import { LineChart, Line, Brush } from 'recharts';

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

Props

dataKey · string | number | function

The key or getter function of a group of data.

height · number · default: "40"

Height of the brush in pixels.

travellerWidth · number · default: "5"

The width of each traveller (the draggable handles on each end).

traveller · ReactElement | function

Custom traveller component. Can be a React element or a render function.

x · number

The x-coordinate of brush. If left undefined, it will be computed from the chart’s offset and margins.

y · number

The y-coordinate of brush. If left undefined, it will be computed from the chart’s offset and margins.

width · number

Width of the brush in pixels. If undefined, defaults to the chart width.

data · array

The source data. If not provided, uses data from chart context.

startIndex · number

The default start index of brush. If the option is not set, the start index will be 0.

endIndex · number

The default end index of brush. If the option is not set, the end index will be calculated by the length of data.

gap · number · default: "1"

Number of data points to skip between chart refreshes.

padding · object · default: "{top: 1, right: 1, bottom: 1, left: 1}"

Padding around the brush content.

<Brush padding={{ top: 5, right: 5, bottom: 5, left: 5 }} />

fill · string · default: "#fff"

The fill color of the brush background.

stroke · string · default: "#666"

The stroke color of the brush.

tickFormatter · function

The formatter function of ticks.

(value: any, index: number) => number | string

alwaysShowText · boolean · default: "false"

Whether to always show the text labels on the travellers.

leaveTimeOut · number · default: "1000"

Time in milliseconds before the brush interaction ends after the mouse leaves.

ariaLabel · string

Aria label for accessibility.

children · ReactElement

A mini chart element to render inside the brush showing an overview of the data. Typically a smaller version of the main chart.

Event handlers

onChange · function

The handler of changing the active scope of brush.

(startEndIndex: { startIndex: number; endIndex: number }) => void

onDragEnd · function

The handler called when dragging ends.

(startEndIndex: { startIndex: number; endIndex: number }) => void

className · string

CSS class name for styling.

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