Hi All
I am using a using a solid gauge,
Is it possible using css or from properties of the gauge that it can be segmented into 3 parts and each part have its own colour.
I have attached an image of what i am trying to do.
Code: Select all
this.chart = this.maingauge_chart.stockChart('MainGuageA', {
chart: {
type: 'solidgauge',
backgroundColor: 'transparent',
},
credits: {
enabled: false
},
pane: {
center: ['50%', '50%'],
size: '100%',
innerSize: '10%',
startAngle: -150,
endAngle: 150,
background: {
backgroundColor: HighCharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '90%',
outerRadius: '100%',
shape: 'arc'
}
},
lineWidth: 1,
tooltip: {
enabled: false
},
navigator: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false,
enabled: false
},
scrollbar: { enabled: false },
// the value axis
yAxis: {
min: 0,
max: 100,
// stops: [
// [0.1, '#55BF3B'], // green
// [0.5, '#DDDF0D'], // yellow
// [0.8, '#ed1f1f'] // red
// ],
lineWidth: 0,
tickPositions: [100 / 3, 2 / 3 * 100],
minorTickWidth: 0,
zIndex: 10,
tickColor: '#deeeee',
tickWidth: 10,
tickLength: 50,
offset: 20,
labels: {
enabled: false
},
title: {
enabled: false
}
},
plotOptions: {
solidgauge: {
innerRadius: '90%',
dataLabels: {
enabled: false
},
rounded: true,
},
},
series: [{
data: [this.gauge1_value1],
tooltip: {
enabled: false
},
},
],
});
Code: Select all
stops: [
[0.3, '#55BF3B'], // green
[0.6, '#DDDF0D'], // yellow
[1, '#ed1f1f'] // red
],