Search code examples
javascripthighchartshighmaps

Using Highmaps mapbbuble and datalabels. Datalabels are not going out of screen when zoomed

Using Highmaps, When map bubble and data labels are used together. Zooming into a country still shows the data labels of few other countries in a shabby way(at the bottom of the container). I have reproduced the bug here:

http://jsfiddle.net/q2nxbcee/1/

{
    type: 'mapbubble',
    mapData: mapData,
    name: 'Population 2013',
    joinBy: ['iso-a2', 'code'],
    data: data,
    minSize: 4,
    maxSize: '12%',
    tooltip: {
        pointFormat: '{point.code}: {point.z} thousands'
    },
    dataLabels: {
        enabled: true,
        //allowOverlap: true,
        formatter: function() {
            if (this.point.value > 0) {
                return this.point.value;
            } else {
                return 10;
            }
        }
    }
}

Screenshot of the issue: Data labels are accumulated at the bottom when zoomed in or panned away

Observation

The data labels are displayed at the bottom which are labels of some bubbles at the bottom, which must not be showed.

Solution

  • According to the provided documentation

    http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.overflow

    you need to add the following attributes to dataLabels

    dataLabels : {
 overflow: 'none',
 crop:false
}

    JSFiddle