Getting Started
Resources
Utilities
Charts
Components
Line Chart
Line Charts are ideal for showing changes over time or the magnitude of multiple datasets stacked together. They combine the smoothness of line charts with the visual impact of filled areas.
Usage
The chart tooltip components are available in the base_ui library.
from typing import Literal
import reflex as rx
Display = Literal["show", "hide"]
Swatch = Literal["square", "line", "border"]
def _deep_merge(base: dict, override: dict) -> dict:
result = base.copy()
for key, value in override.items():
if isinstance(result.get(key), dict) and isinstance(value, dict):
result[key] = _deep_merge(result[key], value)
else:
result[key] = value
return result
class _ChartTooltip:
def __call__(
self,
label: Display = "show",
is_animation_active: bool = False,
separator: str = "",
cursor: bool = False,
item_style: dict = {},
label_style: dict = {},
content_style: dict = {},
) -> rx.Component:
defaults = {
"is_animation_active": is_animation_active,
"separator": separator,
"cursor": cursor,
"item_style": _deep_merge(
{
"color": "currentColor",
"display": "flex",
"paddingBottom": "0px",
"justifyContent": "space-between",
"textTransform": "capitalize",
},
item_style,
),
"label_style": _deep_merge(
{
"display": "none" if label == "hide" else "flex",
"fontWeight": "500",
},
label_style,
),
"content_style": _deep_merge(
{
"background": "var(--background)",
"borderColor": "var(--input)",
"borderRadius": "0.85rem",
"padding": "0.25rem 0.65rem",
"position": "relative",
},
content_style,
),
}
return rx.recharts.graphing_tooltip(**defaults)
class _ChartTooltipContent:
def __call__(self, chart_colors: list[int], swatch: Swatch = "square") -> str:
base = """
[&_.recharts-tooltip-item-name]:!text-muted-foreground
[&_.recharts-tooltip-item-separator]:!w-full
[&_.recharts-tooltip-item]:!min-w-[8rem]
[&_.recharts-tooltip-item]:!flex
[&_.recharts-tooltip-item]:!items-center
[&_.recharts-tooltip-item]:!gap-2
"""
if swatch == "border":
# Single vertical left border on the tooltip label using first color
first_color = chart_colors[0]
base += f"""
[&_.recharts-tooltip-label]:!border-l-2
[&_.recharts-tooltip-label]:!border-[var(--chart-{first_color})]
[&_.recharts-tooltip-label]:!pl-2
[&_.recharts-tooltip-label]:!py-0
"""
return base
lines = []
for i, color_idx in enumerate(chart_colors, 1):
if swatch == "line":
lines.append(f"""
[&_.recharts-tooltip-item:nth-child({i})]:before:!content-['']
[&_.recharts-tooltip-item:nth-child({i})]:before:!w-3
[&_.recharts-tooltip-item:nth-child({i})]:before:!h-0.5
[&_.recharts-tooltip-item:nth-child({i})]:before:!rounded-full
[&_.recharts-tooltip-item:nth-child({i})]:before:!flex-shrink-0
[&_.recharts-tooltip-item:nth-child({i})]:before:!bg-[var(--chart-{color_idx})]
[&_.recharts-tooltip-item:nth-child({i})]:before:!block
""")
else: # square
lines.append(f"""
[&_.recharts-tooltip-item:nth-child({i})]:before:!content-['']
[&_.recharts-tooltip-item:nth-child({i})]:before:!w-3
[&_.recharts-tooltip-item:nth-child({i})]:before:!h-3
[&_.recharts-tooltip-item:nth-child({i})]:before:!rounded-sm
[&_.recharts-tooltip-item:nth-child({i})]:before:!flex-shrink-0
[&_.recharts-tooltip-item:nth-child({i})]:before:!bg-[var(--chart-{color_idx})]
[&_.recharts-tooltip-item:nth-child({i})]:before:!block
""")
return base + "\n".join(lines)
chart_tooltip = _ChartTooltip()
chart_tooltip_content = _ChartTooltipContent()Line Chart
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.charts.chart_tooltip import chart_tooltip, chart_tooltip_content
from components.ui.card import card
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 linechart_v1():
return card.root(
card.header(
card.title("Line Chart"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.line_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.line(
data_key="desktop",
stroke="var(--chart-1)",
stroke_width=2,
type_="natural",
dot=False,
is_animation_active=False,
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
data=data,
width="100%",
height=250,
),
),
card.footer(
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",
)Linear
Displays data using straight line segments between points.
Line Chart - Linear
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.charts.chart_tooltip import chart_tooltip, chart_tooltip_content
from components.ui.card import card
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 linechart_v2():
return card.root(
card.header(
card.title("Line Chart - Linear"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.line_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.line(
data_key="desktop",
stroke="var(--chart-1)",
stroke_width=2,
type_="linear",
dot=False,
is_animation_active=False,
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
data=data,
width="100%",
height=250,
),
),
card.footer(
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",
)Label
Shows data points with labels for clear value identification.
Line Chart - Label
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.charts.chart_tooltip import chart_tooltip, chart_tooltip_content
from components.ui.card import card
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 linechart_v3():
return card.root(
card.header(
card.title("Line Chart - Label"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.line_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.line(
rx.recharts.label_list(
position="top",
offset=20,
custom_attrs={"fontSize": "12px", "fontWeight": "bold"},
),
data_key="desktop",
stroke="var(--chart-1)",
stroke_width=2,
type_="linear",
dot=True,
is_animation_active=False,
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
data=data,
width="100%",
height=250,
margin={"left": 20, "right": 20, "top": 25},
),
),
card.footer(
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",
)Multiple
Visualizes multiple data series on the same chart for comparison.
Line Chart - Multiple
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.charts.chart_tooltip import chart_tooltip, chart_tooltip_content
from components.ui.card import card
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 linechart_v4():
return card.root(
card.header(
card.title("Line Chart - Multiple"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.line_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.line(
data_key="desktop",
stroke="var(--chart-1)",
stroke_width=2,
type_="natural",
dot=False,
is_animation_active=False,
),
rx.recharts.line(
data_key="mobile",
stroke="var(--chart-2)",
stroke_width=2,
type_="natural",
dot=False,
is_animation_active=False,
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
data=data,
width="100%",
height=250,
),
),
card.footer(
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",
)Title Label
Includes a title and labels for comprehensive chart context.
Line Chart - Title Label
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.charts.chart_tooltip import chart_tooltip, chart_tooltip_content
from components.ui.card import card
data = [
{"browser": "chrome", "visitors": 275},
{"browser": "safari", "visitors": 200},
{"browser": "firefox", "visitors": 187},
{"browser": "edge", "visitors": 173},
{"browser": "other", "visitors": 90},
]
def linechart_v5():
return card.root(
card.header(
card.title("Line Chart - Title Label"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.line_chart(
chart_tooltip("hide"),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.line(
rx.recharts.label_list(
position="top",
offset=20,
custom_attrs={"fontSize": "12px", "fontWeight": "bold"},
data_key="browser",
),
data_key="visitors",
stroke="var(--chart-1)",
stroke_width=2,
type_="natural",
dot=True,
is_animation_active=False,
active_dot={"fill": "var(--chart-1)"},
),
data=data,
width="100%",
height=250,
margin={"left": 25, "right": 20, "top": 25},
),
),
card.footer(
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",
)Minimal
A clean, stripped-down version focusing on essential data visualization.
Line Chart - Minimal
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.charts.chart_tooltip import chart_tooltip, chart_tooltip_content
from components.ui.card import card
data = [
{"browser": "chrome", "visitors": 275},
{"browser": "safari", "visitors": 200},
{"browser": "firefox", "visitors": 187},
{"browser": "edge", "visitors": 173},
{"browser": "other", "visitors": 90},
]
def linechart_v6():
return card.root(
card.header(
card.title("Line Chart - Minimal"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.line_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.line(
data_key="visitors",
type_="natural",
dot=False,
stroke="var(--chart-1)",
stroke_width=2,
is_animation_active=False,
),
data=data,
width="100%",
height=250,
margin={"left": 20, "right": 20, "top": 25},
),
),
card.footer(
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",
)Dynamic
Demonstrates how data or series can update interactively in real-time.
Line Chart - Dynamic
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
from datetime import datetime
import reflex as rx
from components.charts.chart_tooltip import chart_tooltip, chart_tooltip_content
from components.ui.card import card
def linechart_v7():
from reflex.experimental import ClientStateVar
data = [
{"date": "2024-04-01", "desktop": 222, "mobile": 150},
{"date": "2024-04-02", "desktop": 97, "mobile": 180},
{"date": "2024-04-03", "desktop": 167, "mobile": 120},
{"date": "2024-04-04", "desktop": 242, "mobile": 260},
{"date": "2024-04-05", "desktop": 373, "mobile": 290},
{"date": "2024-04-06", "desktop": 301, "mobile": 340},
{"date": "2024-04-07", "desktop": 245, "mobile": 180},
{"date": "2024-04-08", "desktop": 409, "mobile": 320},
{"date": "2024-04-09", "desktop": 59, "mobile": 110},
{"date": "2024-04-10", "desktop": 261, "mobile": 190},
{"date": "2024-04-11", "desktop": 327, "mobile": 350},
{"date": "2024-04-12", "desktop": 292, "mobile": 210},
{"date": "2024-04-13", "desktop": 342, "mobile": 380},
{"date": "2024-04-14", "desktop": 137, "mobile": 220},
{"date": "2024-05-31", "desktop": 178, "mobile": 230},
{"date": "2024-06-01", "desktop": 178, "mobile": 200},
{"date": "2024-06-02", "desktop": 470, "mobile": 410},
{"date": "2024-06-03", "desktop": 103, "mobile": 160},
{"date": "2024-06-04", "desktop": 439, "mobile": 380},
{"date": "2024-06-05", "desktop": 88, "mobile": 140},
{"date": "2024-06-06", "desktop": 294, "mobile": 250},
{"date": "2024-06-07", "desktop": 323, "mobile": 370},
{"date": "2024-06-08", "desktop": 385, "mobile": 320},
{"date": "2024-06-09", "desktop": 438, "mobile": 480},
{"date": "2024-06-10", "desktop": 155, "mobile": 200},
{"date": "2024-06-11", "desktop": 92, "mobile": 150},
{"date": "2024-06-12", "desktop": 492, "mobile": 420},
{"date": "2024-06-13", "desktop": 81, "mobile": 130},
{"date": "2024-06-14", "desktop": 426, "mobile": 380},
{"date": "2024-06-15", "desktop": 307, "mobile": 350},
{"date": "2024-06-16", "desktop": 371, "mobile": 310},
]
formatted_data = [
{
"date": datetime.strptime(item["date"], "%Y-%m-%d").strftime("%b %d"),
"desktop": item["desktop"],
"mobile": item["mobile"],
}
for item in data
]
SelectedType = ClientStateVar.create("selected_line", "mobile")
return card.root(
card.header(
rx.el.div(
rx.el.div(
card.title("Line Chart - Dynamic"),
card.description("Showing total visitors for the last 6 months"),
class_name="flex flex-col gap-y-1.5",
),
rx.el.div(
rx.el.select(
rx.el.option(
"Mobile", on_click=SelectedType.set_value("mobile")
),
rx.el.option(
"Desktop", on_click=SelectedType.set_value("desktop")
),
default_value="Mobile",
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 items-center gap-x-2",
),
class_name="w-full flex flex-row flex-wrap items-center justify-between gap-y-4",
),
),
card.content(
rx.recharts.line_chart(
chart_tooltip("hide"),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.line(
data_key=SelectedType.value,
stroke="var(--chart-1)",
stroke_width=2,
type_="natural",
is_animation_active=False,
dot=False,
active_dot={"fill": "var(--chart-1)"},
),
rx.recharts.y_axis(type_="number", hide=True),
rx.recharts.x_axis(
data_key="date",
axis_line=False,
min_tick_gap=32,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
data=formatted_data,
width="100%",
height=250,
),
),
card.footer(
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], "line") + " w-full p-0",
)Custom Legends
Implements a user-defined legend layout for better presentation control.
Line Chart - Multiple
Showing total visitors for the last 6 months
Desktop
Mobile
Trending up by 5.2% this month
January - June 2024
import reflex as rx
from components.charts.chart_tooltip import chart_tooltip, chart_tooltip_content
from components.ui.card import card
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 linechart_v8():
return card.root(
card.header(
rx.hstack(
rx.el.div(
card.title("Line Chart - Multiple"),
card.description("Showing total visitors for the last 6 months"),
class_name="flex flex-col gap-y-1.5",
),
align="center",
justify="between",
width="100%",
),
),
card.content(
rx.recharts.line_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.line(
data_key="desktop",
stroke="var(--chart-1)",
stroke_width=2,
type_="linear",
dot=False,
is_animation_active=False,
active_dot={"fill": "var(--chart-1)"},
),
rx.recharts.line(
data_key="mobile",
stroke="var(--chart-2)",
stroke_width=2,
type_="linear",
dot=False,
is_animation_active=False,
active_dot={"fill": "var(--chart-2)"},
),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
data=data,
width="100%",
height=210,
),
rx.el.div(
rx.foreach(
["Desktop", "Mobile"],
lambda device, index: rx.el.div(
rx.el.div(
class_name=f"w-3 h-3 rounded-sm bg-chart-{index + 1}"
),
rx.el.p(device, class_name="text-sm text-foreground"),
class_name="flex flex-row items-center gap-x-2",
),
),
class_name="py-4 px-4 flex w-full flex justify-center gap-8",
),
class_name="flex flex-col h-[250px]",
),
card.footer(
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",
)External Tools
︲
Agent Resources
llms.txt