score:1

Accepted answer

You can follow the same approach as icons rendered in the official Activity gauge demo here: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-activity/

There you will find position calculated using series point shapeArgs. I modified that function to render labels as you expected. Check it in the demo posted below.

Function code:

function renderLabels() {

  var offsetTop = 5,
    offsetLeft = 5;

  if (!this.series[0].label) {
    this.series[0].label = this.renderer
      .label('Completed 65%', 0, 0, 'rect', 0, 0, true, true)
      .add(this.series[1].group);
  }

  this.series[0].label.translate(
    this.chartWidth / 2 - this.series[0].label.width + offsetLeft,
    this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
    (this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2 + offsetTop
  );


  if (!this.series[1].label) {
    this.series[1].label = this.renderer
      .label('Follow-up 45%', 0, 0, 'rect', 0, 0, true, true)
      .add(this.series[1].group);
  }

  this.series[1].label.translate(
    this.chartWidth / 2 - this.series[1].label.width + offsetLeft,
    this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
    (this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2 + offsetTop
  );
}

Function invocation:

chart: {
  type: 'solidgauge',
  events: {
    render: renderLabels
  }
}

Demo:
https://jsfiddle.net/BlackLabel/vpj32tmy/


Related Query

More Query from same tag