Split Chart Vertically/Horizontally

[itsmejainh]

Hi,

I am from Tableau background and started using Highcharts recently and finding difficult to plot one of the scenario which is very easy to achieve in Tableau..

I am trying to plot monthly Sales(number of sales) for different product types (P1,P2,P3,P4).

I can plot this in highcharts -


I am looking to plot something like this in highcharts - (split vertically for each Product type) - screenshot taken from tableau



Is there a way to achieve this plot. I looked up the documentation but no success.

Thank you.

[KacperMadej]

You can use multiple y axis with set height and top.
Example: http://jsfiddle.net/hwh3ngrf/

[itsmejainh]

awesome !!
many thanks

[itsmejainh]

Can this be generalized for multiple groups ?

What I mean is - like we have plugin for grouped categories (grouped x-Axis)
http://blacklabel.github.io/grouped_categories/

Do we have a similar plugin for grouped yAxis.

In given example, I am showing sales for each product (P1,P2,P3,P4). What if I want to show sales per continent (America, Europe,Asia) for each product (P1,P2,P3)

In this case, I'll have 9 vertical plots.

Thanks.

[KacperMadej]

Example: http://jsfiddle.net/TFhd7/146/
Grouped categories plugin works for one axis and here you have multiple y axes.
I do not know how to overcome this problem.

Second obstacle is that axis have one type and if you want to use mentioned plugin you will use category type.
Because of that you wont be able to show data with numeric labels.
This problem can be fixed using scaled data and categories imitating numbers.

Basically if you want to develop further the Grouped categories plugin then you can contact its authors/maintainers.

Alternatively you can just use multiple charts (i.e. one per continent or product).

[RudolfFaeder]

This vertically split of the chart is really awesome. I have here an additional question. If you have this split chart and also a legend. Now when you click on a legend item, the chart of the klicked item hides. Unfortunately the remaining charts dont redraw themselves to fill the void of the missing chart. Is there any possibility to achieve this?

[karolkolodziej]

Hi!

In the demo below, I prepared an example of how to achieve this. It works only for the first series because it is hardcoded, but I think you will get the idea of how to solve this. I used the legend click events, and then I updated the yAxis properties.
API:
https://api.highcharts.com/highcharts/p ... dItemClick
https://api.highcharts.com/class-refere ... xis#update

Live example: http://jsfiddle.net/BlackLabel/qyrmg12v/

Let me know how this works for you!
Regards!

[RudolfFaeder]

Hello Karol,

yes, thank you very much! This is the Information I seeked.

Regards Rudolf

[karolkolodziej]

That's great to hear! In case of any further questions, feel free to contact us again.
Have a nice day

[cgb92]

Hi, I am having some problems with that implementation, using additional properties, like min/max configuration values.

Example: https://jsfiddle.net/cgb92/0se16yjo/4/

The graph looks quite strange and the lines are overlapped. Do we have any configuration property to avoid this?

Thanks in advance.

[pawelys]

Hi! The clipping in multiple panes isn't supported in our main highcharts package. If you have highstock licence, you can just use this: https://jsfiddle.net/BlackLabel/cj8yrxp7/

If not, you can create a simple wrap: https://jsfiddle.net/BlackLabel/npj382tf/

Let me know, if that works for you! Kind regards,

[cgb92]

Hi! The clipping in multiple panes isn't supported in our main highcharts package. If you have highstock licence, you can just use this: https://jsfiddle.net/BlackLabel/cj8yrxp7/

If not, you can create a simple wrap: https://jsfiddle.net/BlackLabel/npj382tf/

Let me know, if that works for you! Kind regards,

Awesome!!

I have highstock license, but for the time being, that solution/workaroung works quite nice for me.

Thanks a lot!

[pawelys]

You're welcome! In case of any further questions feel free to contact us again!