nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Align multiple y-axis with both positive and negative values

I am having difficulty for one scenario where I am using multiple y axis for high chart , left hand side axis is for bar chart and right hand side axis is for line chart,

I have Created fiddle example where data set are trying to align 0 axis for both positive negative values
Demo: https://jsfiddle.net/nilesh_nagdeve007/ab9vsdgy/

Trying to achieve 0 axis alignment as per the following fiddle examples for reference :
1 . http://jsfiddle.net/wchmiel/nuj7fagh/
2. https://jsfiddle.net/BlackLabel/6zasv4m9/

I am not sure what i am missing to align 0 for both the Y-Axis in same graph.
Please help me with the issue which i am facing.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Align multiple y-axis with both positive and negative values

Hello nilesh.nagdeve!
Thanks for contacting us with your question!

If I understand you correctly, all you need to do is change the height of one yAxis and move the second down. Please, check the demo below.

Demo: https://jsfiddle.net/BlackLabel/3vkLwp7y/
API Refererence: https://api.highcharts.com/highcharts/yAxis.height
https://api.highcharts.com/highcharts/yAxis.top

Let me know if that was what you were looking for!
Kind regards!
Hubert Kozik
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: Align multiple y-axis with both positive and negative values

Hi Hubert,

Thank you for suggestion.
But i am trying to make same x-axis which will start from 0 for both the y-axis,
I gave the reference example as well.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Align multiple y-axis with both positive and negative values

nilesh.nagdeve,
I am sorry for misunderstanding you. Now I think I know what you want to achieve. Sadly, you cannot do it directly from API options, so we need to use some custom JS code on the chart load event. The main idea is to set max or min as opposite values. Please, check the demo below.

Demo: https://jsfiddle.net/BlackLabel/uspwaegd/
API Reference: https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... xis#update

Let me know if that fits your requirements.
Regards!
Hubert Kozik
Highcharts Developer
siulca
Posts: 4
Joined: Tue Nov 08, 2022 1:05 pm

Re: Align multiple y-axis with both positive and negative values

I'm having the same issue and the workaround in the example provided doesn't work.

In the example above, if we add more variation to Series-1. For example, changing a single value to 0, the scales of both y axis no longer align on 0.

From my research this is a feature that has been requested dating back to 2012. Is it not part of the API yet?
siulca
Posts: 4
Joined: Tue Nov 08, 2022 1:05 pm

Re: Align multiple y-axis with both positive and negative values

I meant to say "if we add more variation to series named Version-2"...
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Align multiple y-axis with both positive and negative values

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

After research, I have found an API option to set it without additional code. The property, which is needed is chart.alignThresholds and then it is necessary to set series.threshold to e.g. 0.

Demo: https://jsfiddle.net/BlackLabel/0y39ozuf/
API Reference: https://api.highcharts.com/highcharts/c ... Thresholds

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
siulca
Posts: 4
Joined: Tue Nov 08, 2022 1:05 pm

Re: Align multiple y-axis with both positive and negative values

Thanks for the quick reply.

Interesting, I did try that before and it didn't work. I just confirmed that it doesn't work with our charts. Maybe it conflicts with some other settings?

Were using these versions:
"highcharts": "^10.2.0",
"highcharts-react-official": "^3.1.0",
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Align multiple y-axis with both positive and negative values

siulca,
I have just reproduced the config in React.js and everything seems to work correctly. You can find a link here: https://codesandbox.io/s/highcharts-rea ... ked-is92ed

Could you reproduce the issue in an online editor that I could work on? Maybe it's a bug and it should be reported on GitHub or maybe it's just a small little misunderstanding.
I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer
siulca
Posts: 4
Joined: Tue Nov 08, 2022 1:05 pm

Re: Align multiple y-axis with both positive and negative values

I found that if tickAmount is defined, the alignThreshold doesn't work. Removing tickamount fixed it for us but curiously it doesn't cause the same issue in the example above! For our pruposes this is enough. The number of ticks now changes the scale of the graphs, which is not quite how we'd like it but hopefully management will be okay with it.

Another issue we have is having the navigator rendering exactly the same scale with multiple y axis as in the graph. At the moment the series of one of the axis are a flat line because the values are much smaller than the values of the second y axis.

Is it possible to add a navigator to the example above showing, where the navigator looks the same as the graph?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Align multiple y-axis with both positive and negative values

siulca,
Unfortunately, something like you requested is not supported. The closest thing I was able to do is presented in the demo below.

Demo: https://codesandbox.io/s/highcharts-rea ... ked-1wexju

If you think this functionality should be officially implemented, you can post this idea here on our GitHUb page: https://github.com/highcharts/highchart ... new/choose
With enough users' votes, we will gladly implement something like this.

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”