Highcharts Maps - Drilldown not working in categorized areas in map

Question

I am working on the DrillDown feature in HighChart Map - USA map.

Drilldown works fine if I do not categorize the map (working example - https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-drilldown).

In the jsfiddle, it could be seen that on clicking on "CA", the USA map goes away, and the "CA" map is visible. On clicking on "USA" in breadcrumbs, the USA map is visible. This is the expected behavior.

In the working example, I am defining the series like this -

const data = Highcharts.geojson(topology);
data.forEach((d, i) => {
    d.drilldown = d.properties['hc-key'];
    d.value = i; // Non-random bogus data
});
series: [{
            data,
            name: 'USA',
            dataLabels: {
                enabled: true,
                format: '{point.properties.postal-code}'
            },
            custom: {
                mapView
            }
        }],

Here I am passing only one object inside series array.

Drilldown does not work when I use categorize feature of HighCharts map - USA map. This is not working in categorized map jsfiddle - https://jsfiddle.net/mngy03uq/. In the jsfiddle, it could be seen that on clicking on "CA", CA map is visible for a fraction of a second and it disappears and the USA map is visible. After this, breadcrumbs also do not work. I expect to work it similarly to what is seen in the working example.

In the non-working example, I am specifying multiple objects in series array

Looking for guidance to fix the issue.

Answer 1

The Drilldown module has been refactored in Highcharts Maps v11 and there is an issue with the drilldown module for multiple series. You can find a related GH issue ticket here: https://github.com/highcharts/highcharts/issues/18961 After drilling into one series, the other ones are not removed and that's why it is not working. At this moment there is no workaround for this, feel free to track the ticket on GitHub.