Search code examples
javascriptchartshighchartsgauge

Highcharts gauge: Circle points on gauge

I am trying to achieve this effect in Highcharts.

I have successfully modified a Solid Gauge to have 1 circle point on the arc but this was done with specifying the threshold of the chart to just below the actual value and have the dot extend to just past the actual value. I have attempted using Solid Gauge and the regular Gauge with Dials modified to appear on the arc but Dials cannot be rounded, as far as I know.

Example of a Gauge with modified Dials

plotOptions: {
    gauge: {
    dial: {
        baseLength: '100%',
      baseWidth: 10,
      radius: '100%',
      rearLength: '-90%',
      topWidth: 100,
    },
    pivot: {
        radius: 0,
    }
  }
}
Solution

  • Got it by adding a series per dot on a Solid Gauge and adding a threshold per series instead of inside plotOptions. threshold is not in the API documentation for series.solidgauge...