Tick labels overlap when there is a gridline between them

[ParkerConn]

When tick labels are in their own chart, Highcharts effectively position ticks not to overlap. However, when tick labels come from separate charts side by side, tick labels do not follow the same rules and end up overlapping. What I'd like to know is if there's a way to 1) correct this so that they do not overlap through some setting, or 2) easily (I'd like to avoid overriding Highcharts tick positioning calculations) manually position ticks so they are positioned at the start and end of each chart and have padding so they are 10px (or something?) inside of the edge of the gridlines (but still outside the chart).

Here's a sketch of what I'd like to happen


Working demo with an example of the "bug" on the Y-axis: https://jsfiddle.net/zenzizen/ubgm5hnc/

This is a duplicate question: https://stackoverflow.com/questions/726 ... tween-them

[kamil.m]

Hi there,

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

The main problem with your chart is, that it contains separate yAxes, so its labels "don't know about each other". That's why they overlap.
You can disable the startOnTick and endOnTick options, but since you have a 0 from one axis and 15 from another in the same position, that solution might not satisfy you.

I came up with a simple, but effective solution to improve readability, yet it doesn't remove any labels. All you have to do is to set an x value for each yAxis label.

I'm not sure if I understood correctly what you want to achieve, but please take a look at the simplified demo below and tell me if that's what you were looking for.

DEMO: https://jsfiddle.net/BlackLabel/zpy9ovLe/
API References: https://api.highcharts.com/highcharts/yAxis.labels.x
https://api.highcharts.com/highcharts/yAxis.startOnTick
https://api.highcharts.com/highcharts/yAxis.endOnTick

Also, please try to avoid duplicating questions, since we work as a single team across all support platforms. Thanks!


Waiting for your reply,
Best regards!

[ParkerConn]

Hello!

One solution I had thought of was keeping startOnTick and endOnTick and padding them so that they ended up inside the away from each plotline. I'm fine if my points are not exactly on the plotline. Is there any way I can do that?

Is there no way I can make labels "know about each other"?

Ideally, there will always be a minimum of 3 meaningful labels for each panel using Highcharts to automatically generate them, and I do not require startOnTick and endOnTick.

While the solution proposed is definitely effective, there's still some ambiguity where tick labels are marking and a user may misread "0 15" as a single number if the numbers are larger (ie: 10 digits) and end up almost overlapping.

Thanks for the response!
Parker

[kamil.m]

Hi there!

I think I know what you mean. I have prepared a solution, where the first and last tick are translated a bit inside their own chart.

You can find that logic in lines 76-84.
DEMO: https://jsfiddle.net/BlackLabel/Ldwf1mtg/

Please let me know if that's what you were looking for,
Regards!

[ParkerConn]

Hey!

Thanks for creating another solution for me, but just translating points won't be enough -- if you hover over a few specific points in this pen they have a tooltip saying y=1 while lining up with a tick that says y=0. This is definitely a step on the right track to what I'd like, though.

I'm still unsure how to implement what I'd like, and any further help will be greatly appreciated.

Sorry for being so picky!

Thank you,
Parker

[kamil.m]

Hi there,

You can play around with min and maxPadding options on Axis, or set the max and min values, and hide the first and last tick.

Another way to space the labels a bit would be to change your logic, where you generate the Axis height and position. Right now you set it to 4x height/width of 25%, with a position of 0, 25, 50, 75. You can change this logic to leave a bit of space between each axis, so you will avoid the overlapping problem. (i.e change the height to 20-22%)

Best regards!