Multiple Charts Navigator Issue.

[Rickycadet]

Hey, In my project I have implemented Multiple charts with their own chartInstance[index].I am using index inside chartInstance[index] for each chart.chartInstance[1] for the 1st chart,chartInstance[2] for the 2nd chart.Using the index I would be able to access each chart.
This is my highchart configuration:
chartOptions: Highcharts.Options | any = {
chart: {
zoomType: 'x',
style: {
fontSize: '8px'
},
spacingBottom: 10,
spacingTop: 30,
spacingLeft: 15,
spacingRight: 20,
animation: true
},
title: {
text: '',
},
annotationsOptions: {
enabledButtons: false
},
xAxis: {
gridLineDashStyle: 'Solid',
gridLineWidth: 0,
id: 'default-X',
opposite: false,
crosshair: true,
type: 'datetime',
title: {
text: "Timestamp",
enabled: false
},
labels: {
style: {
fontSize: '10px'
},
autoRotation: 0,
enabled: true
},
tickWidth: 3,
tickLength: 6,
min: undefined,
max: undefined,
events: {
setExtremes: (e) => {
if (e.min != undefined && e.max != undefined && e.min && e.max) {
this.fetchDenserData(e);
}
}
}
},
yAxis: [{
gridLineDashStyle: 'Solid',
gridLineWidth: 1,
crosshair: false,
id: 'default-Y',
title: {
text: '',
enabled: true,
style: {
fontSize: '14px'
}
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 2);
},
},
min: null,
opposite: false
}],
legend: {
enabled: true
},
series: {
data: []
},
tooltip: {
shared: true
},
navigator: {
enabled: true,
adaptToUpdatedData: false,
},
scrollbar: {
liveRedraw: false
},
boost: {
useGPUTranslations: true
}
};
I am looping through data and emitting ChartInstance($event, index]) from HTML and creating
and creating this.chartInstance[Index] = event in ts.So for each index, I would be having its respective chart in the UI.
The problem I am facing is, that even though the Zoom option is working fine for all the individual charts,series is getting added perfectly but, whenever I use the individual navigator for index 2 and above, it's affecting only the.chartInstance[1] of index1.this.fetchDenserData(e) function is triggered whenever I use the navigator,the event e I am getting is empty but somehow the.chartInstance[1] is affected.

[hubert.k]

Hello Rickycadet!
Thanks for contacting us with your question!

It is hard to tell you what is not working and what could be done without taking look at your code where you are creating instances on charts. Could you reproduce it in the online editor that I could work with? You can start here: https://stackblitz.com/edit/highcharts- ... art-o6ezs9 I pasted your chart configuration and you can use random data, as you want.

I am looking for your response.
Regards!

[Rickycadet]

Hi, Sorry for not replying sooner.WRT above I dropped the project as it was no longer required.

[hubert.k]

Thank you for answering! In case of any further questions, feel free to contact us again.