bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Scrolling the stacked column chart from left to right breaks the chart for large data

If there are more than 100 legends and x axis values, scrolling the stacked column chart from left to right breaks the chart.

This issue is obsered onnly for Stacked column chart.

Removing below property from the chart prop, fixes the issue. However it removed the stacking of the column chart.

plotOptions: {
column: {
stacking: 'normal'
}
}
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

Hello,

Could you reproduce the issue in an online editor that I could work on?
It is hard to tell you what is not working and what could be done without taking look at your code.

You can start based on this demo: https://jsfiddle.net/BlackLabel/sun57geh/

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

Hi bhagyaMazire, thank you for providing a demo.

I added the stock/highstock.js core and set xAxis.max: 20 to enable the scrollbar and everything works fine (except the performance is bad because of the number of points).
See updated demo and image for reference: https://jsfiddle.net/BlackLabel/jn5hkmwv/
image (11).png
image (11).png (57.96 KiB) Viewed 3008 times
Could you please provide more info about your problem? A GIF showing the issue and a description of the expected behavior would be perfect.
Thank you in advance.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

rafalS wrote: Wed Jun 29, 2022 2:10 pm Hi bhagyaMazire, thank you for providing a demo.

I added the stock/highstock.js core and set xAxis.max: 20 to enable the scrollbar and everything works fine (except the performance is bad because of the number of points).
See updated demo and image for reference: https://jsfiddle.net/BlackLabel/jn5hkmwv/
image (11).png

Could you please provide more info about your problem? A GIF showing the issue and a description of the expected behavior would be perfect.
Thank you in advance.

Best regards!
Hi,

Can you add max: 100 records on x axis and check? I am trying to update the jsfiddle with that much data but it crashes in between.

Also as I mentioned, this issue is fixed in the latest version after 9.3.3. We are facing this issue in 7.2.2 & 8.2.2. We want to fix this issue in version 8.2.2.

Can you please check accordingly?

Will update here as soon as I am able to reproduce the issue in jsfiddle.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

It seems the problem here is that you're trying to plot exactly 14112 points - it's too much for Highcharts and browser to handle.
I suggest using the boost module (the chart works much faster), but you lose some features, e.g. dataLabels. See demo: https://jsfiddle.net/BlackLabel/xjwtsrch/

Using the above boosted demo - are you able to reproduce your issue now?
Rafal Sebestjanski,
Highcharts Team Lead
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

rafalS wrote: It seems the problem here is that you're trying to plot exactly 14112 points - it's too much for Highcharts and browser to handle.
I suggest using the boost module (the chart works much faster), but you lose some features, e.g. dataLabels. See demo: https://jsfiddle.net/BlackLabel/xjwtsrch/

Using the above boosted demo - are you able to reproduce your issue now?
We are already using the boost module. Can you suggest some different solution ?
Note : We are using version 8.2.2
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

bhagyaMazire,

I'm sorry but I'm still not able to reproduce your issue. Have you tried to put your chart into the above jsFiddle demo? To find the cause and suggest a potential solution, I need to see the problem first.
Rafal Sebestjanski,
Highcharts Team Lead
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

Can you please confirm which  highchart version used for jsdiffle. This must be the latest version (10.0.0) where this issue is not reproducible. Can you please share details about how to use the particular highchart version to reproduce this issue as we are facing this issue in version 8.2.2.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

Hi,

By default, if you import your Highcharts in an HTML file using an URL below, in script tags, it will be the newest version available.
https://code.highcharts.com/highcharts.js

To get the specific version, i.e 8.2.2, you have to enter the desired version number right after the .com/.
https://code.highcharts.com/8.2.2/highcharts.js

I have prepared a basic JSFiddle demo for you, with the Highcharts 8.2.2 version already imported. All you have to do is paste your JavaScript code.
DEMO: https://jsfiddle.net/BlackLabel/rac9dm3e/

You can read more about importing possibilities in the link below:
https://code.highcharts.com/

Regards!
Kamil Musiałowski
Highcharts Developer
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

I tried with same amount of data for 8.2.2 but scroll is not visible which I need to reproduce the issue.
Can you please guide here, I can see scroll in my application.
Tried here : https://jsfiddle.net/2jpyhfz9/

Thanks & Regards!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

I'm sorry, I didn't notice that you needed a Highstock.js (with Boost), so in the previous post, I gave you the link to a standard Highcharts.js demo - where the scrollbar property does not exist.

I took your newest demo, and imported the 8.2.2 Highstock and Boost versions. Please take a look at it and tell me if that's what you wanted to show us, so we can start working on it.
DEMO: https://jsfiddle.net/BlackLabel/o6wms9dr/

I'm sorry for the inconvenience,
Regards!
Kamil Musiałowski
Highcharts Developer
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

I tried to reproduce issue on https://jsfiddle.net/2jpyhfz9/ but still not able to do it. It seems Highstock.js is not updated on it. Can you please check once again.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

Should be working now, check the demo here: https://jsfiddle.net/BlackLabel/o6wms9dr/
Kamil Musiałowski
Highcharts Developer
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: Scrolling the stacked column chart from left to right breaks the chart for large data

Thanks for quick response. I have tried this jsfiddle.

Getting "Script Error." in console, whenever we scroll.
Please see this :
Error1.jpg
Error1.jpg (57.48 KiB) Viewed 2908 times
.

This error doesn't occurred on latest version.
Demo : https://jsfiddle.net/vnLaogc9/

Can you please check what this error is?
Else can you try it on your sample app instead of jsfidle?

Return to “Highcharts Usage”