snakereptile
Posts: 7
Joined: Fri Apr 23, 2021 4:09 pm

One Y Axis is not shown properly in Highcharts Multi Y Axis

I am trying to create a stock chart with multiple Y Axis with same extremes. I am using `linkedTo` option as described in the documentation.

It works fine when both Y Axis have somewhat similar min/max range but doesn't display properly then there is considerably different in max data for both of the axis.

I have created a jsfiddle for demonstration of the issue. In the chart, only the last point is visible o the second Y-Axis (bottom one).
https://jsfiddle.net/goforgold/rgubx4y7/57/

I understand that it may not be visible to eyes because of too low ranges given the extremes. But at least the tooltip should show the value for both axis when we hover over the chart, as it does appear both for bot axis for the very last point.

Please let me know if additional details are needed.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Hello snakereptile!

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

I'm not sure if I understand the issue correctly. As far as I see the tooltip always shows the value for both axis when we hover the chart. And it works exactly the same for the last point as for the previous ones.

Best regards!
Dominik Chudy
Highcharts Developer
snakereptile
Posts: 7
Joined: Fri Apr 23, 2021 4:09 pm

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Hi dominik!

Thanks for your response.

Actually, I am trying to have 2 Y Axes with different heights (80% and 20%) but have the same scaling. Similar to the chart shown below.

Image

Both Y Axes have exact same scaling. I want to achieve the same thing with Highstock. I tried options like "linkedTo", setting min and max on y axes. But the closest I could get is what shown below:

https://jsfiddle.net/goforgold/rgubx4y7/80/
Image

It has the same scaling but has following issues:

1. First Y Axis had to start with -50 which has no use as real points are starting from 0.
2. Second Y Axis is starting from 50 and ending with -50 which has really no use because values are in range -5 to 0 only.
3. It also loses the ability to auto set extremes when moving the scrollbar at the bottom.

This really makes the chart not very useful. It also breaks if I divide the height into 80%-20% ratio.

Please help.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Hi again!

I tried to set up the axes in 80:20 proportions and it seems to work all right. In your screenshot, I can see that the values for the lower axis are negative so we need to swipe min and max values, so they'll be opposite to the values for min and max properties for the upper axis.

You can also uncomment line 31 to check which gridLines belong to the lower axis. Using tickInterval property is also a good idea to check the ticks on the axis.

I hope that this demo will help you: https://jsfiddle.net/BlackLabel/mqeh7s40/

API references:
https://api.highcharts.com/highcharts/y ... dLineColor
https://api.highcharts.com/highcharts/yAxis.height
https://api.highcharts.com/highcharts/yAxis.top
https://api.highcharts.com/highcharts/y ... ckInterval
https://api.highcharts.com/highcharts/yAxis.min
https://api.highcharts.com/highcharts/yAxis.max

If you have any specific questions feel free to ask them. :-)
Best regards!
Dominik Chudy
Highcharts Developer
snakereptile
Posts: 7
Joined: Fri Apr 23, 2021 4:09 pm

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Hi @dominik.c

The fiddle you provided doesn't have the same scaling for both of the Y Axes.

I came up with the idea of having one X axis only and simply add two series. This actually makes it far easier to always have same scaling for both of the series.
https://jsfiddle.net/goforgold/ect6L5q8/1/

The chart in the fiddle have the same scaling for the both series (must-have for my chart)

The problem is that you will see that the tickers from position 0 to 400 are just a wastage of screen. And due to this, chart lines appearing close to straight lines. Is there a way that we could better use the space so the up/downs in the chart could be more visible?
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Hi again!

What do you mean that the axes don't have the same scaling? Regarding tickInterval you can set it to 25 so the axes will look more similar. https://jsfiddle.net/BlackLabel/wojhp7eg/

Regarding your demo, how should the final effect look like? You can use breaks to skip the values that are not displayed in the chart. Something like that: https://jsfiddle.net/BlackLabel/ao3qbz79/

API references: https://api.highcharts.com/highcharts/yAxis.breaks

Best regards!
Dominik Chudy
Highcharts Developer
snakereptile
Posts: 7
Joined: Fri Apr 23, 2021 4:09 pm

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Hi @dominik.c

By same scaling, I mean that the pixels between tick lines. For example, in the first jsfiddle, assume that the there are 10 pixels from point 25 to 50 (i.e 10 pixels for 25 points). But the pixels for 25 points are visible less than 10 pixels.

The chart I am looking at may look something like the below. Please note that tick lines from 10 to 190 are not appearing in the chart below because of no data falling in this range. But scaling is the same except from point 0 to 200 which I can live with as there is no data in this range.
Image

If tick lines from 10 to 190 are shown (default in HighCharts or probably in any other charting library), then my X Axes lines will become slightly straight and movements will be hard to notice.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Hi again!

If you want the same scaling maybe we could set the heights of both axes to 50%. Then they'll be equal and the distances will remain the same. You can also set different min and max on both axes so the tick lines from 10 to 190 might be totally skipped.

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

Best regards!
Dominik Chudy
Highcharts Developer
snakereptile
Posts: 7
Joined: Fri Apr 23, 2021 4:09 pm

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

https://jsfiddle.net/goforgold/ztorpue3/2/

In that fiddle, I just changed the data for the lower to something similar to match my graphic and also modified the min value accordingly but it lost the same scaling. Also, I need to maintain the scaling when navigating using the navigator.

I like to develop a solution that adapts to the data which means remove the tick lines for unused data for the upper axis and start with maybe the minimum value going to the max value and then have the lower x-axis to follow the exact same scaling as the upper x axis.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Hi again!

It lost the scaling because you've left tickInterval property set to 25 and the whole data range was less than this value. I suggest experimenting with setting different values for properties responsible for the axis look. By doing that you can learn more or less how it works and you will be able to adjust the settings perfectly to yourself.

If you want the axis to change dynamically depending on the data you can use yAxis.update method inside load event.

API references:

https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... xis#update

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

Best regards!
Dominik Chudy
Highcharts Developer
snakereptile
Posts: 7
Joined: Fri Apr 23, 2021 4:09 pm

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Can you please suggest how to guess the determine tickInterval value as the data is dynamic so I need to guess the correct tickInterval using some logic that works for all the data?

I tried different values but nothing will give the same scaling to both axes.

https://jsfiddle.net/goforgold/ztorpue3/2/
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Hi again!

For example, you can check the tickInterval property value of one axis before the chart gets loaded and then use this value to update the tickInterval property for another axis. Then regardless of the data, you can update your axes so they have the same scaling.

API references:
https://api.highcharts.com/class-refere ... xis#update

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

Best regards!
Dominik Chudy
Highcharts Developer
snakereptile
Posts: 7
Joined: Fri Apr 23, 2021 4:09 pm

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

This really doesn't solve the main issue of having the same scaling. How do you think we are making sure the scales are the same for both axis here?
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: One Y Axis is not shown properly in Highcharts Multi Y Axis

Hi again!

I thought that the same height of an axis and the same amount of ticks on the axis are something that you're looking for. You've also asked how to set tickInterval property dynamically depending on the data. Could you tell me precisely what doesn't work and point out the issue here? I'm not sure how I could help you.

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Stock”