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

Cartesian Grid

rx.recharts.cartesian_grid

Official docs

Workshop order

To make the bar heights easy to read at a glance, lay only faint horizontal lines behind the chart.

rx.recharts.cartesian_grid draws horizontal and vertical grid lines behind a chart, so the eye can follow which tick a value is near. Add it as a child of any chart with x and y axes: line, bar, area and scatter charts.

cgrid_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.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="4 4"),
    data=cgrid_data,
    width="100%",
    height=300,
)

stroke_dasharray is the same as SVG's stroke-dasharray: numbers joined by commas or spaces repeat "dash length, gap length". "5,5" is a 5-pixel dash and a 5-pixel gap; "10,5,5,5" repeats long dash, gap, short dash, gap. Leave it empty for a solid line.

Try the props

From here on the examples reuse the cgrid_data defined above.

Try the props

stroke_dasharray

horizontal

vertical

stroke

fill

fill_opacity

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(
        stroke_dasharray="4 4",
        horizontal=True,
        vertical=True,
        stroke=rx.color("gray", 7),
        fill=rx.color("indigo", 3),
        fill_opacity=0,
    ),
    data=cgrid_data,
    width="100%",
    height=280,
)

horizontal and vertical switch the horizontal and vertical lines on and off separately. fill and fill_opacity paint the background of the grid cells.

Prop	Values	Default	Use
`horizontal`	`True` / `False`	`True`	Shows horizontal lines
`vertical`	`True` / `False`	`True`	Shows vertical lines
`stroke_dasharray`	`"4 4"`, `"5,5"` …	solid	Dash pattern
`stroke`	color	`rx.color("gray", 7)`	Line color
`fill` · `fill_opacity`	color · `0`~`1`	none	Grid cell background and its opacity
`horizontal_points` · `vertical_points`	list of pixel positions	`[]`	Sets where lines are drawn directly
`x` · `y` · `width` · `height`	number	`0`	Position and size of the grid. The chart usually works these out itself

Keeping lines in one direction

Turn off the vertical lines with vertical=False and only the horizontal ones remain. Horizontal lines are all you need to read the height of bars or areas, and the chart looks much lighter.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="2 4", vertical=False, horizontal=True),
    data=cgrid_data,
    width="100%",
    height=300,
)

Laying it faintly

Lower the grid lines' opacity with class_name and they become reference lines that do not compete with the data. This site uses Tailwind, so classes such as "opacity-25" work as is.

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"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(horizontal=True, vertical=False, class_name="opacity-25"),
    data=cgrid_data,
    width="100%",
    height=300,
)

Placing lines yourself

horizontal_points and vertical_points take a list of places to draw lines. Horizontal lines are measured in pixels from the chart's top edge, vertical lines from its left edge.

Note that these are pixel positions on screen, not tick values on the axis. Even if the chart's size changes, the lines stay at the same pixel positions. Use them sparingly to highlight a particular range.

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


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=cgrid_points, fill="#8884d8"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.cartesian_grid(
        stroke_dasharray="3 3",
        horizontal_points=[0, 25, 50],
        vertical_points=[65, 90, 115],
    ),
    width="100%",
    height=200,
)

Filling the order

Give the bar chart only faint dashed horizontal lines, no vertical ones, and remove the axis lines and tick lines too, so the grid takes over the job of the ticks.

rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(vertical=False, stroke_dasharray="3 3", class_name="opacity-50"),
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name", axis_line=False, tick_line=False),
    rx.recharts.y_axis(axis_line=False, tick_line=False),
    data=cgrid_data,
    width="100%",
    height=280,
)

Workshop notes

Add cartesian_grid as a child of a chart with x and y axes.
Repeat dash and gap lengths, as in stroke_dasharray="4 4", to make a dashed line.
Keep lines in one direction with horizontal and vertical. Bar and area charts only need horizontal lines.
Lay it faintly, as with class_name="opacity-25", and the data comes forward.
horizontal_points and vertical_points are pixel positions, not tick values.

← Previous

Chart parts · Axis

Chart parts · Chart Tooltip

Get news about new lessons

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