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

author(s): Mike Zavarello

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: [{}]
}, function(chart) {
  var xAxis = chart.xAxis[0],
    yAxis = chart.yAxis[0];
  chart.renderer.path([
      'M', xAxis.toPixels(55), 0,
      'L', xAxis.toPixels(55), chart.plotHeight + chart.plotTop,
      'L', xAxis.toPixels(55) + 5, chart.plotHeight + chart.plotTop - 6,
      'L', xAxis.toPixels(55) - 5, chart.plotHeight + chart.plotTop - 6,
      'L', xAxis.toPixels(55), chart.plotHeight + chart.plotTop,
      'z'
    ])
    .attr({
      stroke: 'black',
      'stroke-width': 5,
      zIndex: 10
    })
    .add();
});