CODEWITHSUNDEEP
highcharts
Mark Z.
Mark Z.

Reputation: 2447

Highcharts Multiseries Gauge with DataLabels at Ends

How would you achieve this (jsFiddle link) dynamically for the Highcharts "Activity Gauge", so obviously it works there but I had to manually determine the correct x & y coordinates for the labels.

This result is similar to using the "inside" property for column charts, but seems nothing is built-in like that for this chart type (that I've run across at least). One could come close by passing in the same y values as for each series as tick marks on the y-axis (see snippet below) and getting rid of all markings except the number, but then I can't stagger those to be positioned correctly within each series, and for the dataLabel x & y approach I don't know the equation to be able to position the labels based on the series y values dynamically with a callback.

        yAxis: {
        labels: {
            enabled: true,
            x: 10, y: -15,
            format: '{value} %',
            style: {
                fontSize: 16,
                color: 'black'
            }
        },
        min: 0,
        max: 100,
        gridLineColor: 'transparent',
        lineColor: 'transparent',
        minorTickLength: 0,
        //tickInterval: 67, 
        tickPositions: [50, 65, 80], //TRIED TO USE Y-AXIS LABELS BUT COULDN'T STAGGER THEM 
        tickColor: '#000000',
        tickPosition: 'inside',
        //tickLength: 50,
        tickWidth: 0
    },

Any help would be much appreciated, thanks in advance.

Upvotes: 0

Views: 476

Answers (1)

Mark Z.
Mark Z.

Reputation: 2447

Solved via Highcharts support forum: fiddle , just call the following function on chart load and redraw events:

  function redrawConnectors() {
var chart = this,
  cX, cY,
  shapeArgs, ang, posX, posY, bBox;

Highcharts.each(chart.series, function(series, j) {
  Highcharts.each(series.points, function(point, i) {
    if (point.dataLabel) {
      bBox = point.dataLabel.getBBox();
      shapeArgs = point.shapeArgs;
      cX = shapeArgs.x,
        cY = shapeArgs.y,
        ang = shapeArgs.end;
      posX = cX + shapeArgs.r * Math.cos(ang);
      posY = cY + shapeArgs.r * Math.sin(ang);

      point.dataLabel.attr({
        x: posX - bBox.width / 2,
        y: posY - bBox.height / 2
      });
    }
  });
});

}

Upvotes: 1

Related Questions