Nugg3n
Posts: 1
Joined: Thu May 19, 2022 9:19 am

How to do Multiple series with different Y-axes and ranges in one chart.

Hi,
So I want to make a chart dashboard for my home measurement where I can select which measurement to show in the chart.
Example:
Greenhouse temp 0-100°C
Livingroom temp 0-50°C
Windspeed 0-50 m/s
Pump speed 0-7500 rpm

All shown on a datetime X-axis. In total I have a bit over 100 measurements that I want to be able to select, but a maximum of maybe 10 at a time in the same chart. Each selected measurement would have it's own color line and Y-label to distinguish between them. I've modified and copied from a couple Highcharts examples and have a somewhat working solution to show you an example, but I'm having a hard time figuring out best ways to do alignment of Y-axis labels and overall if I'm having the right approach. Below is a link to my Codepen, as a start I would like to know how to "right align" the y-axis labels, I've tried "margin", "left", "Labels: x", but I don't like having to calculate pixel values for those from the length of the earlier label so I wonder if I'm doing this completely wrong.
I think my codepen should show quite well what I want to accomplish, currently you see 3 series that have their max value to the top of the chart, I want to show min/max of series as Y-axis labels, first series should be "outermost" and for each series I add I pretty much want Y-axis label to be newlined under the first series and they should all be right aligned. The black and orange lines in the chart can be moved to show the current value at the line of each series.

Please give me suggestions for improvements, especially on that Y-axis alignment, am I doing it wrong by making multiple Y-axes, should I maybe scale the series to match the max value to the top of the chart?

Sorry for the messy code, there is a lot of copy paste in there.
https://codepen.io/Nugg3n/pen/RwQRvbx?editors=0110
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How to do Multiple series with different Y-axes and ranges in one chart.

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

Using x and y properties to align yAxis.labels is totally fine and good approach. If you don't want to calculate pixels I can suggest you use the Highcharts SVGRenderer to generate the label instead of doing this via chart constructor options like in the demo below.

Demo: https://codepen.io/hubertkozik/pen/bGLRrJd
API Reference: https://api.highcharts.com/class-refere ... VGRenderer

Feel free to ask any further questions!
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”