how to develop custom chart with box annotations as like attached image

How can I develop chart with outer box annotations where annotations will be in outside box along with marking line for each plot value.

highcharts #JScript

chart should be like this image

My Code :

		Highcharts.chart('container', {

    title: {
        text: 'Highcharts Annotations'
    },

    subtitle: {
        text: 'Annotation label position options'
    },

    series: [{
        keys: ['y', 'id'],
        data: [[29.9, '0'], [71.5, '1'], [106.4, '2'], [129.2, '3'], [144.0, '4'], [176.0, '5'], [176.0, '6']]
    }],

    tooltip: {
        enabled: false
    },

    annotations: [{
        labels: [{
            //verticalAlign: 'top', top by default
            // align: 'right',
            distance: 250,             
            point: '0',
             width: 100
            // height: 16
            
        }, {
            //verticalAlign: 'top', top by default
            align: 'right',
            point: '1'
        }, {
            //align: 'center', center by default
            verticalAlign: 'top',
            point: '2'
        }, {
            x: 50,
            point: '3'
        }, {
            distance: 220,
            point: '4',
             width: 100
        }],
        labelOptions: {
            point: '1',
            y: 0,
            allowOverlap: true
        }
    }]
});

#container {
	max-width: 800px;
	margin: 0 auto;
}

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

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

I am not expert in highchart , I did tried to plot 2 values but all I am unable to manage annotation boxed and positioned in exact position.

Need Help!!

Solution

If you want to assign annotations to points and align them in a line, you have to specify individual y position for each annotation label. I created an example how it can be done programmatically.

var annotation = {
  labels: [{
    point: '0'
  }, {
    point: '1'
  }, {
    point: '2'
  }, {
    point: '3'
  }, {
    point: '4'
  }, {
    point: '5'
  }],
  labelOptions: {
    crop: false,
    shape: 'connector',
    allowOverlap: true,
    overflow: 'none'
  }
}

Highcharts.chart('container', {
  legend: {
    itemMarginTop: 40
  },
  chart: {
    events: {
      load: function() {
        var chart = this,
          points = chart.series[0].points;
        Highcharts.each(annotation.labels, function(el) {
          Highcharts.each(points, function(point) {
            if (el.point === point.id) {
              el.y = chart.plotHeight - point.plotY + 50
            }
          });
        });

        this.addAnnotation(annotation)
      }
    }
  },
  series: [{
    keys: ['y', 'id'],
    data: [
      [29.9, '0'],
      [71.5, '1'],
      [106.4, '2'],
      [129.2, '3'],
      [144.0, '4'],
      [176.0, '5'],
      [176.0, '6']
    ]
  }],
  tooltip: {
    enabled: false
  }
});

Live demo: http://jsfiddle.net/BlackLabel/5xn97ac8/

API: https://api.highcharts.com/highstock/annotations.labelOptions.y