Double finger zoom not keeping the highchart in sync with the navigator

I'm facing an issue with the Highcharts navigator. When I create the navigator using the navigator attribute within the Highcharts configuration, a double-finger scroll over the chart zooms in/out both the chart and the navigator simultaneously. However, when I implement the navigator using the Highcharts.navigator object, the double-finger scroll only zooms in/out the chart, but not the navigator.

Not working: https://jsfiddle.net/gopalsingh0707/4tsfL1qa/30/


    

    const navigator = Highcharts.navigator('navigator-container', {
       
      
        series: [{
           
            data: 
            
            [[1698351117000, 5.4756274], [1698350210000, 5.5807543], [1698347057000, 3.8524187], [1698342736000, 5.6175838], [1698338416000, 4.760621], [1698334085000, 4.102468], [1698329764000, 5.0720615], [1698325444000, 4.331846], [1698321118000, 4.8415008], [1698316798000, 5.3565307], [1698312477000, 4.178764], [1698308156000, 4.48355], [1698303836000, 5.17725], [1698299515000, 4.044917], [1698295195000, 4.551956], [1698290875000, 4.9452486], [1698286555000, 4.0260453], [1698282234000, 4.53299], [1698277914000, 5.0122814], [1698273594000, 4.4838605], [1698269273000, 4.4652667]]
            
            }]
    });






    const chart1 = Highcharts.chart('chart-container', 
    
    { "chart" : { marginTop:70, "zoomType" : "x",
      panning: false, pinchType: ''
    , "height": 292.5 }, time: { timezoneOffset: 240 }, 
    
    "series" : [ { lineWidth: 1, states: { hover: { lineWidth: 1 }  }, "data" :[[1698351117000, 5.4756274], [1698350210000, 5.5807543], [1698347057000, 3.8524187], [1698342736000, 5.6175838], [1698338416000, 4.760621], [1698334085000, 4.102468], [1698329764000, 5.0720615], [1698325444000, 4.331846], [1698321118000, 4.8415008], [1698316798000, 5.3565307], [1698312477000, 4.178764], [1698308156000, 4.48355], [1698303836000, 5.17725], [1698299515000, 4.044917], [1698295195000, 4.551956], [1698290875000, 4.9452486], [1698286555000, 4.0260453], [1698282234000, 4.53299], [1698277914000, 5.0122814], [1698273594000, 4.4838605], [1698269273000, 4.4652667]], color: "#003399", "name" : " ", cropThreshold: 9999 } ], plotOptions: { series: {  point: { events: { select: function () {var date = new Date(this.x).toLocaleString("en-US", {timeZone: "America/New_York", weekday:"short", year:"numeric", month:"short", day:"numeric", hour:"2-digit", minute:"2-digit", second:"2-digit", hourCycle: 'h23'}); var text = date + '</br>' + Highcharts.numberFormat(this.y, 4); var chart = this.series.chart; if (!chart.lbl) { chart.lbl = chart.renderer.label(text, 75, 7).attr({ padding: 10,r: 5,zIndex: 0 }).css({color: 'red'}).add();} else {chart.lbl.attr({text: text}); } } , click: function (event) { this.select(!this.selected, false); } } }, marker: { enabled: true, radius: 0.1,  states: { select: { fillColor: 'red', lineWidth: 0, radius: 4  }, hover: { fillColor: '#4da6ff', lineWidth: 1, radius: 6 } } } } }, "title" : { "text" : " Overall " },  "legend" : { "enabled" : false },"yAxis" : [ { min:0, max: 6.6,  "title" : { "text" : " in/s - Peak " } ,"plotLines": [{ "color": "red", "width": 2, "dashStyle": "dash", "value": 0.05, "label": { "text": "Low Fault", "align": "right"} },{ "color": "orange", "width": 2, "dashStyle": "dash", "value": 0.1, "label": { "text": "Low Alert", "align": "right"} },{ "color": "orange", "width": 2, "dashStyle": "dash", "value": 0.2, "label": { "text": "High Alert", "align": "right"} },{ "color": "red", "width": 2, "dashStyle": "dash", "value": 6.0, "label": { "text": "High Fault", "align": "right"} }] } ],
    
    "xAxis": [{  
    
    
    
    
        "title": { "text": " Time " }, "type": "datetime" } ],tooltip: { positioner: function() { return { x: this.chart.plotSizeX-135, y: this.chart.plotTop-45 }; }, formatter() { return new Date(this.x).toLocaleString("en-US", { timeZone: "America/New_York", weekday:"short", year:"numeric", month:"short", day:"numeric", hour:"2-digit", minute:"2-digit", second:"2-digit", hourCycle: 'h23'}) +'</br>' + Highcharts.numberFormat(this.y, 4)},shared: true, shadow: false, borderWidth: 0, backgroundColor: "rgba(255,255,255,0.8)" } }
    
    );
    
        navigator.bind(chart1);

Working: https://jsfiddle.net/gopalsingh0707/yteodcjf/16/

  Highcharts.chart('container', 


{ "chart" : { "zoomType" : "x" , "height": 242, events: { load() { updateRemoveWindowDetails() } } }, "series" : [ { lineWidth: 1, states: { hover: { lineWidth: 1 }  }, "data" :[[0, 0.0], [0.610625, 0.0], [1.22125, 0.0], [1.831875, 0.0], [2.4425, 0.0], [3.053125, 0.0], [3.66375, 0.0037346934], [4.274375, 0.0030611916], [4.885, 0.010295773], [5.495625, 0.0051708585], [6.10625, 0.004432384], [6.716875, 0.007558804], [7.3275, 0.0114836], [7.938126, 0.009008419], [8.54875, 0.0022787983], [9.159375, 0.007963747], [9.77, 0.008420735], [10.380626, 0.006831052], [10.991251, 0.0031896743], [11.601875, 0.003593808], [12.212501, 0.0042171995], [12.823126, 0.0032372714], [13.43375, 0.0023183753]]

, color: "#003399", "name" : " " } ], "title" : { "text" : "Fri, Oct 13, 2023, 23:24:20" },plotOptions: { series: { point: { events: { select: function () { var text = 'Ampl: ' + Highcharts.numberFormat(this.y, 4) + '</br>' + 'Freq: ' + Highcharts.numberFormat(this.x, 4); var chart = this.series.chart; if (!chart.lbl) { chart.lbl = chart.renderer.label(text, 75, 7).attr({ padding: 10,r: 5,zIndex: 0 }).css({color: 'red'}).add();} else {chart.lbl.attr({text: text}); } }  , click: function (event) { this.select(!this.selected, false); } } }, marker: { enabled: true, radius: 0.1, states: { select: { fillColor: 'red', lineWidth: 0, radius: 4  }, hover: { fillColor: '#4da6ff', lineWidth: 1, radius: 6 } } } } }, "legend" : { "enabled" : false },"yAxis" : [ { type: "logarithmic" , minorTickInterval: 0.1 , "title" : { "text" : " Gs - Peak-to-Peak " }  } ],"xAxis": [{ min:0, "title": { "text": " Hz " }, "type": "none"    } ],tooltip: { formatter: function(){ return 'Ampl: ' + Highcharts.numberFormat(this.y, 4) + '</br>' + 'Freq: ' + Highcharts.numberFormat(this.x, 4) }, positioner: function() { return { x: this.chart.plotSizeX-120, y: this.chart.plotTop-45 }; }, shared: true, shadow: false, borderWidth: 0, backgroundColor: "rgba(255,255,255,0.8)" }  ,

navigator: {
 
 
margin:10, enabled: true ,xAxis: {
type: 'linear', labels: { formatter: function() { return Highcharts.numberFormat(this.value); } } } }, 

scrollbar: { enabled: true }} 
    
  );

Any help with resolving this issue would be greatly appreciated.

Solution

This issue looks like a bug in the standalone navigator module. Reported here: https://github.com/highcharts/highcharts/issues/21642

As a workaround, you can add support for mousewheel event. For example:

const axis = chart1.xAxis[0];
Highcharts.addEvent(axis, 'setExtremes', (e) => {
  if (e.trigger === 'mousewheel') {
    navigator.setRange(e.min, e.max, true, true, {
      trigger: axis
    });
  }
});

Live demo: https://jsfiddle.net/BlackLabel/8poz35fy/