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

Axis

rx.recharts.x_axisrx.recharts.y_axisrx.recharts.z_axis

Official docs

Workshop order

Label the axes of the monthly visits chart "Month" and "Visits", and show sales separately on a right-hand axis.

Axes set the ruler of a chart. Put rx.recharts.x_axis and rx.recharts.y_axis in a chart as children and you get horizontal and vertical ticks; data_key picks which column the ticks use. The third axis, which sets the size of points in a scatter chart, is rx.recharts.z_axis.

axis_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="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom"}),
    rx.recharts.y_axis(data_key="uv", label={"value": "Views", "angle": -90, "position": "left"}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

Pass a dict to label and a name appears beside the axis: value is the text, position the placement, angle the rotation. The axis name sits outside the plot, so leave room for it with the chart's margin.

Try the props

Change the axis orientation and how the ticks are drawn. From here on the examples reuse the axis_data defined above.

Try the props

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", orientation="bottom", interval="preserveEnd", axis_line=True, tick_line=True, hide=False),
    rx.recharts.y_axis(orientation="left", mirror=False, reversed=False),
    data=axis_data,
    width="100%",
    height=260,
)

orientation moves an axis to the opposite side, and mirror puts the tick labels inside the chart. reversed flips the order of the ticks.

Prop	Values	Default	Use
`data_key`	column name	-	Data column used for the ticks
`type_`	`"number"` `"category"` `"auto"`	category for x, number for y	Whether it is a numeric or a category axis
`domain`	`[min, max]`	`[0, "auto"]`	Range of a numeric axis. `"auto"`, `"dataMin"` and `"dataMax"` also work
`allow_data_overflow`	`True` / `False`	`False`	Whether to clip data outside the `domain`
`orientation`	x: `"bottom"` `"top"`, y: `"left"` `"right"`	`"bottom"` / `"left"`	Side the axis sits on
`x_axis_id` / `y_axis_id`	string or number	`0`	Name that pairs an axis with its series when there are several axes
`label`	string, number, dict	-	Axis name. The dict takes `value` `position` `offset` `angle`
`interval`	`"preserveEnd"` `"preserveStart"` `"preserveStartEnd"` `"equidistantPreserveStart"`, number	`"preserveEnd"`	How to thin out overlapping tick labels. `0` shows them all
`tick_count`	number	`5`	Number of ticks on a numeric axis
`ticks`	list	-	Sets the tick values directly
`tick_formatter`	JS function expression string	-	Changes how tick labels look
`tick` · `tick_line` · `axis_line`	`True` / `False`	`True`	Shows tick labels, tick lines, the axis line
`tick_size` · `min_tick_gap`	number	`6` · `5`	Tick line length, minimum gap between tick labels
`mirror` · `reversed` · `hide`	`True` / `False`	`False`	Labels inside, reversed order, hidden axis
`unit` · `name`	string	-	Unit and name shown in the tooltip
`stroke`	color	`rx.color("gray", 9)`	Color of the axis line and ticks
`angle` · `padding` (x axis)	number · dict	`0` · `{"left": 0, "right": 0}`	Tick label rotation, padding at both ends
`on_click` etc.	events	-	When a tick is clicked or hovered (no arguments)

Several axes

Two series with different units each get their own axis. Give the axis a y_axis_id and give the series the same y_axis_id, and they pair up. Put the second axis on the right with orientation="right".

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8", y_axis_id="left"),
    rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d", y_axis_id="right", type_="monotone"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(data_key="uv", y_axis_id="left"),
    rx.recharts.y_axis(data_key="pv", y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=axis_data,
    width="100%",
    height=300,
)

Tidying the ticks

axis_line=False and tick_line=False remove the axis line and tick lines, leaving only the labels. tick_size widens the gap between the axis and the labels, and interval="preserveStartEnd" keeps the first and last labels even when some are dropped to avoid overlap. A font size, which has no prop, goes straight to Recharts through custom_attrs.

tick_formatter is a JavaScript function expression that rewrites the tick labels. Below, 4000 shows as 4k. It can only be a string; you cannot pass a State value.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(
        data_key="name",
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        custom_attrs={"fontSize": "12px"},
    ),
    rx.recharts.y_axis(
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        tick_formatter="(value) => value / 1000 + 'k'",
        custom_attrs={"fontSize": "12px"},
    ),
    data=axis_data,
    width="100%",
    height=300,
    margin={"left": 20, "right": 20, "top": 25},
)

Where the axis name goes

The position of the label dict takes 14 values, and offset pushes or pulls it a little further from that spot. Values inside the dict can be State values too.

Try the props

x_position

x_offset

y_position

y_offset

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom", "offset": 0}),
    rx.recharts.y_axis(label={"value": "Views", "angle": -90, "position": "left", "offset": 0}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

Values starting with inside put the name inside the axis; top, bottom, left and right put it outside.

The range of a numeric axis

domain sets the minimum and maximum of a numeric axis. By default, when data goes beyond the range the axis stretches by itself (left). With allow_data_overflow=True the range is kept and whatever spills over is clipped (right: Page C at 9800).

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7),
        data=axis_data,
        width=300,
        height=220,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7, allow_data_overflow=True),
        data=axis_data,
        width=300,
        height=220,
    ),
    spacing="4",
    wrap="wrap",
)

ZAxis: point size

In a scatter chart, rx.recharts.z_axis is not drawn on screen; it sets the size of the points. The smaller the data_key value, the closer to the start of range (small area); the larger, the closer to the end (large area). The tooltip shows name and unit as well.

axis_points = [
    {"x": 10, "y": 30, "z": 200},
    {"x": 25, "y": 45, "z": 260},
    {"x": 40, "y": 20, "z": 400},
    {"x": 55, "y": 60, "z": 280},
    {"x": 70, "y": 35, "z": 500},
    {"x": 85, "y": 50, "z": 120},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=axis_points, name="Shops"),
    rx.recharts.x_axis(data_key="x", type_="number", name="Price", unit="$"),
    rx.recharts.y_axis(data_key="y", type_="number", name="Sales"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="Stock"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Filling the order

Visits get bars and the left axis, sales get a line and the right axis. Name both axes and move the legend to the top so it does not overlap the axis names.

axis_month_data = [
    {"month": "Jan", "visits": 820, "sales": 12},
    {"month": "Feb", "visits": 940, "sales": 15},
    {"month": "Mar", "visits": 1310, "sales": 21},
    {"month": "Apr", "visits": 1180, "sales": 26},
    {"month": "May", "visits": 1560, "sales": 24},
    {"month": "Jun", "visits": 1720, "sales": 31},
]


rx.recharts.composed_chart(
    rx.recharts.bar(data_key="visits", y_axis_id="visits", name="Visits", fill=rx.color("accent", 8)),
    rx.recharts.line(data_key="sales", y_axis_id="sales", name="Sales", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month", label={"value": "Month", "position": "insideBottom", "offset": -10}),
    rx.recharts.y_axis(y_axis_id="visits", label={"value": "Visits", "angle": -90, "position": "insideLeft"}),
    rx.recharts.y_axis(y_axis_id="sales", orientation="right", unit="k", label={"value": "Sales", "angle": 90, "position": "insideRight"}),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(vertical_align="top"),
    data=axis_month_data,
    width="100%",
    height=320,
    margin={"bottom": 20},
)

Workshop notes

Put x_axis and y_axis in a chart as children and pick the tick column with data_key.
label as a dict: value, position, offset, angle. Leave room with the chart's margin.
With two axes, pair them with their series via y_axis_id; the second axis gets orientation="right".
domain sets the range; with allow_data_overflow=True whatever spills over is clipped.
tick_formatter is a JS function string; z_axis sets the point size in scatter charts (range).

← Previous

Charts · Error Bar

Chart parts · Cartesian Grid

Get news about new lessons

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