How to configure Map with overlaid pie charts function in map config.

[bhavesh-shahu]

This is jsfiddle map with overlaid pie chart. https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-pies/

The basic map chart is working. But not loading the pie chart on a map. How I can use this function in the chart config.

Highcharts.each(chart.legend.allItems, function(item) { var old = item.setVisible; item.setVisible = function() { var legendItem = this; old.call(legendItem); Highcharts.each(chart.series[0].points, function(point) { if (chart.colorAxis[0].dataClasses[point.index].name === legendItem.name) { // Find this state's pie and set visibility Highcharts.find(chart.series, function(item) { return item.name === point.id; }).setVisible(legendItem.visible, false); } }); chart.redraw(); }; });

Highcharts.each(chart.series[0].points, function(state) { if (!state.id || !state.properties) { 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,
                    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.total / 100
                        );
                    },
                    tooltip: {
                        // Use the state tooltip for the pies as well
                        pointFormatter: function() {
                            return state.series.tooltipOptions.pointFormatter.call({
                                id: state.id,
                                villages: state.villages,
                                provinces: state.provinces,
                                states: state.states,
                                countries: state.countries,
                                total: state.total
                            });
                        }
                    },
                    data: [{
                        name: 'Training sessions at villages',
                        y: state.villages,
                        color: "cyan"
                    }, {
                        name: 'Training sessions at provinces',
                        y: state.provinces,
                        color: "blue"
                    }, {
                        name: 'Training sessions at states',
                        y: state.states,
                        color: "green"
                    }, {
                        name: 'Training sessions at countries',
                        y: state.countries,
                        color: "yellow"
                    }],
                    center: {
                        plotX: state.plotX,
                        plotY: state.plotY
                    }
                }, false);
            });

Help is highly appreciated.