Search code examples
javascripthighchartshighmaps

Highmaps : Custom data label on world map

Question is about how can I create custom data label like here in Highmaps's world map. I want data label for pointData which I am plotting as mappoint. So far I have my map configuration as 

{
  title: {
    text: 'Test map'
  },
  tooltip: {
    enabled: true
  },
  mapNavigation: {
    enabled: true
  },
  series: [
    {
      mapData: Highcharts.maps["custom/world"],
      data: countryData,
      joinBy: ['hc-key', 'key'],
      name: "Country Info",
      states: {
        hover: {
          color: "#00b700"
        }
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}'
      },
      dataLabels: {
        enabled: true,
        formatter: function () {
          return this.point.name;
        }
      },
      point: {
        events: {
          click() {
            console.log("Code : ", this.key)
          }
        }
      }
    },{
      type: 'mappoint',
      mapData: Highcharts.maps["custom/world"],
      data: pointData,
      name: 'Point Info',
      states: {
        hover: {
          color: "#abb700"
        }
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.location}'
      },
      dataLabels: {
        enabled: true,
        formatter: function () {
          return this.point.name;
        }
      },
      point: {
        events: {
          click() {
            console.log("Code : ", this.options.countryCode)
          }
        }
      },
      legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'bottom'
      }
    }
  ]
}

And data that I am feeding into are :

1) countryData : 

[
  {
    "key": "in",
    "index": 2
  },
  {
    "key": "us",
    "index": 2
  }
]

2)pointData 

[
  {
    "countryCode": "in",
    "site_id": 3,
    "center_count": 2,
    "location": "(Ahmedabad,India,APAC)",
    "headcount": 600,
    "lat": 23.022505,
    "lon": 72.5713621
  },
  {
    "countryCode": "us",
    "site_id": 4,
    "center_count": 2,
    "location": "(Arcadia,Greece,EMEA)",
    "headcount": 700,
    "lat": 34.1397292,
    "lon": -118.0353449
  }
]

NB : some variables has been replaced with values for brevity.

Solution

  • You can use the configuration from the demo that you referred to: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/series-datalabels

    CSS

    // data labels
.highcharts-data-label-box {
  fill: #a4edba;
  stroke: gray;
  stroke-width: 1px;
}

.highcharts-data-label {
  font-weight: normal;
}

.highlight .highcharts-data-label-box {
  fill: red;
  stroke-width: 2px;
  stroke: black;
}

.highlight.highcharts-data-label text {
  font-weight: bold;
  fill: white;
}

    In Highcharts options be sure to use a proper shape and class name for your labels:

    shape: 'callout',
className: 'highlight'

    Also remember to include the js version of Highmaps (regular version doesn't have js between maps and highmaps.js): 

    <script src="https://code.highcharts.com/maps/js/highmaps.js"></script>

    Live working example: http://jsfiddle.net/kkulig/s1t5h3m1/

    Doc reference: https://www.highcharts.com/docs/chart-design-and-style/style-by-css

    API references: