Getting Started
Resources
Charts
Components
Bar charts are ideal for visualizing categorical data and comparing multiple series side by side. They can be stacked, oriented horizontally, or customized with legends and axes.
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 key in result and isinstance(result[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, num_series: int, swatch: Swatch = "square") -> str:
base = """
[&_.recharts-tooltip-item-name]:!text-muted-foreground
[&_.recharts-tooltip-item-separator]:!w-full
[&_.recharts-tooltip-item]:!w-[8rem]
[&_.recharts-tooltip-item]:!flex
[&_.recharts-tooltip-item]:!items-center
[&_.recharts-tooltip-item]:!gap-2
""" + (
"""
[&_.recharts-tooltip-label]:!border-l-3
[&_.recharts-tooltip-label]:!border-[var(--chart-1)]
[&_.recharts-tooltip-label]:!pl-2
[&_.recharts-tooltip-label]:!py-0
"""
if swatch == "border"
else ""
)
lines = []
for i in range(1, num_series + 1):
if swatch == "border":
lines.append(f"""
[&_.recharts-default-tooltip]:!py-2 !flex !flex-col !gap-y-0
[&_.recharts-tooltip-item:nth-child({i})]:!border-l-3
[&_.recharts-tooltip-item:nth-child({i})]:!border-[var(--chart-{i})]
[&_.recharts-tooltip-item:nth-child({i})]:!pl-2
[&_.recharts-tooltip-item:nth-child({i})]:!py-0
""")
else:
lines.append(f"""
[&_.recharts-tooltip-item:nth-child({i})]:before:!content-['']
[&_.recharts-tooltip-item:nth-child({i})]:before:{"!w-3" if swatch == "square" else "!w-8"}
{"[&_.recharts-tooltip-item:nth-child(" + str(i) + ")]:before:!flex-shrink-0" if swatch == "square" else ""}
[&_.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:!bg-[var(--chart-{i})]
[&_.recharts-tooltip-item:nth-child({i})]:before:!block
""")
return base + "\n".join(lines)
chart_tooltip = _ChartTooltip()
chart_tooltip_content = _ChartTooltipContent()Below are examples demonstrating how these components and charts can be used.
A simple vertical bar chart comparing data categories.
Bar 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 barchart_v1():
return card.root(
card.header(
card.title("Bar Chart - Multiple"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.bar_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.bar(
data_key="desktop",
fill="var(--chart-1)",
radius=4,
is_animation_active=False,
),
rx.recharts.bar(
data_key="mobile",
fill="var(--chart-2)",
radius=4,
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,
),
class_name="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(2, "square") + " w-full p-0",
)Display multiple datasets within the same chart for comparison.
Bar Chart - Horizontal
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 barchart_v2():
return card.root(
card.header(
card.title("Bar Chart - Horizontal"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.bar_chart(
chart_tooltip(),
rx.recharts.bar(
data_key="desktop",
fill="var(--chart-1)",
radius=4,
is_animation_active=False,
),
rx.recharts.x_axis(type_="number", hide=True, tick_size=0),
rx.recharts.y_axis(
data_key="month",
type_="category",
axis_line=False,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
),
data=data,
layout="vertical",
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",
)Combine related values by stacking bars for cumulative insights.
Bar 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 barchart_v3():
return card.root(
card.header(
card.title("Bar Chart - Legend"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.bar_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.bar(
data_key="desktop",
fill="var(--chart-1)",
stack_id="a",
radius=[0, 0, 4, 4],
is_animation_active=False,
),
rx.recharts.bar(
data_key="mobile",
fill="var(--chart-2)",
stack_id="a",
radius=[4, 4, 0, 0],
is_animation_active=False,
),
rx.recharts.y_axis(type_="number", hide=True),
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(2, "square") + " w-full p-0",
)Flip the orientation to show bars horizontally for improved readability.
Bar Chart - Labeled
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": 340},
{"month": "Mar", "desktop": 237},
{"month": "Apr", "desktop": 73},
{"month": "May", "desktop": 209},
{"month": "Jun", "desktop": 214},
]
def barchart_v4():
return card.root(
card.header(
card.title("Bar Chart - Labeled"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.bar_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.bar(
rx.recharts.label_list(
data_key="desktop",
position="top",
offset=10,
),
data_key="desktop",
fill="var(--chart-1)",
radius=4,
is_animation_active=False,
),
rx.recharts.y_axis(type_="number", hide=True),
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={"top": 20},
),
),
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",
)Demonstrate dynamic updates or data-driven interactivity in your bar chart.
Bar 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 barchart_v5():
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-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},
]
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("bar_selected", "mobile")
return card.root(
card.header(
rx.hstack(
rx.el.div(
card.title("Bar 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("Mobile", on_click=SelectedType.set_value("mobile")),
rx.el.option("Desktop", on_click=SelectedType.set_value("desktop")),
default_value="Mobile",
bg=rx.color("gray", 2),
border=f"1px solid {rx.color('gray', 4)}",
class_name="relative flex items-center whitespace-nowrap justify-center gap-2 py-2 rounded-lg shadow-sm px-3",
),
align="center",
justify="between",
width="100%",
),
),
card.content(
rx.recharts.bar_chart(
chart_tooltip("hide"),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.bar(
data_key=SelectedType.value,
fill="var(--chart-1)",
radius=[2, 2, 0, 0],
is_animation_active=False,
),
rx.recharts.y_axis(type_="number", hide=True),
rx.recharts.x_axis(
data_key="date",
axis_line=False,
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, "square") + " w-full p-0",
)Add a built-in legend for clarity when displaying multiple series.
Bar Chart - Active
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": 340},
{"month": "Mar", "desktop": 237, "active": True},
{"month": "Apr", "desktop": 73},
{"month": "May", "desktop": 209},
{"month": "Jun", "desktop": 214},
]
modified_data = [
{
**item,
"stroke": ("var(--chart-3)" if item.get("active", False) else "none"),
}
for item in data
]
def barchart_v6():
return card.root(
card.header(
card.title("Bar Chart - Active"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.bar_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.bar(
data_key="desktop",
fill="var(--chart-1)",
stack_id="a",
radius=4,
stroke="stroke",
stroke_width=2,
is_animation_active=False,
),
rx.recharts.y_axis(type_="number", hide=True),
rx.recharts.x_axis(
data_key="month",
axis_line=False,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
data=modified_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",
)Create a fully custom legend layout using Reflex components.
Bar Chart - Mixed
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, "fill": "var(--chart-1)"},
{"browser": "Safari", "visitors": 200, "fill": "var(--chart-2)"},
{"browser": "Firefox", "visitors": 187, "fill": "var(--chart-3)"},
{"browser": "Edge", "visitors": 173, "fill": "var(--chart-4)"},
{"browser": "Other", "visitors": 90, "fill": "var(--chart-5)"},
]
def barchart_v7():
return card.root(
card.header(
card.title("Bar Chart - Mixed"),
card.description("Showing total visitors for the last 6 months"),
),
card.content(
rx.recharts.bar_chart(
chart_tooltip(),
rx.recharts.bar(
data_key="visitors",
fill="fill",
radius=4,
is_animation_active=False,
),
rx.recharts.x_axis(type_="number", hide=True, tick_size=0),
rx.recharts.y_axis(
data_key="browser",
type_="category",
axis_line=False,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
),
data=data,
layout="vertical",
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",
)Customize and format your x and y axes for improved presentation.
Online Transactions
Global revenue distributions
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
categories = ["Successful", "Refunded"]
EUROPE = [
{"date": f"{month} 23", "Successful": successful, "Refunded": refunded}
for month, successful, refunded in zip(
[
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
[12, 24, 48, 24, 34, 26, 12, 38, 23, 20, 24, 21],
[0, 1, 4, 2, 0, 0, 0, 2, 1, 0, 0, 8],
)
]
ASIA = [
{"date": f"{month} 23", "Successful": successful, "Refunded": refunded}
for month, successful, refunded in zip(
[
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
[31, 32, 44, 23, 35, 48, 33, 38, 41, 39, 32, 19],
[1, 2, 3, 2, 1, 1, 1, 3, 2, 1, 1, 5],
)
]
def create_chart(data: list[dict[str, str | int]]):
return rx.recharts.bar_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.foreach(
categories,
lambda key, index: rx.recharts.bar(
data_key=key,
fill=f"var(--chart-{index + 1})",
stack_id="_",
is_animation_active=False,
),
),
rx.recharts.x_axis(
data_key="date",
axis_line=False,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
interval=2,
),
data=data,
width="100%",
height=250,
)
def barchart_v8():
return card.root(
card.header(
rx.hstack(
rx.el.div(
card.title("Online Transactions"),
card.description("Global revenue distributions"),
class_name="flex flex-col gap-y-1.5",
),
rx.tabs.root(
rx.tabs.list(
rx.tabs.trigger(
rx.text("Europe", class_name="text-xs font-semibold"),
value="1",
),
rx.tabs.trigger(
rx.text("Asia", class_name="text-xs font-semibold"),
value="2",
),
),
default_value="1",
id="transactions-tabs",
),
align="center",
justify="between",
width="100%",
),
),
card.content(
rx.tabs.root(
rx.tabs.content(create_chart(EUROPE), value="1"),
rx.tabs.content(create_chart(ASIA), value="2"),
default_value="1",
),
),
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(2, "square") + " w-full p-0",
)Show how the chart adapts across different screen sizes and layouts.
Bar Chart - Multiple
Showing total visitors for the last 6 months
Desktop
Mobile
Tablet
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, "tablet": 50},
{"month": "Feb", "desktop": 305, "mobile": 200, "tablet": 120},
{"month": "Mar", "desktop": 237, "mobile": 120, "tablet": 70},
{"month": "Apr", "desktop": 73, "mobile": 190, "tablet": 30},
{"month": "May", "desktop": 209, "mobile": 130, "tablet": 80},
]
def barchart_v9():
return card.root(
card.header(
rx.el.div(
card.title("Bar Chart - Multiple"),
card.description("Showing total visitors for the last 6 months"),
class_name="flex flex-col gap-y-1.5",
),
),
card.content(
rx.recharts.bar_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
rx.recharts.bar(
data_key="desktop",
fill="var(--chart-1)",
radius=4,
is_animation_active=False,
),
rx.recharts.bar(
data_key="mobile",
fill="var(--chart-2)",
radius=4,
is_animation_active=False,
),
rx.recharts.bar(
data_key="tablet",
fill="var(--chart-3)",
radius=4,
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=230,
),
rx.el.div(
rx.foreach(
["Desktop", "Mobile", "Tablet"],
lambda device, index: rx.el.div(
rx.el.div(
class_name=f"h-3 w-3 rounded-sm bg-chart-{index + 1}"
),
rx.el.p(device, class_name="text-xs text-foreground"),
class_name="flex flex-row items-center gap-x-2",
),
),
class_name="flex items-center gap-4 justify-center",
),
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(3, "square") + " w-full p-0",
)Apply gradient fills to your bars for a modern, polished look.
Sport Activities
Running vs Cycling load
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
sport_data = [
{"date": "Jan 23", "Running": 167, "Cycling": 145},
{"date": "Feb 23", "Running": 125, "Cycling": 110},
{"date": "Mar 23", "Running": 156, "Cycling": 149},
{"date": "Apr 23", "Running": 165, "Cycling": 112},
{"date": "May 23", "Running": 153, "Cycling": 138},
{"date": "Jun 23", "Running": 124, "Cycling": 145},
{"date": "Jul 23", "Running": 164, "Cycling": 134},
]
activities = ["Running", "Cycling"]
chart_colors = ["var(--chart-1)", "var(--chart-2)"]
def create_alternating_chart(active_key: str):
return rx.recharts.bar_chart(
chart_tooltip(),
rx.recharts.cartesian_grid(
horizontal=True, vertical=False, class_name="opacity-30"
),
*[
rx.recharts.bar(
is_animation_active=False,
radius=4,
data_key=key,
fill=color,
custom_attrs={"opacity": rx.cond(key == active_key, "0.25", "1")},
)
for key, color in zip(activities, chart_colors)
],
rx.recharts.x_axis(
data_key="date",
axis_line=False,
tick_size=10,
tick_line=False,
custom_attrs={"fontSize": "12px"},
interval="preserveStartEnd",
),
data=sport_data,
width="100%",
height=250,
)
def barchart_v10():
return card.root(
card.header(
rx.hstack(
rx.el.div(
card.title("Sport Activities"),
card.description("Running vs Cycling load"),
class_name="flex flex-col gap-y-1.5",
),
rx.tabs.root(
rx.tabs.list(
*[
rx.tabs.trigger(
rx.text(activity, class_name="text-xs font-semibold"),
value=str(i + 1),
)
for i, activity in enumerate(activities)
]
),
default_value="1",
),
align="center",
justify="between",
width="100%",
),
),
card.content(
rx.tabs.root(
*[
rx.tabs.content(
create_alternating_chart(active),
value=str(i + 1),
)
for i, active in enumerate(activities)
],
default_value="1",
width="100%",
),
),
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(2, "square") + " w-full p-0",
)External Tools
︲
Agent Resources
llms.txt