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.