Highcharts zoom creates duplicate curves with large datasets

I'm facing an issue with the zoom functionality in Highcharts when working with large datasets. The problem occurs when I zoom multiple times or reset the zoom:

After zooming in once, things seem fine. However, if I zoom in multiple times or reset the zoom, the chart displays duplicate curves. Instead of just showing the zoomed-in portion or the original full curve, it layers both (or multiple) curves on top of each other. This happens primarily with larger datasets and works fine with smaller ones.

Also, I’ve noticed that with large datasets, the defined zones (colored regions using the zones property in the series) don’t appear correctly on the full chart. They only become visible after zooming into a smaller section of the graph.

I’m using the Boost module to handle the large data, but the issues persist. I’ve also tried using setData to reset the chart, but it didn’t resolve the problem.

Has anyone encountered this issue before? Any ideas on how to fix it?

this.chartOptions = {
chart: { zoomType: 'x' },
title: {
text: data[0].title
},
xAxis: {
title: {
text: data[0].xAxis.title,

},
minRange:200,
categories: data[0].xAxis.fixedValues
},
yAxis: {
title: {
text: data[0].yAxis.title
},
// Afficher les lignes de seuils (plotLines)

},
series: [{

name: data[0].lines[0].metric,
data: temperatureData,
color: data[0].lines[0].lineColor,
//boostThreshold =100000
// zoneAxis: 'x',
// zones: zonesData,


}],
scrollbar: {
enabled: true
},
tooltip: {
headerFormat: '<b>{point.x} m</b><br>',
pointFormat: 'Température: {point.y} °C'
}


};





Continue reading...