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

Charts

Scatter Chart

rx.recharts.scatter_chartrx.recharts.scatterrx.recharts.z_axis

Official docs

Workshop order

Please plot the height and weight of two teams' players as dots, with age shown as dot size, so we can compare each team's build.

rx.recharts.scatter_chart is a scatter plot: it puts a dot where each x value meets its y value. Use it to look at the relationship between two numbers (do taller people weigh more?) or to spot values far from the crowd. Unlike other Cartesian charts, data is given separately to each series (rx.recharts.scatter), and the axes' data_key decides which values serve as x and y.

The x-axis is a category axis by default, so be sure to give it type_="number" to use numbers. The examples use the two datasets below.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9)),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    width="100%",
    height=280,
)

Try the props

Change the dot shape (shape), the legend icon (legend_type), the line joining the dots (line) and how that line is drawn (line_type). line_type="fitting" draws a regression line through the dots.

Try the props

color

shape

legend_type

line

line_type

rx.recharts.scatter_chart(
    rx.recharts.scatter(
        data=scatterchart_a,
        name="A",
        fill=rx.color("indigo", 9),
        shape="circle",
        legend_type="circle",
        line=False,
        line_type="joint",
    ),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.legend(),
    width="100%",
    height=280,
)

line_type only shows when line is on. joint connects the dots in order; fitting draws a single trend line.

Prop	Values	Default	Use
`scatter_chart(width=, height=, margin=)`	number or percentage / dict	`"100%"` / 5 each	Size and margin. `data` does not go here
`scatter(data=)`	list of dicts	none	The dots of this series
`scatter(name=)`	string	none	Name shown in the legend and tooltip
`scatter(fill=)`	color	accent 9	Dot color
`scatter(shape=)`	`"circle"` `"square"` `"cross"` `"diamond"` `"star"` `"triangle"` `"wye"`	`"circle"`	Dot shape
`scatter(legend_type=)`	the shapes above, `"line"` `"rect"` `"none"` …	`"circle"`	Legend icon
`scatter(line=, line_type=)`	`True` / `False`, `"joint"` `"fitting"`	`False` / `"joint"`	Line joining the dots
`scatter(x_axis_id=, y_axis_id=, z_axis_id=)`	string or number	`0`	Which axis it attaches to
`scatter(is_animation_active=, animation_duration=, …)`			Entrance animation
`z_axis(data_key=, range=, name=, unit=)`	key, `[min, max]` in pixels	`[60, 400]`	A third value shown as dot size
Events	`on_click` `on_mouse_enter` `on_mouse_leave` …		Accepted by both the chart and `scatter`

Overlaying several groups

Add one scatter per series and give each its own data, name and color. The legend shows the name. Add a z_axis and the third value in the data (z) appears in the tooltip and is used for dot size as well. Attaching series to separate axes with x_axis_id and y_axis_id is covered on the area chart page.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
    rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="score"),
    rx.recharts.legend(),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Telling groups apart by shape

If groups differ only by color, people who have trouble telling colors apart may see them as one group. Give each series a different shape too and they stay distinct even in black and white. The legend icon follows the shape.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
    rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B", shape="triangle"),
    rx.recharts.scatter(
        data=[
            {"x": 130, "y": 150},
            {"x": 160, "y": 180},
            {"x": 220, "y": 170},
            {"x": 250, "y": 200},
            {"x": 175, "y": 130},
        ],
        fill=rx.color("amber", 9),
        name="C",
        shape="star",
    ),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.legend(),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Bubble chart (z_axis)

z_axis(data_key="z", range=[60, 400]) draws the dot with the smallest z at size (area) 60 and the largest at 400. Showing a third value as dot size, on top of x and y, is what makes a bubble chart. The axis's name is the label shown in the tooltip.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="size"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Data that changes with State

This plots the sequence from the Collatz conjecture: halve the number if it's even, or multiply by 3 and add 1 if it's odd, and repeat until you reach 1. Enter a number and submit, and the handler computes a new sequence, puts it into data, and the chart redraws. It starts at 15.

Start: 15

def scatterchart_collatz(n: int) -> list[dict[str, int]]:
    rows = []
    for step in range(400):
        rows.append({"x": step, "y": n})
        if n == 1:
            break
        n = n // 2 if n % 2 == 0 else 3 * n + 1
    return rows


class ScatterChartCollatzState(rx.State):
    start: int = 15
    data: list[dict[str, int]] = scatterchart_collatz(15)

    @rx.event
    def compute(self, form_data: dict):
        try:
            n = int(form_data.get("start") or 1)
        except ValueError:
            n = 1
        self.start = min(max(n, 1), 1_000_000)
        self.data = scatterchart_collatz(self.start)


rx.vstack(
    rx.text("Start: ", ScatterChartCollatzState.start, size="2"),
    rx.recharts.scatter_chart(
        rx.recharts.scatter(data=ScatterChartCollatzState.data, fill=rx.color("accent", 9)),
        rx.recharts.x_axis(data_key="x", type_="number"),
        rx.recharts.y_axis(data_key="y", type_="number"),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=260,
    ),
    rx.form.root(
        rx.hstack(
            rx.input(placeholder="Enter a number", name="start", type="number"),
            rx.button("Compute", type="submit"),
        ),
        on_submit=ScatterChartCollatzState.compute,
        reset_on_submit=True,
    ),
    width="100%",
)

Filling the order

Height is x, weight is y, and age is the dot size via z_axis. The two teams differ in both color and shape, and the axes get a unit and name so the tooltip reads like "height: 170cm". The x-axis shows only 150–190 through domain, spreading the dots out.

rx.recharts.scatter_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.scatter(
        data=[
            {"height": 160, "weight": 52, "age": 21},
            {"height": 165, "weight": 58, "age": 34},
            {"height": 170, "weight": 63, "age": 28},
            {"height": 158, "weight": 49, "age": 45},
            {"height": 175, "weight": 70, "age": 39},
        ],
        name="Team A",
        fill=rx.color("accent", 9),
    ),
    rx.recharts.scatter(
        data=[
            {"height": 172, "weight": 66, "age": 25},
            {"height": 180, "weight": 78, "age": 31},
            {"height": 168, "weight": 61, "age": 52},
            {"height": 185, "weight": 82, "age": 27},
            {"height": 177, "weight": 74, "age": 44},
        ],
        name="Team B",
        fill=rx.color("teal", 9),
        shape="triangle",
    ),
    rx.recharts.x_axis(data_key="height", name="height", unit="cm", type_="number", domain=[150, 190]),
    rx.recharts.y_axis(data_key="weight", name="weight", unit="kg", type_="number"),
    rx.recharts.z_axis(data_key="age", name="age", range=[60, 300]),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=320,
)

Workshop notes

data goes on each scatter, not on the chart. Pick x and y with the axes' data_key.
A numeric x-axis needs x_axis(type_="number").
One scatter per group. name feeds the legend, shape sets the dot shape (easier to tell apart when combined with color).
Show a third value as dot size with z_axis(data_key=, range=[min, max]) and you have a bubble chart.
line=True with line_type="fitting" draws a trend line.

← Previous

Charts · Radial Bar Chart

Charts · Funnel Chart

Get news about new lessons

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