I have a problem.
I have a chart with 6 series, 3 correspond to the lower X axis and 3 to the upper one. The problem is that the upper series are not displayed in the "Navigator" component, and when I move the range in it, the graph breaks and the upper axis no longer matches the lower one. Here the evidence:
Also, I would like the 2 axes to be aligned at the entrance, which is not happening. It's like that for the same date and time, the data is outdated.
Thank you very much!
Investigating thoroughly, I found out that it is not possible to show 2 axes of X in the same "Navigator" component. Therefore, I had to find another solution.
What I did was to take the new extremes when modifying the zoom of the range in the "Navigator" and to set them to the upper axis, as follows:
xAxis: [{
type: 'datetime',
events: {
afterSetExtremes() {
let bottomAxis = this,
topAxis = this.chart.xAxis[1],
diferenciaMin = Math.abs(bottomAxis.dataMin - bottomAxis.min),
diferenciaMax = Math.abs(bottomAxis.dataMax - bottomAxis.max);
topAxis.setExtremes(topAxis.dataMin + diferenciaMin, topAxis.dataMax - diferenciaMax, true)
}
}
}, {
type: 'datetime',
opposite: true,
}],
The logic is simple. I also leave the official documentation of the afterSetExtremes () function: link