Scrollbar scroll is working for other tabs also even after it is disabled.
Description of the issue:
1. I have 4 tabs on a page. They are minute, hour, daily, and month.
2. I implemented the scrollbar enabled only for the minute tab but when I scroll the xAxis in the minute tab then xAxis also gets changed for other tabs as well.
It is a live project so I am only sharing the main code that may help you have to a look into this for helping me. I have also attached Google drive link for the image please check it at the end of the post.
chart: {
type: 'column',
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
xAxis: {
endOnTick: false,
scrollbar: {
enabled: false,
},
overflow: "scroll",
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: [{
min: 0,
max: 400,
title: {
text: 'data',
}
}],
And, I am using the below logic to implement the functionality to change min, max for xAxis and for the scrollbar enabled to true and false.
if (Duration == 'monthly') {
newGraphData.xAxis.scrollbar.enabled = false;
newGraphData.xAxis.max = 12;
}
if (graphDuration == 'daily') {
newGraphData.xAxis.scrollbar.enabled = false;
newGraphData.xAxis.max = 31;
}
if (graphDuration == 'hourly') {
newGraphData.xAxis.scrollbar.enabled = false;
newGraphData.xAxis.max = 23;
}
if (graphDuration == 'minute') {
newGraphData.xAxis.scrollbar.enabled = true;
newGraphData.xAxis.max = 11
}
I have tried too many things but nothing has worked for me. If anyone can help, I would appreciate your efforts.
https://drive.google.com/file/d/1R-SV5t ... sp=sharing