Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

General

/

Brush

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

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

A Brush component in Recharts.

PropTypeDescriptionValues
data_keyUnion

The key of data displayed in the axis.

xint

The x-coordinate of brush.

yint

The y-coordinate of brush.

widthint

The width of brush.

heightint

The height of brush.

dataList

The data domain of brush, [min, max].

traveller_widthint

The width of each traveller.

gapint

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

start_indexint

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

end_indexint

The default end index of brush. If the option is not set, the end index will be 1.

fillUnion

The fill color of brush

strokeUnion

The stroke color of brush

Event Triggers

TriggerDescription
on_change

The on_change event handler is called when the value or checked state of the component changes.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting