UI Components
Charts with Recharts
Add data visualizations using Recharts. The pulse-recharts package provides Python wrappers for all Recharts components.
Line Chart
Display trends over time with multiple data series.
import pulse as ps
from pulse_recharts import (
CartesianGrid,
Legend,
Line,
LineChart,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
)
data = [
{"month": "Jan", "sales": 4000, "orders": 2400},
{"month": "Feb", "sales": 3000, "orders": 1398},
{"month": "Mar", "sales": 2000, "orders": 9800},
{"month": "Apr", "sales": 2780, "orders": 3908},
{"month": "May", "sales": 1890, "orders": 4800},
{"month": "Jun", "sales": 2390, "orders": 3800},
]
@ps.component
def SalesChart():
return ps.div(className="h-[400px] w-full")[
ResponsiveContainer(width="100%", height="100%")[
LineChart(data=data, margin={"top": 5, "right": 30, "left": 20, "bottom": 5})[
CartesianGrid(strokeDasharray="3 3"),
XAxis(dataKey="month"),
YAxis(),
Tooltip(),
Legend(),
Line(type="monotone", dataKey="sales", stroke="#8884d8", name="Sales"),
Line(type="monotone", dataKey="orders", stroke="#82ca9d", name="Orders"),
]
]
]
app = ps.App([ps.Route("/", SalesChart)])Key components:
ResponsiveContainer- makes charts resize with their containerXAxis/YAxis- axis configuration, setdataKeyfor the data fieldLine- each data series,dataKeymaps to a field in your dataTooltip/Legend- interactive elements
Bar Chart
Compare values across categories.
from pulse_recharts import Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis
data = [
{"name": "Product A", "value": 400},
{"name": "Product B", "value": 300},
{"name": "Product C", "value": 500},
]
@ps.component
def ProductChart():
return ResponsiveContainer(width="100%", height={300})[
BarChart(data=data)[
CartesianGrid(strokeDasharray="3 3"),
XAxis(dataKey="name"),
YAxis(),
Bar(dataKey="value", fill="#8884d8"),
]
]Dynamic Data
Charts update automatically when state changes.
import pulse as ps
from pulse_recharts import Line, LineChart, ResponsiveContainer, XAxis, YAxis
class ChartState(ps.State):
data: list[dict] = []
def add_point(self):
x = len(self.data)
self.data.append({"x": x, "y": x * 2})
@ps.component
def DynamicChart():
with ps.init():
state = ChartState()
return ps.div()[
ps.button("Add Point", onClick=state.add_point),
ResponsiveContainer(width="100%", height={300})[
LineChart(data=state.data)[
XAxis(dataKey="x"),
YAxis(),
Line(dataKey="y", stroke="#8884d8"),
]
],
]