0
340
ViewsHighcharts same legend color as of the Pie chart slice color?
I want to have the same colour for legend text as the corresponding slice colour have in Pie chart. I have seen by default the dot before legend text takes the colour of slice colour but not text of legend. How can we do the same for legend text?
I have pinned below the demo link from highcharts site.
https://www.highcharts.com/demo/pie-basic
I have also attached the screenshot on which am working on.
for example here in this pie chart I want the legends to have the colour for their corresponding pie section
1 answers
Answer question0
Such a feature is not supported in Highcharts by default, but you can simply add it, for example by using the below plugin:
(function(H) {
H.wrap(H.Legend.prototype, 'renderItem', function(proceed, point) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
point.legendItem.css({
color: point.color
});
});
// Handle hover and click event
H.wrap(H.Point.prototype, 'setState', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
this.legendItem.css({
color: this.color
});
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/o4wyzbqt/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts