Waterfall over years with scrolling

[naaooj]

Hi everyone,

I need to create a waterfall chart with a distribution over years. You can find what it should look like in this https://jsfiddle.net/6j4x9qxt/.

My issue is that with more and more years it will not be displayed properly. But our endusers want a chart pictured this way. I hoped I could use Highstock to get an horizontal scrollbar, but unfortunately this type of series is not supported. Do you think it will be feasible to address this requirement without Highstock? Does any of you have an alternative in mind?

Thank you in advance for any support.

Regards,
Johann.

[ppotaczek]

Hi naaooj,

Use only highstock.js source code to make a scrollbar available.
If you want to always have column element in the middle of category, turn off grouping.

Code: Select all

  plotOptions: {
    series: {
      grouping: false
    }
  },

Live demo: https://jsfiddle.net/ppotaczek/443bhg9r/
API Reference: https://api.highcharts.com/highcharts/p ... l.grouping

Best regards!

[naaooj]

Hello ppotaczek,

Thank you very much for the hint and the jsfiddle!

Your solution works perfectly and as expected, using the right min/max on the xAxis.

Regards,
Johann.

[DineshSymp]

Hi ,

If the waterfall data becomes huge then the scrollbar drag and drop not working, if it less it is working.

Anything needs to be configured?

Thanks,
Dinesh

[jakub.j]

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

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

You can base on this jsFiddle demo: https://jsfiddle.net/gh/get/library/pur ... /waterfall

Kind regards
Jakub

[DineshSymp]

Hi Jakub,

I have enabled the scrollbar in X axis line but not showing. However if show sometimes it got struck I cant click and drag or drop after update the data.

https://jsfiddle.net/xpa9j3w4/1/

Thanks,
Dinesh

[jakub.j]

Hey!

You shouldn't import both highcharts and highstock at the same time, that's why was breaking, see:

Demo: https://jsfiddle.net/BlackLabel/27cnoxqm/

Let me know if you have any further questions!
Kind regards
Jakub