point text

author(s): Torstein Hønsi

by tin nguyen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>


<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

  chart: { type: 'heatmap' },
  
  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },

  series: [{
    name: 'Sales per employee',
    borderWidth: 1,
    data: [
      { x: 0, y: 0, value: 10, text: 'custom text 1'},
      { x: 0, y: 1, value: 100, text: 'custom text 2'},
      { x: 1, y: 0, value: 100, text: 'custom text 3'},
      { x: 1, y: 1, value: 10, text: 'custom text 4'}
    ],
    dataLabels: {
      enabled: true,
      formatter () {
      	return this.y + '<br>' + this.point.text
      }
    }
  }]

});