custom GeoJSON map with pie in highcharts Map

Question

I have problem with GeoJSON map with pie in HighCharts , actually i have one geometry file that type is Polygon and show map with data like below

var data = [
['DE.SH', 728],
['DE.BE', 710],
['DE.MV', 963],
['DE.HB', 541],
['DE.HH', 622],
['DE.RP', 866],
['DE.SL', 398],
['DE.BY', 785],
['DE.SN', 223],
['DE.ST', 605],
['DE.NW', 237],
['DE.BW', 157],
['DE.HE', 134],
['DE.NI', 136],
['DE.TH', 704],
['DE.', 361]

];

Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/germany.geo.json', function (geojson) {

// Initiate the chart
Highcharts.mapChart('container', {
    chart: {
        map: geojson
    },

    title: {
        text: 'GeoJSON in Highmaps'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    colorAxis: {
        tickPixelInterval: 100
    },

    series: [{
        data: data,
        keys: ['code_hasc', 'value'],
        joinBy: 'code_hasc',
        name: 'Random data',
        states: {
            hover: {
                color: '#a4edba'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.properties.postal}'
        }
    }]
});

});

map with custom GeoJSON

but we want add extra chart to this map like map with pie for example this link show map with pie

Highcharts map with pie

I searched all document and example but i did not found any example that show map custom GeoJSON with pie please guide me thanks a lot.

Sebastian Wędzel Sebastian Wędzel · Accepted Answer · 2020-07-08T09:12:33

I am afraid that it is impossible with using the custom GeoJSON map. Here is my attempt: https://jsfiddle.net/BlackLabel/d1vxgqt9/ and as you can see in the console the error occurs: https://www.highcharts.com/errors/22/.

But you can use the map from the official Highcharts map collection and everything works fine.

Map collection: https://code.highcharts.com/mapdata/

Simplified demo: https://jsfiddle.net/BlackLabel/ocx7L6ks/

  series: [{
    mapData: Highcharts.maps['countries/de/de-all'],
    data: data,
    showInLegend: false,
    joinBy: 'hc-key',
    keys: ['hc-key', 'demVotes', 'repVotes', 'libVotes', 'grnVotes',
      'sumVotes', 'value', 'pieOffset'
    ],
    id: 'us-all',
  }]

custom GeoJSON map with pie in highcharts Map

1 Answers