I am using Highcharts solidgauge
, and I would like to have a legend with legend symbol, however legend symbol is not taking color from series, instead it is taking #CCC
as some default color. Below is code snippet
series: [{
showInLegend: true,
name: 'Your Humidity Level',
borderColor: '#00AF33', //gives color to individual ring on graph
color: '#00AF33',
data: [{
radius: '93%',
innerRadius: '91%',
y: 32,
color: '#00AF33'
}],
}, {
showInLegend: true,
name: 'Ideal Humidity Range',
borderColor: '#00B2EE',
color: '#00B2EE',
data: [{
radius: '83%',
innerRadius: '82%',
y: 50,
color: '#00B2EE'
}],
The problem is that series in solid-gauge
chart have no internal color property. As a solution, in 'afterColorizeItem'
event you can change the symbol fill color to the one set by user:
(function(H) {
H.addEvent(H.Legend, 'afterColorizeItem', function(e) {
if (e.visible) {
e.item.legendSymbol.attr({
fill: e.item.userOptions.color
})
}
});
})(Highcharts);
Live demo: http://jsfiddle.net/BlackLabel/gpdsq065/
I am not sure you can provide a static color to the gauge , but you can try giving the min and max color same to achieve that :
yAxis: {
...............
minColor: 'blue',
maxColor: 'blue',
...............
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.