Getting Started
Resources
Utilities
Charts
Components
Area Chart
Area 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()Area 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 areachart_v1():
return card.root(
card.header(
card.title("Area Chart"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.area_chart(
chart_tooltip(label="show"),
rx.recharts.cartesian_grid(
horizontal=True,
vertical=False,
class_name="opacity-30",
),
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,
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], "border") + " w-full p-0",
)Linear
Displays data using straight line segments between points.
Area 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 areachart_v2():
return card.root(
card.header(
card.title("Area Chart - Linear"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
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,
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",
)Step
Renders the chart with stepped transitions, ideal for discrete intervals.
Area Chart - Step
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 areachart_v3():
return card.root(
card.header(
card.title("Area Chart - Step"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
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,
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",
)Stacked
Visualizes multiple data series stacked on top of each other for cumulative comparison.
Area Chart - Stacked
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 areachart_v4():
return card.root(
card.header(
card.title("Area Chart - Stacked"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
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,
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",
)Dynamic
Demonstrates how data or series can update interactively in real-time.
Area Chart - Dynamic
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.charts.chart_tooltip import chart_tooltip, chart_tooltip_content
from components.ui.card import card
def areachart_v5():
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})"},
)
select_options = [
("Last 3 Months", data),
("Last 30 Days", data[-30:]),
("Last 7 Days", data[-7:]),
]
return card.root(
card.header(
rx.el.div(
rx.el.div(
card.title("Area Chart - Dynamic"),
card.description("Showing total visitors for the last 6 months"),
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",
),
),
card.content(
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, class_name="opacity-30"
),
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,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
data=SelectedRange.value,
width="100%",
height=240,
),
class_name="flex flex-col items-center h-[240px]",
),
card.footer(
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=chart_tooltip_content([1, 2], "square") + " w-full p-0",
)Legend
Adds a built-in legend for easy series identification.
Area Chart - Legend
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 areachart_v6():
return card.root(
card.header(
card.title("Area Chart - Legend"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
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,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
rx.recharts.legend(),
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",
)Axes
Shows full control over axis configuration, labels, and styling.
Area Chart - Axes
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 areachart_v7():
return card.root(
card.header(
card.title("Area Chart - Axes"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
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,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
rx.recharts.y_axis(
width=30,
axis_line=False,
min_tick_gap=50,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
),
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",
)Custom Legends
Implements a user-defined legend layout for better presentation control.
Area Chart - Gradient
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 areachart_v8():
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 card.root(
card.header(
rx.hstack(
rx.el.div(
card.title("Area Chart - Gradient"),
card.description("Showing total visitors for the last 6 months"),
class_name="flex flex-col gap-y-1.5",
),
rx.hstack(
rx.foreach(
series,
lambda s: rx.hstack(
rx.box(class_name="size-2 rounded-full", bg=f"var({s[2]})"),
rx.text(
s[1],
class_name="text-xs font-medium",
color=rx.color("slate", 11),
),
align="center",
spacing="2",
),
),
class_name="flex items-center gap-4",
),
align="center",
justify="between",
width="100%",
),
),
card.content(
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, class_name="opacity-30"
),
*(
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,
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",
)Step with Gradient
Combines stepped transitions with a smooth color gradient for visual emphasis.
Area Chart - Step with Gradient
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 areachart_v9():
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_,
)
return card.root(
card.header(
card.title("Area Chart - Step with Gradient"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.area_chart(
rx.el.svg.defs(
gradient("desktop", "chart-1"),
),
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.area(
data_key="desktop",
fill="url(#desktop)",
stroke="var(--chart-1)",
stroke_width=2,
type_="step",
is_animation_active=False,
active_dot={"fill": "var(--chart-1)"},
),
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",
)Custom Legend and Axes
A complete example with custom legends, axes, and advanced styling combined.
Area Chart - Mixed
Showing total visitors for the last 6 months
Mobile
Desktop
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 areachart_v10():
series = [("mobile", "Mobile", "--chart-1"), ("desktop", "Desktop", "--chart-2")]
return card.root(
card.header(
rx.hstack(
rx.el.div(
card.title("Area Chart - Mixed"),
card.description("Showing total visitors for the last 6 months"),
class_name="flex flex-col gap-y-1.5",
),
rx.hstack(
rx.foreach(
series,
lambda s: rx.hstack(
rx.box(class_name="size-2 rounded-full", bg=f"var({s[2]})"),
rx.text(
s[1],
class_name="text-xs font-medium",
color=rx.color("slate", 11),
),
align="center",
spacing="2",
),
),
class_name="flex items-center gap-4",
),
align="center",
justify="between",
width="100%",
),
),
card.content(
rx.recharts.area_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
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,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
rx.recharts.y_axis(
width=30,
axis_line=False,
min_tick_gap=50,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
),
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",
)External Tools
︲
Agent Resources
llms.txt