# 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**

  * `opts` ApexChart options used to render your chart (e.g. {"chart":{"type":"line"}, ...})

  * `cls` Classes for the outer container

  * `kws`

**Returns:** Div(Uk_chart(Script(...)))