datalabel last value

by grant

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height:400px;margin:1.5em 1em;"></div>

JavaScript

var chart = new Highcharts.Chart('container', {
  series: [{
    data: [7, 12, 16, 32, 64]
  }],
  chart: {
    marginRight: 50,
    events: {
      load: function() {
        //some variables
        var data = this.series[0].data,
          lastIndex = data.length - 1,
          chart = this,
          lastPoint = data[lastIndex];


        //changing color of last marker
        lastPoint.update({
          marker: {
            fillColor: '#000000',
            states: {
              hover: {
                fillColor: '#000000'
              }
            }
          }
        });


        //adding tooltip as label
        chart.renderer.label(lastPoint.y, chart.chartWidth - chart.marginRight, lastPoint.plotY + chart.plotTop - 17, 'callout', 0, lastPoint.plotY + chart.plotTop)
          .css({
            color: '#FFFFFF'
          })
          .attr({
            fill: '#666',
            padding: 8,
            r: 5,
            zIndex: 6
          }).addClass('tooltip')
          .add();


        //adding plotLines on last point
        this.axes[1].addPlotLine({
          value: lastPoint.y,
          color: '#666',
          width: 1,
          id: 'plot-line-1',
          dashStyle: 'dash'
        });
        this.axes[0].addPlotLine({
          value: lastPoint.x,
          color: '#666',
          width: 1,
          id: 'plot-line-1',
          dashStyle: 'dash'
        });
      },
      redraw: function() {
        var data = this.series[0].data,
          lastIndex = data.length - 1,
          chart = this,
          lastPoint = data[lastIndex];


        //moving tooltp
        $('.tooltip').remove();
        chart.renderer.label(lastPoint.y, chart.chartWidth - chart.marginRight, lastPoint.plotY + chart.plotTop - 17, 'callout', 0, lastPoint.plotY + chart.plotTop)
          .css({
            color: '#FFFFFF'
          })
          .attr({
            fill: '#666',
            padding: 8,
            r: 5,
            zIndex: 6
         ...