API

Charts

General Components

Cartesian Components

Polar Components

Shapes

Animation

Brush

Renders a scrollbar that allows the user to zoom and pan in the chart along its XAxis. It also allows you to render a small overview of the chart inside the brush that is always visible and shows the full data set so that the user can see where they are zoomed in.

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.

Related Links

Parent Components

Brush consumes context provided by these components:

  • alwaysShowTextbooleanoptional

    When true, the start and end index labels are always visible. By default, they only appear while the user is interacting with the brush (dragging, hovering, or focused via keyboard).

    DEFAULT: false

  • ariaLabelstringoptional

    Custom accessible label applied to the brush's traveller handles. If not provided, one is generated automatically from the data at the current start and end index.

  • childrenReactNodeoptional

    A single chart element (e.g. an AreaChart) rendered as a small preview inside the brush, showing an overview of the full dataset. If zero or more than one child is passed, nothing is rendered.

  • classNamestringoptional

    The SVG element's class name.

  • dataKeyTypedDataKey<DataPointType, DataValueType>optional

    The data that you provide via the data prop is an array of objects. Each object can have multiple properties, each representing a different data dimension. Use the dataKey prop to specify which property (or dimension) to use for this component.

    Typically, you will want to have one dataKey on the X axis, and different dataKey on the Y axis, where they extract different values from the same data objects.

    Decides how to extract the value from the data:

    • string: the name of the field in the data object;
    • number: the index of the field in the data;
    • function: a function that receives the data object and returns the value.

    Examples:

  • dynumber | stringoptional

    Vertical offset added to the brush's computed y-coordinate.

  • endIndexnumberoptional

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

  • gapnumberoptional

    Number of data points to skip between chart refreshes.

    DEFAULT: 1

  • heightnumber | stringoptional

    Height of the brush in pixels.

    DEFAULT: 40

    Examples:

  • leaveTimeOutnumberoptional

    Delay, in milliseconds, after the mouse leaves the brush, before an in-progress drag interaction is ended.

    DEFAULT: 1000

  • paddingPaddingoptional

    Padding applied only to the small overview chart rendered inside the brush (via children) has no effect on the brush's own position or size.

    DEFAULT: {"top":1,"right":1,"bottom":1,"left":1}

  • startIndexnumberoptional

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

  • tickFormatterBrushTickFormatteroptional

    The formatter function of ticks.

  • travellerFunction | ReactNodeoptional

    Custom element or render function used to render each draggable handle (the "traveller") at the start and end of the selection. Defaults to a small rectangle with two vertical lines.

  • travellerWidthnumberoptional

    The width of each traveller.

    DEFAULT: 5

  • widthnumber | stringoptional

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

  • xnumber | stringoptional

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

  • ynumber | stringoptional

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