Highcharts official support forum

Hello,

I have a scenario where I have two yAxis plotLines on top of each other. They each have a separate meaning and label. I want the labels to always be on the left side. Unfortunately that way the labels are on top of each other and hence not readable. Is there a way to have highcharts notice this and place the labels on top of or next to each other?

Thank you in advance from Germany!

https://jsfiddle.net/f9nbe6zh/

Hello Richeeyyy,

Thanks for contacting us with your question.

Highcharts doesn't have any sort of plot line labels collision detection. You need to position labels on your own. Having said that I can see two options here.
- first simple one is to adjust label offset: https://jsfiddle.net/BlackLabel/98wt6ufr/
- second option is slightly more complicated and the general idea is to check dimensions of label A and based on them adjust position of label B: https://jsfiddle.net/BlackLabel/3xy1jkt0/ This option can be further improved, now it only moves label B by width of label A.

Let me know if you have any further questions!
Regards!

Hello and thank you for the answer! It solved my problem halfway!

To identify the overlapping plot lines, I am comparing the y-values of the plot lines (overlapping means equal y-values).

However, overlapping of labels also occurs if the plot lines are very close to each other but not equal. That means I have to find the maximum y-distance between plot lines so that their labels still overlap.

In order to do that, I could use tickInterval and tickPixelInterval. tickPixelInterval defaults to 72. In my application, tickInterval is set to null to have the chart compute this value autonomously. Is there a way to readout tickInterval after it was autonomously computed?

Greetings!

Hello Richeeyyy,

Computed tickInterval value is available on axis object.
Demo: https://jsfiddle.net/BlackLabel/cLwtv16b/

Let me know if that was what you were looking for!
Regards!