shailenderray
Posts: 4
Joined: Wed Jun 01, 2022 1:59 pm

Scrollbar scroll is working for other tabs also even after it is disabled.

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
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Scrollbar scroll is working for other tabs also even after it is disabled.

Hello shailenderray!
Welcome to our forum and thanks for contacting us with your question!

To disable scrollbar after click on any button you should use a xAxis.update method. I have prepared a simple demo for you, check it below.

Demo: https://jsfiddle.net/BlackLabel/d9m35fhu/
API Reference: https://api.highcharts.com/class-refere ... xis#update

Let me know if you have any further questions!
Regards!
Hubert Kozik
Highcharts Developer
shailenderray
Posts: 4
Joined: Wed Jun 01, 2022 1:59 pm

Re: Scrollbar scroll is working for other tabs also even after it is disabled.

Thanks for the reply. But doing this way does not worked for me. I am using react and passing all the graph value using state to highchart through props. You can check the screen recorded video of my problem attached below and I have also attached the images. I appreciate your efforts for helping me out. Thanks a lot!

https://drive.google.com/file/d/1uD22mw ... sp=sharing

Images Uploaded in Google drive (Link below)
https://drive.google.com/drive/folders/ ... sp=sharing
shailenderray
Posts: 4
Joined: Wed Jun 01, 2022 1:59 pm

Re: Scrollbar scroll is working for other tabs also even after it is disabled.

I need an idea of how to deal with this problem. I have tried a lot of things and read too many posts related to scroll on highcharts forum, StackOverflow. But till now, nothing has worked for me.
shailenderray
Posts: 4
Joined: Wed Jun 01, 2022 1:59 pm

Re: Scrollbar scroll is working for other tabs also even after it is disabled.

Hi, I have got the solution by reading the docs on highcharts. This issue has been fixed.
Thanks
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Scrollbar scroll is working for other tabs also even after it is disabled.

That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”