How to use the drilldown function of ui.highchart?

[Carlelst]

Question

from nicegui import ui

main_series = [
    {"name": "M2", "y": 63.06, "drilldown": "M2"},
    {"name": "M5", "y": 19.84, "drilldown": "M5"},
]

drilldown_series = [
    {
        "name": "M12",
        "id": "M12",
        "data": [
            ["test1", 3.39],
            ["test2", 0.96],
        ],
    },
    {
        "name": "M0",
        "id": "M0",
        "data": [
            ["test1", 3.39],
            ["test2", 0.96],
        ],
    },
    {
        "name": "M5",
        "id": "M5",
        "data": [
            ["test1", 3.39],
            ["test2", 0.96],
        ],
    },
]

ui.highchart(
        {
            "chart": {"type": "column"},
            "title": {"text": "Browser Market Share"},
            "xAxis": {"type": "category"},
            "legend": {"enabled": False},
            "plotOptions": {
                "series": {
                    "borderWidth": 0,
                    "dataLabels": {
                        "enabled": True,
                        "format": "{point.y:.1f}%",
                    },
                }
            },
            "tooltip": {
                "headerFormat": "<span style='font-size:11px'>{series.name}</span><br>",
                "pointFormat": (
                    "<span style='color:{point.color}'>{point.name}</span>: "
                    "<b>{point.y:.2f}%</b> of total<br/>"
                ),
            },
            "series": [{"name": "Main", "colorByPoint": True, "data": main_series}],
            "drilldown": {
                "breadcrumbs": {"position": {"align": "right"}},
                "series": drilldown_series,
            },
        }
    )

ui.run()

[Carlelst]

I used the above code to build drilldown functionality, but it didn't work

[Carlelst]

The expected effect is shown in https://www.highcharts.com/demo/highcharts/column-drilldown

[falkoschindler]

Hi @Carlelst,

You need to specify the extra "drilldown":

ui.highchart({...}, extras=['drilldown'])

[Carlelst]

Thanks for the quick response! Adding extras=['drilldown'] solved the issue. Appreciate your help!