[Solved]-Highchart Gantt chart Navigator color-Highcharts

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