Highchart Gantt chart Navigator color

Question

I am rendering a Gantt chart with different series color. The colors are somehow not reflected on the navigator at the bottom. How can I display the same colors in both series and navigator? Fiddle link : Fiddle Note: These colors are going to be dynamic which will be based on different cases. So I want them to reflect in the navigator too, dynamically. I am changing color of the series like so :

    chart: {
    events: {
        load: function() {
            Highcharts.each(this.series[0].points, function(p) {
            p.color = 'grey'
            });
        }
    }
  },

As you can see series color is grey but in the navigator below, I see different colors.

Answer 1

As per highcharts-gantt documentation:

Update the series with a new set of options. For a clean and precise handling of new options, all methods and elements from the series are removed, and it is initialized from scratch.

On event, you should then go through given serie points and change its options (in your case 'color'). The changes will be applied in the timeline below - example code changes the color after 1,5sec.

//Updating the color
setTimeout(function() {
  for (var i = 0; i < chart.series[0].points.length; i++) {
    chart.series[0].points[i].update({
      color: "grey"
    });
  }
}, 1500);

Working example

In your code it would be:

events: {
    load: function() {
        Highcharts.each(this.series[0].points, function(p) {
            p.update({color: "grey"});
        });
    }
}

To avoid shrink of timeline - launch setExtremes() after chart update.

Fires when the minimum and maximum is set for the axis, either by calling the .setExtremes() method or by selecting an area in the chart.

//Fully selected timeline
this.xAxis[0].setExtremes();

Working example - timeline selection