Scrollable column chart with large data sets

[nihal9ns]

Hey,

I am trying to plot a column chart with large data sets, close to 1000 data points.

I am facing trouble in configuring the chart in order to be scrollable horizontally and zoomed in to show the first 20 columns only, then the user could scroll to the right to see more columns.

You can check my implementation in the link below, could you please point out what I am doing wrong and suggest a workaround for this? Currently, the columns are sticking each other and I am also not able to scroll horizontally.

https://jsfiddle.net/392vwo1u/2/

Best,
Nihal

[dominik.c]

Hello nihal9ns!

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

They are sticking each other because you've set pointWidth to 20, which makes them overlap themselves a little bit. To make the chart scrollable you just need to change its width and then it'll become scrollable.

API references:
https://api.highcharts.com/highcharts/c ... a.minWidth
https://api.highcharts.com/highcharts/p ... pointWidth

Demo:
https://jsfiddle.net/BlackLabel/z52ks63c/

Best regards!

[nihal9ns]

Hey Dominik, thanks for reaching out for help!

I see, however, with the changes, the columns look too thin and I can barely understand anything. Is there a way where I can plot the first 20 - 50 points and then the user can scroll to get the next 20 - 50 points on the charts? I want the columns to be clearly visible (big enough), not sticking each other (have some spacing between them).

Thanks in advance!

[dominik.c]

Hi again!

All right, so you can adjust the look of your columns to your needs by changing pointWidth, borderColor and borderWidth properties:
https://api.highcharts.com/highcharts/p ... 1619771565
https://api.highcharts.com/highcharts/p ... orderColor
https://api.highcharts.com/highcharts/p ... orderWidth

To modify the look of the scrollable chart you can use these properties:
https://api.highcharts.com/highcharts/c ... a.minWidth
https://api.highcharts.com/highcharts/c ... lPositionX
https://api.highcharts.com/highcharts/c ... ea.opacity
https://api.highcharts.com/highcharts/xAxis.min

I've prepared a new demo for you with readable columns and different scroll ranges. Check it out and tell me if it works for you.

Demo:
https://jsfiddle.net/BlackLabel/qcndxm12/

Best regards!

[nihal9ns]

Hey Dominik!

This example looks way better than the previous one. However, there's just one last thing I would like to understand. Is there a way to increase the spacing between each column? The columns look overlapped and identifying small data points is becoming cumbersome.

Could we just increase the spacing between each column so that they are clearly distinguishable?

Thanks,
Nihal

[dominik.c]

Hi again!

When you use pointWidth property you cannot use properties that are responsible for padding and spaces between points.

The spaces between columns are normal, but you've got a lot of data on your chart and it's hard to fit all of them in such a tiny space. I suggest changing minWidth property to a very big number like 15550 so the data has more space to be displayed. Then the spaces between columns will become visible.

Demo:
https://jsfiddle.net/BlackLabel/byLorpcs/

Best regards!

[nihal9ns]

Hey Dominik!

This looks perfect! Thanks for all the help!

I was curious to know if I can add a line graph on top of the column chart?

Also, you mentioned that the data set is quite large, honestly speaking, it could be even more. Any workarounds for this? Ideally, what I would like to do is fetch first 100 points and display, then allow the user to scroll to fetch the next 100 points. Something like lazy loading pagination that we see in standard web apps. Could this be implemented? What do you suggest?


Thanks,
Nihal

[dominik.c]

Hi again!

Sure, you can add a line series above the column series. You only need to insert a new series to the chart, like that: https://jsfiddle.net/BlackLabel/gzurw1s5/

Regarding lazy data loading on scroll, there's probably no easy solution to this problem.

You would need to write your own code in which you would check if the user scrolled to the end of the scrollbar and if yes fire addPoint method to add more points to the series and then update scrollablePlotArea.minWidth property to keep the points displayed easy readable.

API references:
https://api.highcharts.com/class-refere ... s#addPoint
https://api.highcharts.com/class-refere ... art#update

Best regards!

[nihal9ns]

Hey!

I see, will check how we can do that.

Thanks for all the help!

[dominik.c]

You're welcome!

In case of any further questions, feel free to contact us again.