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