Highmaps MapBubble label stacking

88 views Asked by At

I am parsing multiple occupations for each country in my dataArray to my HighMaps Mapbubble. Highmaps treats them as individual points and stacks them together on top of each other on the map. Because of that, only the most recent occupation is visible on the map as all other occupations are stacked behind the latest one.

Is there a way to make all occupations in the country visible?

This is my current Highmaps code:

Highcharts.mapChart('container', {
      chart: {
          borderWidth: 1,
          map: 'custom/world'
      },

      title: {
          text: "Where's everybody from?"
      },

      subtitle: {
          text: 'See where your peers are from and what they do'
      },

      legend: {
          enabled: false
      },

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

      series: [{
          name: 'Countries',
          color: '#E0E0E0',
          enableMouseTracking: false
      }, {
          type: 'mapbubble',
          name: 'Occupation: ',
          joinBy: ['iso-a2', 'code'],
          data: dataArray,
          dataLabels: {
            allowOverlap:false,
            enabled: true,
          },
          minSize: 1,
          maxSize: '10%',
          tooltip: {
            pointFormat: '{point.occupation}'
        }
      }]
  });

This is an extract from my Firebase JSON export to show which data format I have:

[{
  "code" : "PK",
  "occupation" : "computer science ",
  "z" : 1
},
{
  "code" : "PK",
  "occupation" : "another computer science occupation",
  "z" : 1
},
{
  "code" : "US",
  "occupation" : "manager ",
  "z" : 1
},
{
  "code" : "UG",
  "occupation" : "test24",
  "z" : 1
}]
0

There are 0 answers