Is it possible to change the legend symbol color in Highcharts? For example demo example contains two series and the symbols in legend are in blue and black (same as the series).
I couldn't find any symbolColor
param in the documentation. How do I change them both to say black?
legend: {
layout: 'vertical',
floating: true,
align: 'left',
verticalAlign: 'top',
x: 90,
y: 45,
symbolPadding: 20,
symbolWidth: 50,
symbolColor: '#000000' ?????
},
Add color
for the legend in each series.
series: [{color: '#000000', //change here
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {color: '#000000', //change here
data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
}]
The Highcharts 4.X source does look for a legendColor
parameter for a series/point, however you can't (as far as I know) set it without it being a user option.
If you wrap the colorizeItem
function of the Legend
class you can set the legendColor
attribute, and then utilize it quite easily. For example, wrap:
(function (H) {
H.wrap(H.Legend.prototype, 'colorizeItem', function (proceed, item, visible) {
item.legendColor = item.options.legendColor;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
And usage in your chart options:
$('#container').highcharts({
series: [{
legendColor: 'black',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
See this JSFiddle demonstration of how it looks.
https://jsfiddle.net/bym59w2p/
The colors of the legend items are updated when the series color gets an update. However, the legend will not change until clicked upon. When adding this bit of code:
this.chart.addSeries({ showInLegend: false }); this.chart.redraw(); }
You are adding an empty data serie, which is not visible in the legend but does reset the legend area. Also by adding a duration to 1, you will not or hardly see the color change. Maybe this helps you or anyone else trying to find this answer.
See below for the plotOptions bit, or click the jsfiddle link above to see it in action.
plotOptions: { series: { cursor: 'pointer', stacking: 'normal', animation: { duration: 1 }, events: { "afterAnimate": function () { var colorsArr = ['red','yellow','green']; var nameArr = ['test','test2','test3']; var countI; for(countI=0;countI<this.data.length;countI++){ switch(this.name){ case nameArr[0]: this.color = colorsArr[0]; this.data[countI].color = colorsArr[0]; break; case nameArr[1]: this.color = colorsArr[1]; this.data[countI].color = colorsArr[1]; break; case nameArr[2]: this.color = colorsArr[2]; this.data[countI].color = colorsArr[2]; break; } } this.chart.addSeries({ showInLegend: false }); this.chart.redraw(); } } } }
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.