highchartsgauge

Highcharts solid gauge stacked values


I have a nice gauge that displays a percentage value like so:

solid gauge

The options are:

{
  title: false,
  legend: false,
  chart: {
    type: 'solidgauge',
    width: 150,
    height: 150,
  },
  pane: {
    size: '100%',
    startAngle: 0,
    background: {
      backgroundColor: '#eee',
      outerRadius: '100%',
      innerRadius: '60%',
      borderWidth: 0,
      shape: 'arc',
    },
  },
  tooltip: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    minorTickInterval: null,
    tickPixelInterval: 400,
    tickWidth: 0,
    title: {
      enabled: false,
    },
    labels: {
        enabled:false
    }
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        y: -15,
        borderWidth: 0,
        format: '{y}%',
        style: {
          fontSize: '1rem',
          fontWeight: 'normal',
        }
      },
    }
  },
  series: [{
    data: [{
      y: 75,
      color: cyan,
    }]
  }]
}

But now I need two values:

solid gauge two values

I'd have expected to add some stacking option somewhere, along with something like:

  series: [{
    data: [{
      y: 10,
      color: blue,
    }, {
      y: 65,
      color: cyan,
    }]
  }]

but it doesn't work. And I haven't found any example for this use-case over the internet either. :(

How can I achieve this?


Solution

  • As @magdalena said, unfortunately there is no stacking option in a solidgauge chart :(

    I succeeded to fake this by applying the following transformation:

    const absoluteValues = [{
      y: 75,
      color: 'cyan',
    },
        {
      y: 15,
      color: 'blue',
    }];
    
    const options = {
      series: [{
        name: 'My serie',
        data: [].concat(absoluteValues).reduce((acc, val) => {
          return [...acc, {
            ...val,
            y: acc.reduce((result, {y}) => result + y, val.y),
          }]
        }, []).reverse()
      }],
    };