How can I change the color of legend points?

Question

If you have a look at the example below the points of Project 1 and Project 2 are both grey in the Legend. However, in my case these points should have the same color as the related series. Is there some easy way to achieve this? I could not find any example.

Example: https://jsfiddle.net/0rdwm1ax/

//possibly relevant code:
series: [
     name: 'Test Series',
     color: '#00FF00' //Setting color in my project did not work, though
     ...
    ]

What I have already tried:

Browsing through online examples and HighCharts Gantt JS API Reference (https://api.highcharts.com/gantt)
Looking for a way to set the series color (in Highcharts-Gantt that did not work)
Having a look at the PointFormatter, however I am not sure how this is working in Highcharts-Gantt (and I could not find any working example)

score 3 · Accepted Answer · answered Jan 25 '21 at 14:56

It is the same situation as here: http://jsfiddle.net/BlackLabel/1w0yx8m4/

In gantt chart the colorByPoint option is enabled by default, so you can disable it: https://jsfiddle.net/BlackLabel/mdbqnaxy/ or add the below plugin to change the color for item.

(function(H) {
    var colors = ['red', 'blue'];

    H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item) {
        item.color = colors[item.index];
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        item.color = null;
    });
}(Highcharts));

Live demo: https://jsfiddle.net/BlackLabel/mjock9uw/

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

Setting colorByPoint to false was the missing gap, thanks a lot! — Fabian Bigler, Jan 25 '21 at 16:23

How can I change the color of legend points?

1 Answers1