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

Error Bar

rx.recharts.error_bar

Official docs

Workshop order

Please add error bars to the bars of each class's average score, showing how widely the scores are spread.

rx.recharts.error_bar is a part that draws a whisker-shaped line over a value to show "this much could be error". Use it to show uncertainty alongside measurements, means with standard deviations, or forecast ranges. It isn't used on its own: you put it as a child inside the series that should carry the error (scatter, line, bar).

data_key is the key that reads the error size from the data. In a scatter plot, direction="y" gives vertical error and direction="x" horizontal error, and you can include both.

errorbar_data = [
    {"x": 45, "y": 100, "errorY": [30, 20], "errorX": 5},
    {"x": 100, "y": 200, "errorY": [20, 30], "errorX": 3},
    {"x": 120, "y": 100, "errorY": 20, "errorX": [5, 3]},
    {"x": 170, "y": 300, "errorY": [15, 18], "errorX": 4},
    {"x": 140, "y": 250, "errorY": 23, "errorX": [6, 7]},
    {"x": 150, "y": 400, "errorY": [21, 10], "errorX": 4},
    {"x": 110, "y": 280, "errorY": 21, "errorX": [5, 6]},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(
        rx.recharts.error_bar(data_key="errorY", direction="y", width=4, stroke_width=2, stroke=rx.color("red", 9)),
        rx.recharts.error_bar(data_key="errorX", direction="x", width=4, stroke_width=2),
        data=errorbar_data,
        fill=rx.color("accent", 9),
        name="A",
    ),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    width="100%",
    height=300,
)

Try the props

Change the direction, color and line thickness of the error bars. This data uses a single error value (err) for both directions.

Try the props

direction

color

stroke_width

1.5

rx.recharts.scatter_chart(
    rx.recharts.scatter(
        rx.recharts.error_bar(
            data_key="err",
            direction="y",
            stroke=rx.color("red", 9),
            stroke_width=1.5,
        ),
        data=[
            {"x": 10, "y": 30, "err": 4},
            {"x": 20, "y": 45, "err": [6, 2]},
            {"x": 30, "y": 38, "err": 3},
            {"x": 40, "y": 60, "err": [2, 8]},
            {"x": 50, "y": 52, "err": 5},
        ],
        fill=rx.color("accent", 9),
    ),
    rx.recharts.x_axis(data_key="x", type_="number", domain=[0, 60]),
    rx.recharts.y_axis(data_key="y", type_="number", domain=[0, 80]),
    width="100%",
    height=280,
)

direction can be chosen only in scatter plots. In bar and line charts, error bars are drawn along the value axis.

Prop	Values	Default	Use
`data_key`	string	none	Key of the error size. The value is one number or `[below, above]`
`direction`	`"x"` `"y"`	none	Direction of the error in a scatter plot
`width`	number	`5`	Length of the crossbar at the whisker ends (pixels)
`stroke`	color	gray 8	Line color
`stroke_width`	number	`1.5`	Line thickness

Put error_bar inside scatter, line or bar. In 0.10 it cannot go inside area.

Symmetric and asymmetric error

If the error value is a single number (20), it is drawn the same length above and below (or left and right of) the value. Give two numbers, as in [30, 20], and the first is the length below (left) and the second the length above (right). The errorbar_data in the first example mixes both styles: the first point goes 30 down and 20 up, and the third point 20 each way.

Adding error to a line chart

Put error_bar inside line and every point on the line gets a vertical error bar. It shows how much each value might wobble, as with monthly average temperatures.

rx.recharts.line_chart(
    rx.recharts.line(
        rx.recharts.error_bar(
            data_key="error",
            direction="y",
            width=4,
            stroke_width=2,
            stroke=rx.color("accent", 9),
        ),
        data_key="temp",
        stroke=rx.color("accent", 9),
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=[
        {"month": "Jan", "temp": 7, "error": [2, 3]},
        {"month": "Feb", "temp": 9, "error": 2},
        {"month": "Mar", "temp": 12, "error": [3, 2]},
        {"month": "Apr", "temp": 16, "error": 3},
        {"month": "May", "temp": 20, "error": [2, 4]},
        {"month": "Jun", "temp": 24, "error": 3},
    ],
    width="100%",
    height=280,
)

Filling the order

Each class's average score stands as a bar, and an error_bar inside the bar marks how the scores spread. Class B and Class D have asymmetric error, with different lengths below and above. The whiskers are drawn in a gray darker than the bars, so they stay visible where they overlap the bar color.

rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(
        rx.recharts.error_bar(data_key="spread", width=6, stroke_width=1.5, stroke=rx.color("gray", 12)),
        data_key="score",
        name="Average score",
        fill=rx.color("accent", 8),
        radius=[4, 4, 0, 0],
        max_bar_size=40,
    ),
    rx.recharts.x_axis(data_key="group"),
    rx.recharts.y_axis(domain=[0, 100]),
    rx.recharts.graphing_tooltip(),
    data=[
        {"group": "Class A", "score": 72, "spread": 8},
        {"group": "Class B", "score": 65, "spread": [12, 6]},
        {"group": "Class C", "score": 81, "spread": 5},
        {"group": "Class D", "score": 58, "spread": [9, 14]},
    ],
    width="100%",
    height=300,
)

Workshop notes

Put error_bar as a child inside scatter, line or bar.
A single number for the data_key value gives symmetric error; [below, above] gives asymmetric error.
In scatter plots, direction="x"/"y" sets the direction, and you can include both.
width is the whisker end length; stroke and stroke_width are the line color and thickness.

← Previous

Charts · Sankey Chart

Chart parts · Axis

Get news about new lessons

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