Answer to Stack Overflow question: https://stackoverflow.com/questions/51662895/how-to-place-datalabels-on-series-point-in-highcharts

author(s): Mike Zavarello

by Umair Rafiq

HTML

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

<div id="container"></div>

CSS

#container {
	min-width: 310px;
	max-width: 800px;
	height: 150px;
	margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
  title: { text: 'Freshness scale' },
  xAxis: {
    plotBands: [{
      color: 'rgba(0,255,0,0.5)',
      from: 0,
      to: 33,
      label: { text: 'Fresh', align: 'center', x: -10 }
    },{
      color: 'rgba(255,255,0,0.5)',
      from: 33,
      to: 67,
      label: { text: 'Stale', align: 'center', x: -10
             }
    },{
    	color: 'rgba(255,0,0,0.5)',
      from: 67,
      to: 100,
      label: { text: 'Moldy', align: 'center', x: -10
             }
    }],
    min: 0, 
    max: 100
  },
  yAxis: {
    min: 0,
    max: 1,
    tickInterval: 1,
    title: { text: '' }, 
    labels: { enabled: false }
  },
  legend: { enabled: false },
  tooltip: { enabled: false },
  series: [{
    name: 'Freshness arrow',
    data: [{x: 55, y: 0}],
    lineWidth: 0, 
    color: 'black',
    marker: { symbol: 'triangle-down', radius: 10, y: -10 }
  },{
    name: 'Freshness line',
    data: [{x: 55, y: 0},{x: 55, y: 0.5},],
    lineWidth: 4,
    color: 'black'
  }]
});