title: How to add labels for highcharts activity gauge for each series
body: <p>I need to add custom labels for the solid gauge high charts as shown in the fiddle - <a href="http://jsfiddle.net/195gmh5k/1/" rel="nofollow noreferrer">http://jsfiddle.net/195gmh5k/1/</a></p>
  
  <pre><code>$(function () {
  
  // Uncomment to style it like Apple Watch
  /*
  if (!Highcharts.theme) {
      Highcharts.setOptions({
          chart: {
              backgroundColor: 'black'
          },
          colors: ['#F62366', '#9DFF02', '#0CCDD6'],
          title: {
              style: {
                  color: 'silver'
              }
          },
          tooltip: {
              style: {
                  color: 'silver'
              }
          }
      });
  }
  // */
  
  Highcharts.chart('container', {
  
      chart: {
          type: 'solidgauge',
          marginTop: 50
      },
  
      title: {
          text: 'Activity',
          style: {
              fontSize: '24px'
          }
      },
  
      tooltip: {
          borderWidth: 0,
          backgroundColor: 'none',
          shadow: false,
          style: {
              fontSize: '16px'
          },
          pointFormat: '{series.name}&lt;br&gt;&lt;span style="font-size:2em; color: {point.color}; font-weight: bold"&gt;{point.y}%&lt;/span&gt;',
          positioner: function (labelWidth) {
              return {
                  x: 200 - labelWidth / 2,
                  y: 180
              };
          }
      },
  
      pane: {
          startAngle: 0,
          endAngle: 360,
          background: [{ // Track for Move
              outerRadius: '112%',
              innerRadius: '88%',
              backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
              borderWidth: 0
          }, { // Track for Exercise
              outerRadius: '87%',
              innerRadius: '63%',
              backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
              borderWidth: 0
          }, { // Track for Stand
              outerRadius: '62%',
              innerRadius: '38%',
              backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
              borderWidth: 0
          }]
      },
  
      yAxis: {
          min: 0,
          max: 100,
          lineWidth: 0,
          tickPositions: [],
          plotLines: [{
                      color: 'red', // Color value
                      value: 0, // Value of where the line will appear
                      width: 2, // Width of the line,
                      zIndex: 10
                  }, {
                      color: 'red',
                      value: 33.3,
                      width: 2,
                      zIndex: 10
                  }, {
                      color: 'red',
                      value: 66.6,
                      width: 2,
                      zIndex: 10
                  }]
      },
  
      plotOptions: {
          solidgauge: {
              borderWidth: '34px',
              dataLabels: {
                  enabled: false
              },
              linecap: 'round',
              stickyTracking: false
          }
      },
  
      series: [{
          name: 'Move',
          borderColor: Highcharts.getOptions().colors[0],
          data: [{
              color: Highcharts.getOptions().colors[0],
              radius: '100%',
              innerRadius: '100%',
              y: 80
          }]
      }, {
          name: 'Exercise',
          borderColor: Highcharts.getOptions().colors[1],
          data: [{
              color: Highcharts.getOptions().colors[1],
              radius: '75%',
              innerRadius: '75%',
              y: 65
          }]
      }, {
          name: 'Stand',
          borderColor: Highcharts.getOptions().colors[2],
          data: [{
              color: Highcharts.getOptions().colors[2],
              radius: '50%',
              innerRadius: '50%',
              y: 50
          }]
      }]
  },
  
  /**
   * In the chart load callback, add icons on top of the circular shapes
   */
  function callback() {
  
      // Move icon
      this.renderer.label('hello1', 180, 35, 'rect', 0, 0, true, true, '')
          .add(this.series[2].group);
  
      // Exercise icon
      this.renderer.label('hello2', 180, 65, 'rect', 0, 0, true, true, '')
          .add(this.series[2].group);
  
      // Stand icon
      this.renderer.label('hello3', 180, 100, 'rect', 0, 0, true, true, '')
  
          .add(this.series[2].group);
  });
  
  
  });
  </code></pre>
  
  <p>I am using Renderer.label api to specify the position of labels. &nbsp;</p>
  
  <p>Currently I tried locating the x and y coordinates on trial and error basis.</p>
  
  <p>What is the more efficient (basis method) way to specify the coordinates for the labels. I need to specify that align all the labels along the vertical plot line at different gauges.</p>