priyankamore
Posts: 26
Joined: Mon Jul 04, 2016 6:47 am

Show multiple Y axis stacked one upon the Other in Highchart

I have Highchart 4.2.4 Line type Chart drawing the Graph with multiple Series data. The data can be categorised in two types for e.g. Type A and Type B. What I need to do is show Y Axis of series belonging to category A on Left and category B to right. As shown in image. I need to know if I can show category B series Y axis stacked one upon the other. Even if they have same Y axis points for e.g. both have 0 and 1 as Y axis value. But it should be showing series data and its Y axis one upon the other like stack(newest series on the top)
series data and its Y axis on Right side(orange and Red) one upon the other like stack with same Y axis data point i.e. 0 and 1
series data and its Y axis on Right side(orange and Red) one upon the other like stack with same Y axis data point i.e. 0 and 1
MultipleYAxis.png (22.23 KiB) Viewed 4298 times

Is this Possible to achieve in highchart/ any similar example that meets my requirement?
Izothep
Posts: 1246
Joined: Wed Oct 07, 2015 11:50 am

Re: Show multiple Y axis stacked one upon the Other in Highc

Hi,

I think that you can use multiple axes in case of making your chart. You can set their height and position so it will meet your requirements.

Code: Select all

    yAxis: [{
      height: '40%'
    }, {
      opposite: true,
      top: '50%',
      height: '20%',
      min: 0,
      max: 1
    }, {
      opposite: true,
      top: '80%',
      height: '20%',
      min: 0,
      max: 1,
      labels: {
        x: -35
      }
    }],
I have made simple example to show you how it can work:
http://jsfiddle.net/1n41vuf5/

Best regards,
Grzegorz Blachliński
Highcharts Developer
priyankamore
Posts: 26
Joined: Mon Jul 04, 2016 6:47 am

Re: Show multiple Y axis stacked one upon the Other in Highc

Thanks @Izothep :) I will try and fit this solution for my requirement.
Izothep
Posts: 1246
Joined: Wed Oct 07, 2015 11:50 am

Re: Show multiple Y axis stacked one upon the Other in Highc

Great, if you will have any questions about your charts please feel free to ask.

Have a nice day.
Grzegorz Blachliński
Highcharts Developer
CallumGersbach
Posts: 1
Joined: Mon Sep 20, 2021 6:15 am

Re: Show multiple Y axis stacked one upon the Other in Highc

Hey Izothep,

Not sure if you're still active in this community but I'm wondering if you could give me some assistance on the code you've linked here:
http://jsfiddle.net/1n41vuf5/

For a project we're working on, I need to be able to hide not only the plot points of the data series when clicking on the legend keys beneath the graph; but also make the space that graph consumed be hidden and allow the rest of the series which are still being shown to expand, sharing the extra space. Is this something you think is possible? I was thinking something along the lines of making the graphs height 0 when clicking the legend instead of 'hiding'?

Any help would be much appreciated,

Thank you,

Callum
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Show multiple Y axis stacked one upon the Other in Highchart

Hello CallumGersbach,

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

Something like this is possible and you would want to use legendItemClick callback function to achieve it. I have prepared a simple demo showing usage. This example works for two charts, but if you want to add more, then you will have adjust te calculations in order to achieve proper chart height and top placement.
Demo: http://jsfiddle.net/BlackLabel/7k4er8gw/
API reference: https://api.highcharts.com/highcharts/s ... dItemClick

Your second option is to use JS to temporarily show and hide charts, and assign created functions to legendItemClick in a similar manner. The implementation method is up to you, here's a simple example:
http://jsfiddle.net/BlackLabel/u201vxo7/

The first option is more "highcharts based" but will require some calculations which you have to do on your own, whereas second option might be easier, but will require dummy legend or your own custom legend.

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
akhil
Posts: 2
Joined: Wed Dec 01, 2021 10:02 am

Re: Show multiple Y axis stacked one upon the Other in Highchart

Hi,
In this chart http://jsfiddle.net/1n41vuf5/ how can I draw dashed-separator in between of the chart series ?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Show multiple Y axis stacked one upon the Other in Highchart

Hi akhil,

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

You should use SVGrenderer tool, which allows you to draw simple shapes on a chart.
Demo:http://jsfiddle.net/BlackLabel/gozh9tbn/
API reference: https://api.highcharts.com/class-refere ... VGRenderer

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
akhil
Posts: 2
Joined: Wed Dec 01, 2021 10:02 am

Re: Show multiple Y axis stacked one upon the Other in Highchart

Thanks for the quick reply and yes this is exactly what I was looking for.
Have a great day.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Show multiple Y axis stacked one upon the Other in Highchart

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

Return to “Highcharts Usage”