Search code examples
javascripthighchartshighcharts-gantt

How can I change the color of legend points?

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)
Solution

  • 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