简体   繁体   中英

Highcharts solidgauge legend symbol not taking series color

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/

Docs: https://www.highcharts.com/docs/extending-highcharts

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM