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

Reference

rx.recharts.reference_linerx.recharts.reference_dotrx.recharts.reference_area

Official docs

Workshop order

On the monthly sales chart, draw a target line at 5000, shade the sale period in color and put a dot on the best month.

Reference parts sit on top of the chart, separate from the data, and say "look here". reference_line draws a horizontal or vertical line at one value, reference_area a shaded rectangle over a range, and reference_dot a dot at one coordinate. Use them for marks that help interpretation: targets, averages, outliers, promotion periods.

reference_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.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7)),
    rx.recharts.reference_line(y=4343, stroke=rx.color("green", 10), label="Average"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=300,
)

Try the props

Change how the reference line looks. From here on the examples reuse the reference_data defined above.

Try the props

label

stroke

stroke_width

stroke_dasharray

rx.recharts.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 5)),
    rx.recharts.reference_line(
        y=4343,
        label="Average",
        stroke=rx.color("green", 10),
        stroke_width=1,
        stroke_dasharray="",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=280,
)

label puts text on the line, and stroke_dasharray makes the line dashed.

Prop	Values	Applies to	Use
`x` · `y`	number or category value	line · dot	Where the line is drawn or the dot placed. On a category axis, the category name
`x1` `x2` `y1` `y2`	number or category value	area	Edges of the rectangle. Leave out the x side for the full x extent, the y side for the full y extent
`segment`	`[{"x", "y"}, {"x", "y"}]`	line	A slanted line joining two end points
`r`	number	dot	Radius of the dot
`label`	string, number	line · dot	Attaches text. For more styling, add an `rx.recharts.label` as a child
`stroke` · `fill` · `fill_opacity`	color · color · `0`~`1`	all	Line color, fill color, fill opacity
`stroke_width` · `stroke_dasharray`	number · `"4 4"`	line	Line width (default `1`), dash pattern
`if_overflow`	`"discard"` `"hidden"` `"visible"` `"extendDomain"`	all	What happens outside the axis range (default `"discard"`)
`x_axis_id` · `y_axis_id`	axis id	all	Which axis it refers to when there are several
`on_click` etc.	events	dot	When the dot is clicked or hovered (no arguments)

Reference Area: shading a range

reference_area draws a rectangle from x1 to x2 and y1 to y2. Use numbers on a numeric axis and category names on a category axis. Lower the fill_opacity so the data underneath shows through.

reference_points = [
    {"x": 45, "y": 100}, {"x": 100, "y": 200}, {"x": 120, "y": 100}, {"x": 170, "y": 300},
    {"x": 140, "y": 250}, {"x": 150, "y": 400}, {"x": 110, "y": 280}, {"x": 80, "y": 150},
    {"x": 200, "y": 350}, {"x": 90, "y": 220}, {"x": 130, "y": 320}, {"x": 180, "y": 120},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=reference_points, fill="#8884d8", name="A"),
    rx.recharts.reference_area(x1=150, x2=180, y1=150, y2=300, fill="#8884d8", fill_opacity=0.3),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Reference Line: drawing a line

Give y and you get a horizontal line at that value; give x and you get a vertical one. If the x axis is a category axis, use a category name, as in x="Page C". Give segment two end points and you can draw a slanted line too (the orange dashed line).

rx.recharts.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7)),
    rx.recharts.reference_line(x="Page C", stroke=rx.color("accent", 10), label="Max PV PAGE"),
    rx.recharts.reference_line(y=9800, stroke=rx.color("green", 10), label="Max"),
    rx.recharts.reference_line(y=4343, stroke=rx.color("green", 10), label="Average"),
    rx.recharts.reference_line(
        segment=[{"x": "Page A", "y": 2400}, {"x": "Page G", "y": 4300}],
        stroke=rx.color("orange", 9),
        stroke_dasharray="6 3",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=300,
)

Reference Dot: placing a dot

reference_dot places a dot of radius r at the x, y coordinate. Use it to circle a data point worth noticing or to mark a reference point that is not in the data. The example below uses the reference_points from before.

rx.recharts.scatter_chart(
    rx.recharts.scatter(data=reference_points, 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"),
    rx.recharts.reference_dot(x=160, y=350, r=15, fill=rx.color("accent", 5), stroke=rx.color("accent", 10)),
    rx.recharts.reference_dot(x=170, y=300, r=20, fill=rx.color("accent", 7)),
    rx.recharts.reference_dot(x=90, y=220, r=18, fill=rx.color("green", 7)),
    width="100%",
    height=240,
)

Outside the axis range: if_overflow

When the data peaks at 4000 but the reference line is at 6000, the default "discard" does not draw the line at all (left). "extendDomain" stretches the axis range so the line shows (right). "hidden" clips whatever lies outside the area, and "visible" draws it even when it goes outside.

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="uv"),
        rx.recharts.reference_line(y=6000, label="discard", stroke=rx.color("red", 9)),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=reference_data,
        width=280,
        height=200,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="uv"),
        rx.recharts.reference_line(y=6000, label="extendDomain", stroke=rx.color("red", 9), if_overflow="extendDomain"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=reference_data,
        width=280,
        height=200,
    ),
    spacing="4",
    wrap="wrap",
)

Moving the reference with State

Position values such as y can be bound to State as well. Change the target with the slider and the line follows, along with the count of months above the target.

Goal

5000

3 months reached

reference_sales = [
    {"month": "Jan", "sales": 3200}, {"month": "Feb", "sales": 4100}, {"month": "Mar", "sales": 5600},
    {"month": "Apr", "sales": 4700}, {"month": "May", "sales": 6300}, {"month": "Jun", "sales": 5900},
]


class ReferenceGoalState(rx.State):
    goal: int = 5000

    @rx.event
    def set_goal(self, value: list[float]):
        self.goal = int(value[0])

    @rx.var
    def hits(self) -> int:
        return sum(1 for row in reference_sales if row["sales"] >= self.goal)


rx.vstack(
    rx.hstack(
        rx.text("Goal", size="2"),
        rx.slider(value=[ReferenceGoalState.goal], min=2000, max=7000, step=100, on_change=ReferenceGoalState.set_goal, width="200px"),
        rx.badge(ReferenceGoalState.goal),
        rx.text(ReferenceGoalState.hits, " months reached", size="2"),
        align="center",
        wrap="wrap",
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="sales", fill=rx.color("accent", 8)),
        rx.recharts.reference_line(y=ReferenceGoalState.goal, stroke=rx.color("red", 9), stroke_dasharray="4 4"),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(domain=[0, 7000]),
        data=reference_sales,
        width="100%",
        height=260,
    ),
    width="100%",
)

Clicking a dot

reference_dot has mouse events such as on_click. The event does not pass any value of its own, so, as below, put an argument into the handler yourself to tell which dot it was.

Click a marked dot

reference_click_points = [
    {"x": 45, "y": 100}, {"x": 100, "y": 200}, {"x": 120, "y": 100}, {"x": 170, "y": 300},
    {"x": 140, "y": 250}, {"x": 150, "y": 400}, {"x": 110, "y": 280}, {"x": 80, "y": 150},
]


class ReferenceDotState(rx.State):
    picked: str = "Click a marked dot"

    @rx.event
    def pick(self, name: str):
        self.picked = name


rx.vstack(
    rx.recharts.scatter_chart(
        rx.recharts.scatter(data=reference_click_points, fill=rx.color("gray", 8)),
        rx.recharts.x_axis(data_key="x", type_="number"),
        rx.recharts.y_axis(data_key="y", type_="number"),
        rx.recharts.reference_dot(x=150, y=400, r=14, fill=rx.color("red", 7), on_click=ReferenceDotState.pick("Highest")),
        rx.recharts.reference_dot(x=45, y=100, r=14, fill=rx.color("blue", 7), on_click=ReferenceDotState.pick("Lowest")),
        width="100%",
        height=220,
    ),
    rx.text(ReferenceDotState.picked, size="2", weight="bold"),
    width="100%",
)

Filling the order

The sale period is a reference_area, the target a reference_line and the best month a reference_dot. Add the area before the series so it lies behind the line. It uses the reference_sales from above.

rx.recharts.line_chart(
    rx.recharts.reference_area(
        rx.recharts.label(value="Sale week", position="insideTop"),
        x1="Mar",
        x2="Apr",
        fill=rx.color("amber", 5),
        fill_opacity=0.4,
    ),
    rx.recharts.line(data_key="sales", stroke=rx.color("accent", 9)),
    rx.recharts.reference_line(
        rx.recharts.label(value="Goal 5000", position="insideTopLeft"),
        y=5000,
        stroke=rx.color("red", 9),
        stroke_dasharray="4 4",
    ),
    rx.recharts.reference_dot(x="May", y=6300, r=8, fill=rx.color("green", 9), stroke="white"),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=reference_sales,
    width="100%",
    height=280,
)

Workshop notes

reference_line draws a line at a single x or y value; segment draws a slanted line.
reference_area is an x1, x2, y1, y2 rectangle. Lower fill_opacity so the data shows through.
reference_dot is a dot of radius r at x, y. Tell dots apart by passing an argument to on_click yourself.
Outside the axis range nothing is drawn by default. if_overflow="extendDomain" stretches the axis.
Text via label="…" or an rx.recharts.label child. Drawing order is stacking order.

← Previous

Chart parts · Label

Chart parts · Brush

Get news about new lessons

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