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.

def brush_simple():
    return rx.recharts.bar_chart(
        rx.recharts.bar(
            data_key="uv", stroke="#8884d8", fill="#8884d8"
        ),
        rx.recharts.bar(
            data_key="pv", stroke="#82ca9d", fill="#82ca9d"
        ),
        rx.recharts.brush(
            data_key="name", height=30, stroke="#8884d8"
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=data,
        width="100%",
        height=300,
    )

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

def brush_pos_size_range():
    return rx.recharts.area_chart(
        rx.recharts.area(
            data_key="uv",
            stroke="#8884d8",
            fill="#8884d8",
        ),
        rx.recharts.area(
            data_key="pv",
            stroke="#82ca9d",
            fill="#82ca9d",
        ),
        rx.recharts.brush(
            data_key="name",
            traveller_width=15,
            start_index=3,
            end_index=10,
            stroke=rx.color("mauve", 10),
            fill=rx.color("mauve", 3),
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=data,
        width="100%",
        height=200,
    )

API Reference

rx.recharts.Brush

A Brush component in Recharts.

PropType | ValuesDefault
stroke
Union[str, Color]
rx.color("gray", 9)
fill
Union[str, Color]
rx.color("gray", 2)
data_key
Union[str, int]
x
int
0
y
int
0
width
int
0
height
int
40
data
List
traveller_width
int
5
gap
int
1
start_index
int
0
end_index
int
fill
Union[str, Color]
stroke
Union[str, Color]

Event Triggers

See the full list of default event triggers
TriggerDescription
on_changeThe on_change event handler is called when the value or checked state of the component changes.