Petru Paler
c0b939627b
- Add PLAN.md with 40-step checklist across 10 phases - Add CLAUDE.md with project-specific instructions - Set up nix flake with FastHTML/MonsterUI dependencies - Create Python package skeleton (src/animaltrack) - Vendor FastHTML and MonsterUI documentation - Add Docker build configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1.8 KiB
Charts API Reference
MonsterUI supports ApexCharts, a javascript library for rendering different charts like line and pie charts. See the full list of chart types here.
To render a chart you'll need to include the ApexChart js in your app headers like this
app, rt = fast_app(hdrs=Theme.blue.headers(apex_charts=True))
Then create an ApexChart component as shown in the examples below.
Generally, you should be able to take any chart from the ApexChart docs, convert the chart's options var to a python dict and plug it straight into MonsterUI's ApexChart component.
Example usage
Line chart
See Source
See Output
[code]
def ex_line_chart():
return ApexChart(
opts={
"chart": {"type":"line", "zoom":{"enabled": False}, "toolbar":{"show":False}},
"series": [{"name":"Desktops", "data": [186, 305, 237, 73, 209, 214, 355]}],
"xaxis": {"categories":["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
},
cls='max-w-md max-h-md'
)
[/code]
Pie chart
See Source
See Output
[code]
def ex_pie_chart():
return ApexChart(
opts={
"chart": {"type":"pie", "zoom":{"enabled": False}, "toolbar":{"show":False}},
"series": [186, 305, 237, 73, 209, 214, 355],
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
},
cls='max-w-md max-h-md'
)
[/code]
ApexChart
Source
[code]
ApexChart(*, opts: Dict, cls: enum.Enum | str | tuple = (), **kws) -> fastcore.xml.FT
[/code]
Apex chart component
Params
-
optsApexChart options used to render your chart (e.g. {"chart":{"type":"line"}, ...}) -
clsClasses for the outer container -
kws
Returns: Div(Uk_chart(Script(...)))