[BUG] labelOffset not working for vertical axis

[dekuenstle]

Expected Behavior

In the docs labelOffset is described as:

Distance in pixels to offset the label from the centre point of the tick (in the y direction for the x axis, and the x direction for the y axis).
Note: this can cause labels at the edges to be cropped by the edge of the canvas

From the docs, I expect the label to move left/right if I set a non-zero value for labelOffset of a vertical axis, and up-down for a horizontal axis.

Just from the variable name I would expect opposite behaviour:

in the y direction (up/down) for the y axis, and the x direction (right/left) for the x axis

Current Behavior

Label is moving left/right on horizontal axis and not at all on a vertical axis.

Possible Solution

1. Adjust documentation, that it's the offset in axis direction.
2. Add optionTicks.labelOffset to labelY in core.scale.js's draw-method.

Steps to Reproduce (for bugs)

See http://codepen.io/anon/pen/JEmaBY

Context

We tried to to accomplish labels between the tick lines in a bubble chart.
The labels of the vertical axis were rotated by 90° (text parallel to y-axis)

Environment

• Chart.js version: v2.5.0
• Browser name and version: Chromium 56

[etimberg]

That looks like some kind of bug, but I'm not sure which is wrong: the docs or the code.

[Jareechang]

is there a use case for the labelOffset for both X and Y ?

I feel if you "offset" labels on the data, it disrupts the integrity of the dataset.

Unless the axis, and the data offsets with the label.

May not be important for this particular jsfiddle but for numerical charts (x,y) if you want to look up data. It becomes confusing for the user.

Just something to think about.

[dekuenstle]

is there a use case for the labelOffset for both X and Y ?

It's necessary if you want to have the labels parallel to the y axis, but center the labels at the ticks.
At least if we agree, that labelOffset should applied along the axis ;)

I feel if you "offset" labels on the data, it disrupts the integrity of the dataset.

For catergorial data (or range in general) on one axis centering labels between ticks makes sense without hurting integrity. Maybe makes more sense for a bubble-like chart. As far as i know offsetGridLines is not available for bubble charts or line charts.

[Jareechang]

@dekuenstle ah great points. I guess for categorial data, there is some room some adjustments (like in your example).

Do you mind including a link to your bubble example ? It would really help for identifying a good solution for this issue.

[dekuenstle]

@Jareechang here's a simplified example how to a abuse bubble chart for categorial data: http://codepen.io/anon/pen/bgJPMx

Still the issue isn't just about my usecase, but about the inconsistency between docu, x-axis behaviour and y-axis non-behaviour.

[MathiasHC]

@dekuenstle You can acquire the same result as labelOffset with some padding, tickMarkLength and ticks.mirror = true.

• It's most diffidently not the same, but it gets you a little bit of the way, until the 2.7.0 release - which hopefully fixes a couple of things 💪

And yes, I agree with you on everything you have said - could be nice with the (x,y) offset options.

[dekuenstle]

@MathiasHC Thank you! We currently worked around the issue with similar configs and some whitespace ;)
It works for now, but i really appreciate the propper fix for 2.7. 👍