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

Chart Tooltip

rx.recharts.graphing_tooltip

Official docs

Workshop order

When the mouse is over a bar, show a small box with the name and value, like "Sales - 4000 won".

rx.recharts.graphing_tooltip is the small box that appears when the mouse is over a point or bar in a chart. Just add it as a child of the chart and it shows the x value under the mouse and the values of every series at that spot. rx.recharts.tooltip is the same component.

It is a different component from rx.tooltip (an overlay), which you attach to text or buttons. Inside a chart, use the one on this page.

ctooltip_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.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=ctooltip_data,
    width="100%",
    height=300,
)

Try the props

Keep the mouse over the chart while you change the values. From here on the examples reuse the ctooltip_data defined above.

Try the props

separator

cursor

is_animation_active

animation_easing

background

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="pv", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" : ",
        cursor=True,
        is_animation_active=True,
        animation_easing="ease",
        content_style={"background": rx.color("gray", 2), "borderRadius": "8px"},
    ),
    data=ctooltip_data,
    width="100%",
    height=260,
)

separator is the text between the name and the value. Turn cursor off and the gray band under the mouse disappears.

Prop	Values	Default	Use
`separator`	string	`":"`	Text between the name and the value
`cursor`	`True` / `False`, dict	`{"strokeWidth": 1, "fill": rx.color("gray", 3)}`	Highlight band under the mouse. None with `False`
`content_style`	style dict	gray background, rounded corners	Styles the inside of the box
`wrapper_style`	style dict	`{}`	Styles the outer element that wraps the box
`item_style` · `label_style`	style dict	gray 12 · gray 11 text	Styles each value line (li) and the x value at the top (p)
`position`	`{"x": …, "y": …}`	-	When set, the box stays fixed there
`offset`	number	`10`	Distance between the mouse and the box
`allow_escape_view_box`	`{"x": bool, "y": bool}`	both `False`	Whether it may leave the chart area
`view_box`	`{"x", "y", "width", "height"}`	automatic	The area the box stays in. Usually calculated automatically
`filter_null`	`True` / `False`	`True`	Whether to leave out series with no value (None)
`active`	`True` / `False`	automatic	Forces it to show or hide
`is_animation_active` · `animation_duration` · `animation_easing`	bool · ms · easing name	`True` · `1500` · `"ease"`	Animation as the box follows the mouse

Styling and a fixed position

wrapper_style styles the outer shell, content_style the inner box. item_style is each value line and label_style the x value at the top. All of them are dicts of CSS properties written in camelCase.

Give it a position and the box stays in place instead of following the mouse. allow_escape_view_box decides, separately for x and y, whether the box may leave the chart area, and view_box is the size of the area the box stays in.

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.graphing_tooltip(
        separator=" - ",
        view_box={"width": 675, "height": 300},
        allow_escape_view_box={"x": True, "y": False},
        wrapper_style={"backgroundColor": rx.color("accent", 3), "borderRadius": "8px", "padding": "10px"},
        content_style={"backgroundColor": rx.color("accent", 4), "borderRadius": "4px", "padding": "8px"},
        item_style={"color": rx.color("accent", 11)},
        label_style={"fontWeight": "bold"},
        position={"x": 80, "y": 0},
        is_animation_active=False,
    ),
    data=ctooltip_data,
    width="100%",
    height=300,
)

Handling empty values: filter_null

When the data contains None, the default (filter_null=True) leaves that series out of the box (left). With False the name stays and only the value is blank (right). Hover over Tue and Thu to compare.

ctooltip_gaps = [
    {"day": "Mon", "shop": 120, "online": 80},
    {"day": "Tue", "shop": 150, "online": None},
    {"day": "Wed", "shop": 90, "online": 110},
    {"day": "Thu", "shop": None, "online": 130},
    {"day": "Fri", "shop": 170, "online": 140},
]


rx.flex(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="shop", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="online", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.graphing_tooltip(),
        data=ctooltip_gaps,
        width=280,
        height=200,
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="shop", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="online", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.graphing_tooltip(filter_null=False),
        data=ctooltip_gaps,
        width=280,
        height=200,
    ),
    spacing="4",
    wrap="wrap",
)

Filling the order

Give a series a name and the box shows that name instead of uv; give it a unit and the unit follows the value. The separator becomes " - " and the band under the mouse takes the accent color.

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", name="Sales", unit=" won", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" - ",
        cursor={"fill": rx.color("accent", 3)},
        content_style={"background": rx.color("gray", 1), "border": "none", "borderRadius": "10px", "boxShadow": "0 4px 14px rgba(0,0,0,0.12)"},
        item_style={"color": rx.color("accent", 11), "fontWeight": "bold"},
    ),
    data=ctooltip_data,
    width="100%",
    height=280,
)

Workshop notes

Add graphing_tooltip (or recharts.tooltip) as a child of the chart and you are done. It is not rx.tooltip.
The name and unit in the box come from the series' name and unit.
Style it with separator, cursor, content_style, wrapper_style, item_style and label_style.
Fix it in place with position; let it leave the chart with allow_escape_view_box.
With filter_null=False, series that are None keep their name.

← Previous

Chart parts · Cartesian Grid

Chart parts · Legend

Get news about new lessons

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