Peter Burbach
Posts: 7
Joined: Wed Aug 10, 2022 8:22 am

Highcharts maps: drilldown issue with custom SVG map

I got an issue with the drilldown functionality for highcharts maps with a custom svg map.

The map contains level 1 and level 2 regions. Data in main series is reflecting only level 1 regions, which works fine. The map shows all level 1 areas on first run.

But drilldown ("topic 4") does not work as expected. Expectation: Map refreshes with level 2 areas as defined in drilldown series. But the map is empty.

Code: Select all

var data = [ ["id0", 8], ["id1", 0], ["id2", 5], ["id3", 12] ];

// Initiate the chart
Highcharts.mapChart('container', {
  
  drilldown: {
      drillUpButton: {
        position: {
          verticalAlign: 'bottom'
        }
      },
      series: [{ 
                id: 'topic4',
                data: [ ["id5", 1], ["id6", 2], ["id7", 5], ["id8", 7] ],
                joinBy: 'id',
                keys: ['id', 'value'],
                mapdata: mapdata,
                name: "topic4",
                /*typ: "map",*/
              }],
       
        },
  
  series: [
  {
    allAreas: false,
    data:  data,
    joinBy: 'id',
    keys: ['id', 'value'],
    mapData: mapdata,
    name: "Random Numbers for testing purpose",     
    type: "map",
  }
]
}); 
Complete code can be found here: https://jsfiddle.net/b0mbastic/rqasgw35/3/

Any ideas are welcome- thanks for your help :-) Best Regards, Peter
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts maps: drilldown issue with custom SVG map

Hello Peter!
Welcome to our forum and thanks for contacting us with your question!

You have to pass also a path property in points after drill down. It seems, that mapData property not working in drilldown.series - we will have to check that deeply. You can check the changed demo below. Also, drilldown.drillUpButton property is deprecated (https://api.highcharts.com/highcharts/d ... llUpButton) you should use drilldown.breadcrumbs instead.

Demo: https://jsfiddle.net/BlackLabel/v61ktr23/
API Reference: https://www.highcharts.com/docs/chart-c ... /drilldown

I have found, that you asked the same question on StackOverflow (https://stackoverflow.com/questions/732 ... om-svg-map). We work as a single team across all support channels so please try to not create duplicates as we do our best to answer asap.

If you have any further questions, feel free to ask.
Regards!
Hubert Kozik
Highcharts Developer
Peter Burbach
Posts: 7
Joined: Wed Aug 10, 2022 8:22 am

Re: Highcharts maps: drilldown issue with custom SVG map

Hi Hubert!
Thanks for your support. Your solution works fine and does what I wanted- except the mapData part. But I think I can find a way around that. :-)

Sorry for the duplicate in stackoverflow. At that time I didn't realize the highcharts forum. I deleted the stackoverflow post now.

Thanks a lot :-)
Best Regards
Peter
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts maps: drilldown issue with custom SVG map

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”