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

Legend

rx.recharts.legend

Official docs

Workshop order

I drew weekly orders for three branches as three lines. Show in the top-right corner which line is which branch.

rx.recharts.legend is the legend that tells you what each series in a chart is. Like the legend on a map, it lists each series' name next to its color and shape. A chart with two or more series almost always needs one.

legend_data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


rx.recharts.composed_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
    rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=legend_data,
    width="100%",
    height=300,
)

Try the props

Change the legend's direction, placement and icon shape. From here on the examples reuse the legend_data defined above.

Try the props

layout

align

vertical_align

icon_type

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="amt", stroke=rx.color("green", 9)),
    rx.recharts.line(data_key="uv", stroke=rx.color("red", 9)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(
        layout="horizontal",
        align="center",
        vertical_align="bottom",
        icon_type="line",
    ),
    data=legend_data,
    width="100%",
    height=280,
)

layout is the direction the items run in; align and vertical_align place the legend within the chart.

Prop	Values	Default	Use
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	Items in a row or in a column
`align`	`"left"` `"center"` `"right"`	`"center"`	Horizontal placement
`vertical_align`	`"top"` `"middle"` `"bottom"`	`"bottom"`	Vertical placement
`icon_type`	`"line"` `"plainline"` `"square"` `"rect"` `"circle"` `"cross"` `"diamond"` `"star"` `"triangle"` `"wye"`	varies by series	Item icon shape
`icon_size`	number	`14`	Icon size
`width` · `height`	number	automatic	Size of the box holding the legend
`payload` · `chart_width` · `chart_height` · `margin`	-	automatic	Values the chart usually calculates
`on_click` · `on_mouse_enter` etc.	events	-	Events on legend items (no arguments)

Setting size and placement together

width and height are the size of the box holding the legend. Give layout="vertical", align="right" and vertical_align="top" together and the items stack vertically in the top-right corner. icon_size and icon_type change the icons too.

rx.recharts.composed_chart(
    rx.recharts.line(data_key="pv", type_="monotone", stroke=rx.color("accent", 7)),
    rx.recharts.line(data_key="amt", type_="monotone", stroke=rx.color("green", 7)),
    rx.recharts.line(data_key="uv", type_="monotone", stroke=rx.color("red", 7)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(
        width=60,
        height=100,
        layout="vertical",
        align="right",
        vertical_align="top",
        icon_size=15,
        icon_type="square",
    ),
    data=legend_data,
    width="100%",
    height=300,
)

Names and icons in the legend

The legend text is the series' name, or its data_key if there is none. You can pick each series' icon with its legend_type, and "none" leaves that series out of the legend.

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", name="Visitors", fill=rx.color("accent", 8), legend_type="circle"),
    rx.recharts.bar(data_key="pv", name="Page views", fill=rx.color("teal", 8), legend_type="star"),
    rx.recharts.bar(data_key="amt", fill=rx.color("gray", 8), legend_type="none"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=legend_data,
    width="100%",
    height=280,
)

Hiding series

Bind a series' hide to a State value and checkboxes can switch the lines on and off. Hidden series stay in the legend in a faded color, so you can see what is switched off. In Reflex 0.10 the legend's on_click does not pass which item was clicked, so do this kind of control with inputs outside the chart.

legend_toggle_data = [
    {"day": "Mon", "pv": 2400, "uv": 4000},
    {"day": "Tue", "pv": 1398, "uv": 3000},
    {"day": "Wed", "pv": 9800, "uv": 2000},
    {"day": "Thu", "pv": 3908, "uv": 2780},
    {"day": "Fri", "pv": 4800, "uv": 1890},
]


class LegendSeriesState(rx.State):
    show_pv: bool = True
    show_uv: bool = True

    @rx.event
    def set_show_pv(self, value: bool):
        self.show_pv = value

    @rx.event
    def set_show_uv(self, value: bool):
        self.show_uv = value


rx.vstack(
    rx.hstack(
        rx.checkbox("pv", checked=LegendSeriesState.show_pv, on_change=LegendSeriesState.set_show_pv),
        rx.checkbox("uv", checked=LegendSeriesState.show_uv, on_change=LegendSeriesState.set_show_uv),
        spacing="4",
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9), hide=~LegendSeriesState.show_pv),
        rx.recharts.line(data_key="uv", stroke=rx.color("orange", 9), hide=~LegendSeriesState.show_uv),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=legend_toggle_data,
        width="100%",
        height=260,
    ),
    width="100%",
)

Filling the order

Give each series the branch name with name, and put the legend in the top-right corner with small circles.

legend_weekly = [
    {"week": "W1", "seoul": 120, "busan": 80, "daegu": 45},
    {"week": "W2", "seoul": 150, "busan": 95, "daegu": 60},
    {"week": "W3", "seoul": 140, "busan": 110, "daegu": 72},
    {"week": "W4", "seoul": 180, "busan": 105, "daegu": 90},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", name="Seoul", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", name="Busan", stroke=rx.color("teal", 9)),
    rx.recharts.line(data_key="daegu", name="Daegu", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(vertical_align="top", align="right", icon_type="circle", icon_size=10),
    data=legend_weekly,
    width="100%",
    height=280,
)

Workshop notes

Add legend() as a child of the chart and each series gets an icon and a name.
The text is the series' name (data_key if missing), the icon its legend_type. "none" leaves it out of the legend.
Direction with layout, placement with align and vertical_align, icons with icon_type and icon_size.
Bind a series' hide to State to switch it on and off. Hidden series stay faded in the legend.

← Previous

Chart parts · Chart Tooltip

Chart parts · Label

Get news about new lessons

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