Search code examples
chartshighchartsgauge

unequal intervals on gauge Highcharts (or other libraries)

I need to setup a Gauge chart, with very customized and unequal intervals

Unequal in values and in space they take in the chart, for example: from 0 to 5 are classified as stable, and its area on the gauge chart is bigger than 5% (we do it to visualize better its value on the chart)

All example have seen till now equally divide the area..

I think is more understandable with an image, here below. enter image description here

Solution

  • I have the idea of how to create this chart by using two pie series and gauge. Gauge y axis has set min set to 0 and max to 10 for a function which calculates the values for the indicator.

    Here is a function to calculate the values for gauge for each period:

    function parseData(value) {
  if (value <= 10) {
    return value * 0.8 - 1
  } else if (10 < value && value <= 20) {
    return ((value - 10) / 2.5) + 7
  } else {
    return ((value - 20) / 10) + 11.5
  }
}

    Rest of the code you can find here - demo

    API: https://api.highcharts.com/highcharts/series.pie.dataLabels.formatter

    Let me know if something is unclear.

    Kind regards!