API

Charts

General Components

Cartesian Components

Polar Components

Shapes

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:

Props

  • alwaysShowTextbooleanoptional

    DEFAULT: false

  • ariaLabelstringoptional

  • childrenReactNodeoptional

  • classNamestringoptional

  • dataKeyFunction | number | stringoptional

    Decides how to extract the value of this Brush 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 of this Brush.

    Examples:

  • dynumber | stringoptional

  • 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

    DEFAULT: 1000

  • paddingPaddingoptional

    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

  • 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.

  • onChangeOnBrushUpdateoptional

    The handler of changing the active scope of brush.

  • onDragEndOnBrushUpdateoptional