0

I have a Highcharts activity gauge that has two series. I am trying to place labels at the starting point of each ring. I have it working with hardcoded x,y coordinates, but I'm wondering if there is a way to calculate the location instead. It looks like this currently:

Here is the code I am using to add the labels in the chart render event:

function render() {

var chart = this;

chart.renderer.label('Completed 65%', 24, 25, 'rect', 0, 0, true, true, '')
  .add();
chart.renderer.label('Follow-up 45%', 28, 42, 'rect', 0, 0, true, true, '')
  .add();
}

I'd like to calculate the x,y values in the chart.renderer.label() function instead of hardcoding them to 24,25 and 28,42. However, I have not been able to find anything in the object model to locate the physical location of the series starting x and y, or the size of the label. I have many of these activity gauges to complete and going through them all and trying to find the magic coordinates seems like the wrong approach.

Alexandre Elshobokshy
  • 10,720
  • 6
  • 27
  • 57
HorseFly
  • 57
  • 10

1 Answers1

1

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/

Wojciech Chmiel
  • 7,302
  • 1
  • 7
  • 16