Multiple y axes don't honor scaleLabel of inner axis

[andig]

With multiple y axes, the outer axis touches the inner axis's scale label if present. Either inner axis's scale label needs additional outside space if the axis not outermost as well or every non-inner axis needs additional space if previous inner axis has scale label.

[etimberg]

@andig I'm trying to find an issue that I know is open that is related to this. It specifically asked to be able to control this space.

You could try using #4382 and setting the new lineHeight setting to be greater than the font size which will give you some control over this.

[andig]

@etimberg #4382 doesn't seem to apply to axis labels.

lineHeight only seems to be taken into account for the chart title, not the axis label. On a similar note, multi-line text seems to be supported as well but doesn't seem to work for axis labels.

I was on the wrong track due to the linked PR. lineHeight works inside scaleLabel but cannot be used for this purpose. More specifically, lineHeight centers the line. It might be possible to use if it were possible to bottom align the label?

It still feels hacky though: chartjs already manages placement of cartesian axes and axis labels. Shouldn't it also take both into account?

Seems this is not inavlid:dupe?

[andig]

I think where this needs to go is here https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L334 plus where the label is actually drawn. In case of a vertical axis the min width is already size of scale label * 1.5. If not an "outer" axis this should become scale label * 2 and the label needs be drawn in different position.

Any hints how to find out what type of axis we are (and where to limit this to cartesian axes)?

[etimberg]

That's my error on the PR. For some reason I thought it was that one.

I think the best way to handle this would be to have a padding option nested under the scale label settings. If it's set as a Number, it is applied on both the left & right. If it's an object, there are 4 properties: left, right, top, and bottom. left and right would be used on vertical axes and top and bottom would be used on horizontal axes. Another alternative would be to use two properties start and end which are agnostic of the direction. @simonbrunel any thoughts?

Doing this automatically only for certain axes will be tricky. At the moment, the axes do not know about their siblings so something would likely need to be added at the chart level which complicates it.

The label is drawn in https://github.com/chartjs/Chart.js/blob/master/src/core/core.scale.js#L734-L760

[andig]

I think the best way to handle this would be to have a padding option nested under the scale label settings.

I don't think so. The scale is already handling correct positioning of the label, that is applying 0.5 lineHeight of padding between label and axis. Whats missing is nother 0.5 lineHeight padding to the next axis:

• either if any type of "inner" axis label is drawn and display==true
• or if an "outer" axis is drawn before the actual placement of the axis and ticks

[etimberg]

My concern with adding that logic is that it wouldn't solve requests for configurable size but more that it is much more involved to fix it. The axes don't know about the other axes and so that would mean adding something to the layout system to give them extra information.

I feel like that would be giving the layout system too much responsibility over other things that are not directly related to where all the boxes are in the chart. It would also mean that settings on other axes could affect the rendering of a different axis and that would lead to complicated tests

[andig]

I feel like that would be giving the layout system too much responsibility

I see where you're coming from.

I think the best way to handle this would be to have a padding option nested under the scale label settings.

That would work. Since I'm already creating the axis depending on selected series I could also conditionally apply the padding.