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
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'
)
Pie chart
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'
)
ApexChart
SourceApexChart(*, opts: Dict, cls: enum.Enum | str | tuple = (), **kws) -> fastcore.xml.FTApex chart component
Params
optsApexChart options used to render your chart (e.g. {"chart":{"type":"line"}, ...})clsClasses for the outer containerkws
Returns: Div(Uk_chart(Script(...)))