ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Chart parts

Brush

rx.recharts.brush

Official docs

Workshop order

Put 30 days of orders in one chart, but show only the last week large at first, with handles to move the range.

rx.recharts.brush is a range selection bar attached below a chart. Drag the handles on either side to pick the range of data you want, and the chart above draws only that range, large. Use it when there are too many data points to fit on one screen. Add it as a child of a line, bar, area or composed chart.

import math

brush_data = [
    {"name": str(i), "uv": round(300 * math.sin(i / 3)), "pv": round(250 + 300 * math.cos(i / 5))}
    for i in range(1, 41)
]


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=brush_data,
    width="100%",
    height=300,
)

The data_key values show as text next to the handles. Drag the gray section in the middle to move the range without changing its length.

Try the props

From here on the examples reuse the brush_data defined above.

Try the props

data_key

stroke

fill

rx.recharts.line_chart(
    rx.recharts.line(data_key="uv", stroke=rx.color("accent", 9)),
    rx.recharts.brush(data_key="name", stroke=rx.color("indigo", 9), fill=rx.color("gray", 3)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=280,
)

stroke is the border and handle color, fill the background color. Change data_key and the text next to the handles changes.

Prop	Values	Default	Use
`data_key`	column name	-	Value shown next to the handles
`start_index` · `end_index`	data index	`0` · last	The initially selected range
`height`	number	`40`	Bar height
`traveller_width`	number	`5`	Handle (traveller) width
`gap`	number	`1`	Redraw the chart every how many steps
`stroke` · `fill`	color	`rx.color("gray", 9)` · `rx.color("gray", 2)`	Border and handle color, background color
`x` · `y` · `width`	number	automatic	Bar position and width. The chart usually calculates them
`data`	list	the chart's data	The source data for the brush
`on_change`	event	-	When the range changes (no arguments in 0.10)

Initial range and handle size

start_index and end_index are the initially selected range. They are data indexes (from 0), so below the 4th to the 11th points show. traveller_width is the handle width; wider handles are easier to grab.

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=brush_data,
    width="100%",
    height=200,
)

gap is how often the chart above is redrawn. With gap=5 the chart updates once for every five steps the handle moves, so with very many points it redraws less often.

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.brush(data_key="name", gap=5, height=24, traveller_width=10, end_index=19),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=240,
)

When the range changes: on_change

on_change fires every time a handle moves. In Reflex 0.10 this event does not pass the new range (the official docs table leaves its description empty too), so all you learn is that it moved. The handler has a debounce so events do not pour in while dragging.

Brush moved 0 times

brush_days = [{"day": f"D{i}", "orders": 40 + (i * 37) % 60} for i in range(1, 31)]


class BrushMoveState(rx.State):
    moves: int = 0

    @rx.event(debounce=300)
    def moved(self):
        self.moves += 1


rx.vstack(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("accent", 8)),
        rx.recharts.brush(data_key="day", height=26, on_change=BrushMoveState.moved),
        rx.recharts.x_axis(data_key="day"),
        data=brush_days,
        width="100%",
        height=240,
    ),
    rx.text("Brush moved ", BrushMoveState.moves, " times", size="2"),
    width="100%",
)

Filling the order

Put in all 30 days and show only the last week first with start_index=23 and end_index=29. It uses the brush_days from above.

rx.recharts.composed_chart(
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 7)),
    rx.recharts.line(data_key="orders", stroke=rx.color("orange", 9), dot=False, legend_type="none"),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.brush(
        data_key="day",
        start_index=23,
        end_index=29,
        height=28,
        traveller_width=10,
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 2),
    ),
    data=brush_days,
    width="100%",
    height=300,
)

Workshop notes

Add brush as a child of a line, bar or area chart and a range selection bar appears below it.
data_key is the text next to the handles; start_index and end_index the initial range (indexes).
Size with height and traveller_width, colors with stroke and fill, redraw interval with gap.
In 0.10, on_change does not pass the range. You only know that it moved.

← Previous

Chart parts · Reference

Other chart libraries · Plotly

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.