Highcharts same legend color as of the Pie chart slice color?

Question

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

Answer 1

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