Speedometer

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

JavaScript

var H = Highcharts;
var each = H.each,
  merge = H.merge,
  pInt = H.pInt,
  pick = H.pick,
  isNumber = H.isNumber;


Highcharts.seriesTypes.gauge.prototype.translate = function() {
  var series = this,
    yAxis = series.yAxis,
    options = series.options,
    center = yAxis.center;

  series.generatePoints();

  each(series.points, function(point) {

    var dialOptions = merge(options.dial, point.dial),
      index = point.series.index,
      radius = (pInt(pick(dialOptions.radius, 80)) * center[2]) / 200,
      baseLength = (pInt(pick(dialOptions.baseLength, 70)) * radius) / 100,
      rearLength = (pInt(pick(dialOptions.rearLength, 10)) * radius) / 100,
      baseWidth = dialOptions.baseWidth || 3,
      topWidth = dialOptions.topWidth || 1,
      overshoot = options.overshoot,
      rotation = yAxis.startAngleRad + yAxis.translate(point.y, null, null, null, true);

    if (isNumber(overshoot)) {
      overshoot = overshoot / 180 * Math.PI;
      rotation = Math.max(yAxis.startAngleRad - overshoot, Math.min(yAxis.endAngleRad + overshoot, rotation));

    } else if (options.wrap === false) {
      rotation = Math.max(yAxis.startAngleRad, Math.min(yAxis.endAngleRad, rotation));
    }

    rotation = rotation * 180 / Math.PI;

    // Checking series to draw dots
    point.shapeType = 'path';
    point.shapeArgs = {
      d: dialOptions.path || [
        'M',
        -rearLength, (-baseWidth / 2),
        'a', 3, 3, 0, 1, 1, 25, 0,
        'a', 3, 3, 0, 1, 1, -25, 0
      ],
      translateX: center[0],
      translateY: center[1],
      rotation: rotation,
    };

    console.log(point);

    // Positions for data label
    point.plotX = center[0];
    point.plotY = center[1];


  });
};

let value = 87;

Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        const chart = this;

        chart.series[0].points[0].graphic.attr({
          stroke: '#7571e0',
          'stroke-width': '1'
        })
      }
    }
  },
 ...