Label that follows bar

by Marc Locchi

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

JavaScript

$(function() {

  var chartFont = 'Helvetica';
  var divID = 'container';
  var dataC = {
    'title': '',
    'xAxis': ['Invited', 'Registered', 'Subscribed'],
    'seriesName': [''],
    'seriesData': [25, 15, 7]
  };
  ColumnChart(divID, dataC);

  Highcharts.setOptions({
    lang: {
      thousandsSep: ','
    }
  });
  
  var theLabel;

  function ColumnChart(divID, dataC) {

    chartObj = new Highcharts.Chart({
      credits: false,
      chart: {
        renderTo: divID,
        type: 'column',
        style: {
          fontFamily: chartFont
        },
        events: {
        	redraw: function() {
          	theLabel.destroy();
            point = this.series[0].points[2];
            theLabel = this.renderer.label('<div class="text-center">Reach 10 active subscriptions<br/>and enjoy a one year FREE membership!</div>', this.plotWidth - 200, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop)
        .css({
          color: '#FFFFFF'
        })
        .attr({
          fill: 'rgba(0, 0, 0, 0.75)',
          padding: 8,
          r: 5,
          zIndex: 6
        })
        .add();
          }
        }
      },
      title: {
        text: dataC.title,
        margin: 10,
        style: {
          fontSize: '15px'
        }
      },
      colors: ['#00A65A', '#F39C12', '#DD4B39'],
      exporting: {
        enabled: false
      },
      xAxis: {
        labels: {
          enabled: true
        },
        categories: dataC.xAxis,
        minorTickLength: 0,
        tickLength: 0
      },
      yAxis: {
        title: {
          text: ''
        },
        plotLines: [{
          value: 10,
          color: 'red',
          dashStyle: 'shortdash',
          width: 2,
          label: {
            text: '1 YEAR FREE',
            align: 'right',
            x: 0,
            y: -20,
            zIndex: 50,
            width: 2
          }
        }]
      },
      legend: {
        margin: 5,
        enabled: false
      },
     ...