Highchart World map with pie

Question

Here is the highchart demo of map with pie charts. US map with pie charts

But this map is only for US. Here is my js fiddle. World wide map with pie charts

// Add the pies after chart load, optionally with offset and connectors
Highcharts.each(chart.series[0].points, function (state) {
if (!state.id) {
    return; // Skip points with no data, if any
}

var pieOffset = state.pieOffset || {},
    centerLat = parseFloat(state.properties.latitude),
    centerLon = parseFloat(state.properties.longitude);

// Add the pie for this state
chart.addSeries({
    type: 'mappie',
    name: state.id,
    zIndex: 6, // Keep pies above connector lines
    sizeFormatter: function () {
        var yAxis = this.chart.yAxis[0],
            zoomFactor = (yAxis.dataMax - yAxis.dataMin) /
                (yAxis.max - yAxis.min);
        return Math.max(
            this.chart.chartWidth / 45 * zoomFactor, // Min size
            this.chart.chartWidth / 11 * zoomFactor * state.sumVotes / maxVotes
        );
    },
    tooltip: {
        // Use the state tooltip for the pies as well
        pointFormatter: function () {
            return state.series.tooltipOptions.pointFormatter.call({
                id: state.id,
                hoverVotes: this.name,
                demVotes: state.demVotes,
                repVotes: state.repVotes,
                libVotes: state.libVotes,
                grnVotes: state.grnVotes,
                sumVotes: state.sumVotes
            });
        }
    },
    data: [{
        name: 'Democrats',
        y: state.demVotes,
        color: demColor
    }, {
        name: 'Republicans',
        y: state.repVotes,
        color: repColor
    }, {
        name: 'Libertarians',
        y: state.libVotes,
        color: libColor
    }, {
        name: 'Green',
        y: state.grnVotes,
        color: grnColor
    }],
    plotOptions: {
      pie: {
        center: [state.plotX+400, state.plotY]
      }
    }
}, false);

// Draw connector to state center if the pie has been offset
/*  if (pieOffset.drawConnector !== false) {
    var centerPoint = chart.fromLatLonToPoint({
            lat: centerLat,
            lon: centerLon
        }),
        offsetPoint = chart.fromLatLonToPoint({
            lat: centerLat + (pieOffset.lat || 0),
            lon: centerLon + (pieOffset.lon || 0)
        });
    chart.series[2].addPoint({
        name: state.id,
        path: 'M' + offsetPoint.x + ' ' + offsetPoint.y +
            'L' + centerPoint.x + ' ' + centerPoint.y
    }, false);
} */
});

I want to show map world wide map where each pie represent a country. Everything is working fine but world.js file dont have lat and long values.due to which i am facing positon issue of pie on each location.i tried using plotx and ploty .but it doesnt works. So is there any way to show pie axactly on the country area the way it is working US map?

Answer 1

You can use plotX & plotY properties of the region when it doesn't have the lat & lon defined.

Replace these two pieces of code:

plotOptions: {
  pie: {
    center: [state.plotX+400, state.plotY]
  }
}

---

// Handle lat/lon support
if (options.center.lat !== undefined) {
    var point = chart.fromLatLonToPoint(options.center);
    options.center = [
        chart.xAxis[0].toPixels(point.x, true),
        chart.yAxis[0].toPixels(point.y, true)
    ];
}

with these ones:

center: {
  plotX: state.plotX,
  plotY: state.plotY
}

---

// Replace lat/lon with plotX/plotY
if (options.center.plotX !== undefined) {
  options.center = [options.center.plotX, options.center.plotY];
}

By the way: using plotOptions inside series options is not valid. plotOptions should be placed in the top level of the chart options structure. Here's more info on that: https://api.highcharts.com/highcharts/plotOptions

Live demo: https://jsfiddle.net/BlackLabel/k5mdL6vn/