I have a nice gauge that displays a percentage value like so:
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:
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?
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()
}],
};