A versatile chart for visualizing quantitative data trends over time or categories, supporting gradients, stacking, and custom legends.
Reflex wraps Recharts under the hood. This means you build your own charts using Recharts components and only bring in your theme tokens and custom components like chart_tooltip when and where you need it.
A simple area chart showing a single data series over time.
Props used: data_key, fill, stroke, stroke_width, type_, is_animation_active on area; data_key, axis_line, tick_size, tick_line, tick on x_axis.
Showing total visitors for the last 6 months
import reflex as rx
from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content
data = [
{"month": "Jan", "desktop": 186},
{"month": "Feb", "desktop": 305},
{"month": "Mar", "desktop": 237},
{"month": "Apr", "desktop": 73},
{"month": "May", "desktop": 209},
{"month": "Jun", "desktop": 214},
]
def area_chart_basic_type():
return rx.el.div(
rx.el.div(
rx.el.h3(
"Area Chart",
class_name="text-lg font-semibold",
),
rx.el.p(
"Showing total visitors for the last 6 months",
class_name="text-sm text-muted-foreground",
),
class_name="flex flex-col gap-y-1.5",
),
rx.el.div(
rx.recharts.area_chart(
chart_tooltip(label="show"),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False,
stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
),
rx.recharts.area(
data_key="desktop",
fill="var(--chart-1)",
stroke="var(--chart-1)",
stroke_width=2,
is_animation_active=False,
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
interval="preserveStartEnd",
tick={
"fill": "var(--foreground)",
"fontSize": 10,
},
),
data=data,
width="100%",
height=250,
),
),
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
),
class_name=chart_tooltip_content([1], "border")
+ " w-full p-0 flex flex-col gap-y-6",
)Uses a linear interpolation curve between points.
Props used: type_="linear" on area.
Showing total visitors for the last 6 months
import reflex as rx
from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content
data = [
{"month": "Jan", "desktop": 186},
{"month": "Feb", "desktop": 305},
{"month": "Mar", "desktop": 237},
{"month": "Apr", "desktop": 73},
{"month": "May", "desktop": 209},
{"month": "Jun", "desktop": 214},
]
def area_chart_linear_type():
return rx.el.div(
rx.el.div(
rx.el.h3(
"Area Chart - Linear",
class_name="text-lg font-semibold",
),
rx.el.p(
"Showing total visitors for the last 6 months",
class_name="text-sm text-muted-foreground",
),
class_name="flex flex-col gap-y-1.5",
),
rx.el.div(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False,
stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
),
rx.recharts.area(
data_key="desktop",
fill="var(--chart-1)",
stroke="var(--chart-1)",
stroke_width=2,
type_="linear",
is_animation_active=False,
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
interval="preserveStartEnd",
tick={
"fill": "var(--foreground)",
"fontSize": 10,
},
),
data=data,
width="100%",
height=250,
),
),
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
),
class_name=chart_tooltip_content([1], "square")
+ " w-full p-0 flex flex-col gap-y-6",
)Uses stepped interpolation to emphasize discrete changes between values.
Props used: type_="step" on area.
Showing total visitors for the last 6 months
import reflex as rx
from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content
data = [
{"month": "Jan", "desktop": 186},
{"month": "Feb", "desktop": 305},
{"month": "Mar", "desktop": 237},
{"month": "Apr", "desktop": 73},
{"month": "May", "desktop": 209},
{"month": "Jun", "desktop": 214},
]
def area_chart_step_type():
return rx.el.div(
rx.el.div(
rx.el.h3(
"Area Chart - Step",
class_name="text-lg font-semibold",
),
rx.el.p(
"Showing total visitors for the last 6 months",
class_name="text-sm text-muted-foreground",
),
class_name="flex flex-col gap-y-1.5",
),
rx.el.div(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False,
stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
),
rx.recharts.area(
data_key="desktop",
fill="var(--chart-1)",
stroke="var(--chart-1)",
stroke_width=2,
type_="step",
is_animation_active=False,
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
interval="preserveStartEnd",
tick={
"fill": "var(--foreground)",
"fontSize": 10,
},
),
data=data,
width="100%",
height=250,
),
),
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
),
class_name=chart_tooltip_content([1], "square")
+ " w-full p-0 flex flex-col gap-y-6",
)Displays multiple datasets stacked on top of each other to show combined totals.
Props used: stack_id on area.
Showing total visitors for the last 6 months
import reflex as rx
from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content
data = [
{"month": "Jan", "desktop": 186, "mobile": 80},
{"month": "Feb", "desktop": 305, "mobile": 200},
{"month": "Mar", "desktop": 237, "mobile": 120},
{"month": "Apr", "desktop": 73, "mobile": 190},
{"month": "May", "desktop": 209, "mobile": 130},
{"month": "Jun", "desktop": 214, "mobile": 140},
]
def area_chart_stacked():
return rx.el.div(
rx.el.div(
rx.el.h3(
"Area Chart - Stacked",
class_name="text-lg font-semibold",
),
rx.el.p(
"Showing total visitors for the last 6 months",
class_name="text-sm text-muted-foreground",
),
class_name="flex flex-col gap-y-1.5",
),
rx.el.div(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False,
stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
),
rx.recharts.area(
data_key="desktop",
fill="var(--chart-1)",
stroke="var(--chart-1)",
stroke_width=2,
stack_id="a",
is_animation_active=False,
),
rx.recharts.area(
data_key="mobile",
fill="var(--chart-2)",
stroke="var(--chart-2)",
stroke_width=2,
stack_id="a",
is_animation_active=False,
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
interval="preserveStartEnd",
tick={
"fill": "var(--foreground)",
"fontSize": 10,
},
),
data=data,
width="100%",
height=250,
),
),
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
),
class_name=chart_tooltip_content([1, 2], "square")
+ " w-full p-0 flex flex-col gap-y-6",
)Demonstrates updating chart data from application state.
Props used: data, ClientStateVar, and dynamic chart updates.
Showing total visitors for the last 6 months
Desktop
Mobile
import datetime
import random
import reflex as rx
from reflex.experimental import ClientStateVar
from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content
start_date = datetime.date(2024, 4, 1)
data = [
{
"date": (start_date + datetime.timedelta(days=i)).strftime("%b %d"),
"desktop": random.randint(80, 500),
"mobile": random.randint(100, 550),
}
for i in range(91)
]
SelectedRange = ClientStateVar.create("area_selected", data)
def gradient(id_: str, color: str):
return rx.el.svg.linear_gradient(
rx.el.svg.stop(
stop_color=f"var(--{color})",
offset="5%",
stop_opacity=0.8,
),
rx.el.svg.stop(
stop_color=f"var(--{color})",
offset="95%",
stop_opacity=0.1,
),
x1=0,
x2=0,
y1=0,
y2=1,
id=id_,
)
def area(data_key: str, color: str):
return rx.recharts.area(
data_key=data_key,
fill=f"url(#{data_key})",
stack_id="a",
stroke=f"var(--{color})",
animation_easing="linear",
is_animation_active=False,
active_dot={"fill": f"var(--{color})"},
)
def area_chart_dynamic():
select_options = [
("Last 3 Months", data),
("Last 30 Days", data[-30:]),
("Last 7 Days", data[-7:]),
]
return rx.el.div(
rx.el.div(
rx.el.div(
rx.el.div(
rx.el.h3(
"Area Chart - Dynamic",
class_name="text-lg font-semibold",
),
rx.el.p(
"Showing total visitors for the last 6 months",
class_name="text-sm text-muted-foreground",
),
class_name="flex flex-col gap-y-1.5",
),
rx.el.select(
*[
rx.el.option(
label,
on_click=SelectedRange.set_value(value),
)
for label, value in select_options
],
default_value="Last 3 Months",
class_name="relative flex items-center whitespace-nowrap justify-center gap-2 py-2 rounded-lg shadow-sm px-3 bg-secondary border border-input",
),
class_name="flex flex-row flex-wrap gap-y-4 items-center justify-between",
),
),
rx.el.div(
rx.recharts.area_chart(
rx.el.svg.defs(
gradient("desktop", "chart-1"),
gradient("mobile", "chart-2"),
),
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False,
stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
),
area("mobile", "chart-2"),
area("desktop", "chart-1"),
rx.recharts.x_axis(
data_key="date",
axis_line=False,
min_tick_gap=32,
tick_size=10,
tick_line=False,
interval="preserveStartEnd",
tick={
"fill": "var(--foreground)",
"fontSize": 10,
},
),
data=SelectedRange.value,
width="100%",
height=250,
),
rx.el.div(
*[
rx.el.div(
rx.el.div(
class_name=f"h-2 w-2 shrink-0 rounded-[2px] bg-chart-{index + 1}"
),
rx.el.p(
device,
class_name="text-sm text-foreground",
),
class_name="flex flex-row items-center gap-x-2",
)
for index, device in enumerate(["Desktop", "Mobile"])
],
class_name="py-4 px-4 flex w-full justify-center gap-8",
),
class_name="flex flex-col items-center",
),
class_name=chart_tooltip_content([1, 2], "square")
+ " w-full p-0 flex flex-col gap-y-6",
)Shows multiple series with a chart legend.
Props used: legend, multiple area components.
Showing total visitors for the last 6 months
import reflex as rx
from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content
data = [
{"month": "Jan", "desktop": 186, "mobile": 80},
{"month": "Feb", "desktop": 305, "mobile": 200},
{"month": "Mar", "desktop": 237, "mobile": 120},
{"month": "Apr", "desktop": 73, "mobile": 190},
{"month": "May", "desktop": 209, "mobile": 130},
{"month": "Jun", "desktop": 214, "mobile": 140},
]
def area_chart_with_legend():
return rx.el.div(
rx.el.div(
rx.el.h3(
"Area Chart - Legend",
class_name="text-lg font-semibold",
),
rx.el.p(
"Showing total visitors for the last 6 months",
class_name="text-sm text-muted-foreground",
),
class_name="flex flex-col gap-1.5",
),
rx.el.div(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False,
stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
),
rx.recharts.area(
data_key="mobile",
fill="var(--chart-1)",
stroke="var(--chart-1)",
stroke_width=2,
stack_id="a",
is_animation_active=False,
),
rx.recharts.area(
data_key="desktop",
fill="var(--chart-2)",
stroke="var(--chart-2)",
stroke_width=2,
stack_id="a",
is_animation_active=False,
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
tick={
"fill": "var(--foreground)",
"fontSize": 10,
},
interval="preserveStartEnd",
),
rx.recharts.legend(),
data=data,
width="100%",
height=250,
),
),
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month ",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
),
class_name=chart_tooltip_content([1, 2], "square") + " w-full p-0 flex flex-col gap-y-6",
)Customizes axis appearance and tick formatting.
Props used: x_axis, y_axis, tick, min_tick_gap, tick_size.
Showing total visitors for the last 6 months
import reflex as rx
from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content
data = [
{"month": "Jan", "desktop": 186, "mobile": 80},
{"month": "Feb", "desktop": 305, "mobile": 200},
{"month": "Mar", "desktop": 237, "mobile": 120},
{"month": "Apr", "desktop": 73, "mobile": 190},
{"month": "May", "desktop": 209, "mobile": 130},
{"month": "Jun", "desktop": 214, "mobile": 140},
]
def area_chart_with_axis():
return rx.el.div(
rx.el.div(
rx.el.h3(
"Area Chart - Axes",
class_name="text-lg font-semibold",
),
rx.el.p(
"Showing total visitors for the last 6 months",
class_name="text-sm text-muted-foreground",
),
class_name="flex flex-col gap-1.5",
),
rx.el.div(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False,
stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
),
rx.recharts.area(
data_key="mobile",
fill="var(--chart-1)",
stroke="var(--chart-1)",
stroke_width=2,
stack_id="a",
is_animation_active=False,
),
rx.recharts.area(
data_key="desktop",
fill="var(--chart-2)",
stroke="var(--chart-2)",
stroke_width=2,
stack_id="a",
is_animation_active=False,
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
tick={
"fill": "var(--foreground)",
"fontSize": 10,
},
interval="preserveStartEnd",
),
rx.recharts.y_axis(
width=30,
axis_line=False,
min_tick_gap=50,
tick_size=10,
tick_line=False,
tick={
"fill": "var(--foreground)",
"fontSize": 10,
},
),
data=data,
width="100%",
height=250,
),
),
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month ",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
),
class_name=chart_tooltip_content([1, 2], "square") + " w-full p-0 flex flex-col gap-y-6",
)Uses SVG gradients to create filled area effects.
Props used: svg.defs, svg.linear_gradient, fill="url(#...)".
Showing total visitors for the last 6 months
Desktop
Mobile
import reflex as rx
from components.chart.chart_tooltip import chart_tooltip, chart_tooltip_content
data = [
{"month": "Jan", "desktop": 186, "mobile": 80},
{"month": "Feb", "desktop": 305, "mobile": 200},
{"month": "Mar", "desktop": 237, "mobile": 120},
{"month": "Apr", "desktop": 73, "mobile": 190},
{"month": "May", "desktop": 209, "mobile": 130},
{"month": "Jun", "desktop": 214, "mobile": 140},
]
def area_chart_with_gradient():
series = [
("desktop", "Desktop", "--chart-1"),
("mobile", "Mobile", "--chart-2"),
]
def create_gradient(var_name):
return rx.el.svg.linear_gradient(
rx.el.svg.stop(
stop_color=f"var({var_name})",
offset="5%",
stop_opacity=0.8,
),
rx.el.svg.stop(
stop_color=f"var({var_name})",
offset="95%",
stop_opacity=0.1,
),
x1=0,
x2=0,
y1=0,
y2=1,
id=var_name.strip("-"),
)
return rx.el.div(
rx.el.div(
rx.el.div(
rx.el.div(
rx.el.h3(
"Area Chart - Gradient",
class_name="font-semibold",
),
rx.el.p(
"Showing total visitors for the last 6 months",
class_name="text-sm text-muted-foreground",
),
class_name="flex flex-col gap-y-1.5",
),
rx.el.div(
*[
rx.el.div(
rx.el.div(
class_name="h-2 w-2 shrink-0 rounded-[2px]",
style={
"backgroundColor": f"var({s[2]})",
},
),
rx.el.p(
s[1],
class_name="text-xs font-medium",
),
class_name="flex items-center gap-2",
)
for s in series
],
class_name="flex items-center gap-4",
),
class_name="flex items-center justify-between w-full",
),
),
rx.el.div(
rx.recharts.area_chart(
rx.el.svg.defs(
*(create_gradient(s[2]) for s in series),
),
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False,
stroke="color-mix(in oklab, var(--muted-foreground) 15%, transparent)",
),
*[
rx.recharts.area(
data_key=s[0],
fill=f"url(#{s[2].strip('-')})",
stroke=f"var({s[2]})",
stroke_width=2,
stack_id="1",
is_animation_active=False,
)
for s in series
],
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
tick={
"fill": "var(--foreground)",
"fontSize": 10,
},
interval="preserveStartEnd",
),
data=data,
width="100%",
height=250,
),
),
rx.el.div(
rx.el.div(
rx.el.div(
"Trending up by 5.2% this month ",
class_name="flex items-center gap-2 leading-none font-medium",
),
rx.el.div(
"January - June 2024",
class_name="flex items-center gap-2 leading-none text-muted-foreground",
),
class_name="grid gap-2",
),
class_name="flex w-full items-start gap-2 text-sm",
),
class_name=chart_tooltip_content([1, 2], "square") + " w-full p-0 flex flex-col gap-y-6",
)The main chart container. Handles layout, sizing, and coordinates for child chart components.
rx.recharts.area_chart(
rx.recharts.area(
data_key="desktop",
),
data=data,
width="100%",
height=250,
)
| Prop | Type | Default |
|---|---|---|
data |
list[dict] |
|
width |
str \| int |
|
height |
str \| int |
|
margin |
dict |
|
responsive |
bool |
Represents a filled data series.
rx.recharts.area(
data_key="desktop",
fill="var(--chart-1)",
stroke="var(--chart-1)",
stroke_width=2,
)
| Prop | Type | Default |
|---|---|---|
data_key |
str |
|
fill |
str |
|
stroke |
str |
|
stroke_width |
int |
|
type_ |
str |
"monotone" |
stack_id |
str |
|
is_animation_active |
bool |
True |
active_dot |
dict |
Controls horizontal axis rendering and labels.
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick={
"fill": "var(--foreground)",
"fontSize": 10,
},
)
| Prop | Type | Default |
|---|---|---|
data_key |
str |
|
axis_line |
bool |
True |
tick_line |
bool |
True |
tick_size |
int |
|
tick |
dict |
|
interval |
str |
|
min_tick_gap |
int |
Controls vertical axis rendering.
rx.recharts.y_axis(
width=30,
axis_line=False,
)
| Prop | Type | Default |
|---|---|---|
width |
int |
|
axis_line |
bool |
True |
tick_line |
bool |
True |
tick_size |
int |
|
tick |
dict |
|
min_tick_gap |
int |
Adds background grid lines.
rx.recharts.cartesian_grid(
horizontal=True,
vertical=False,
)
| Prop | Type | Default |
|---|---|---|
horizontal |
bool |
True |
vertical |
bool |
True |
class_name |
str |
Displays hover information.
chart_tooltip()
| Prop | Type | Default |
|---|---|---|
label |
str |
|
cursor |
bool |