Search code examples
highchartszoomingpie-chart

Highmaps mappie zooming issue


I'm trying to adapt my code with the newer version of highcharts/highmaps and I have a problem with map & mappie renderer. The render I need is similar to your demo here : https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-pies

For the moment I need to keep my non TOPOJson maps and adapt my existing code with the newer library. The result is here : https://jsfiddle.net/vegaelce/bzy4xgm1/ It's working excepting when you zoom in/out. The pies get more and more smaller when zooming in.

From the existing code I've added the following code

init: function () {
        Highcharts.Series.prototype.init.apply(this, arguments);
        // Respond to zooming and dragging the base map
        Highcharts.addEvent(this.chart.mapView, 'afterSetView', () => {
            this.isDirty = true;
        });
    },
    render: function () {
        const series = this,
            chart = series.chart,
            linkedSeries = chart.get(series.options.linkedMap);
        Highcharts.seriesTypes.pie.prototype.render.apply(
            series,
            arguments
        );
        if (series.group && linkedSeries && linkedSeries.is('map')) {
            series.group.add(linkedSeries.group);
        }
    },

and updated the following

const zoomFactor = chart.mapView.zoom / chart.mapView.minZoom;

What I need is pies don't be affected by zoom level. Can you indicates me how to do that please?


Solution

  • Removing the zoomFactor property makes that pies are not affected by zoom level.

    Demo: https://jsfiddle.net/BlackLabel/ybL5e3au/