For AI agents: the complete documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.
Reflex Logo
Docs Logo
Library

/

Graphing

/

General

/

Brush

Brush

Simple Example

The brush component allows us to view charts that have a large number of data points. To view and analyze them efficiently, the brush provides a slider with two handles that helps the viewer to select some range of data points to be displayed.

Position, Size, and Range

This example showcases ways to set the Position, Size, and Range. The gap prop provides the spacing between stops on the brush when the graph will refresh. The start_index and end_index props defines the default range of the brush. traveller_width prop specifies the width of each handle ("traveller" in recharts lingo).

Expand

API Reference

rx.recharts.Brush

A Brush component in Recharts.

Props

PropTypeDescription
stroke
Union[str, Color]

Stroke color.

fill
Union[str, Color]

The fill color of brush.

data_key
Union[int, str]

The key of data displayed in the axis.

x
int

The x-coordinate of brush.

y
int

The y-coordinate of brush.

width
int

The width of brush.

height
int

The height of brush.

data
Sequence

The original data of a LineChart, a BarChart or an AreaChart.

traveller_width
int

The width of each traveller.

gap
int

The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time.

start_index
int

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

end_index
int

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

Event Triggers

See the full list of default event triggers
TriggerDescription
on_change
Built with Reflex