I’m facing an issue with the Highchart navigator. The series inside the navigator displays correctly with smaller datasets, such as 4-5k data points. However, with a very large dataset of 153,000 data points, the series appears blurred and then disappears when zooming in or out.

Here’s a sample demonstrating the problem:

[https://jsfiddle.net/gopalsingh0707/qm0sfrpx/3/]

Highcharts.chart('container', 
  
  { "chart" : { events: { render() { let chart = this; if (chart.customImg) { chart.customImg.destroy(); } chart.customImg =  chart.renderer.image("../javax.faces.resource/images/volume.png.xhtml?ln=roma-layout", chart.plotWidth + chart.plotLeft-54, 12, 25, 20).on("click", function() { generateWaveAudio(); }).attr({ zIndex: 100  }).css({ cursor: "pointer" }).add(); } }, "zoomType" : "x" , "height": 242},  "boost" : { useGPUTranslations: true }, "series" : [ { showInNavigator: true, boostThreshold: 5000, lineWidth: 1, states: { hover: { lineWidth: 1 }  }, "data" :[[0, 40.30661], [2.1E-7, -146.0206], [4.2E-7, 43.828434], [6.2E-7, 43.828434], [8.3E-7, 43.828434], [0.00000104, 40.30661], [0.00000125, 43.828434], [0.00000146, 43.828434], [0.00000167, -146.0206], [0.00000187, -146.0206], [0.00000208, -146.0206], [0.00000229, 40.30661], [0.0000025, -146.0206], [0.00000271, -146.0206], [0.00000292, 34.286007], [0.00000312, -146.0206], [0.00000333, 49.849033], [0.00000354, 40.30661], [0.00000375, -146.0206], [0.00000396, -146.0206], [0.00000417, 43.828434], [0.00000438, 53.370857], [0.00000458, -146.0206], [0.00000479, 40.30661], [0.000005, -146.0206], [0.00000521, -146.0206], [0.00000542, -146.0206], [0.00000563, -146.0206], [0.00000583, 34.286007], [0.00000604, 34.286007], [0.00000625, 40.30661], [0.00000646, -146.0206], [0.00000667, -146.0206], [0.00000688, 49.849033] ... [0.02730583, 40.30661], [0.02730604, 34.286007], [0.02730625, 34.286007], [0.02730646, 34.286007]], color: "#003399", "name" : " " } ], "title" : { "text" : "Thu, Oct 26, 2023, 15:32:36" },plotOptions: { series: { showInNavigator: true, point: { events: { select: function () { var text = 'Ampl: ' + Highcharts.numberFormat(this.y, 4) + '</br>' + 'Time: ' + 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" : [ { "title" : { "text" : " dB SPL " }  } ],"xAxis": [{ min:0, "title": { "text": " min " }, "type": "none"   } ],tooltip: { formatter: function(){ return 'Ampl: ' + Highcharts.numberFormat(this.y, 4) + '</br>' + 'Time: ' + 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, series: {  dataGrouping: { enabled: false } } ,xAxis: { type: 'linear', labels: { formatter: function() { return Highcharts.numberFormat(this.value, 2); } } } }, scrollbar: { enabled: true }}

Any help with resolving this issue would be greatly appreciated.

Thanks in advance for your help.