Matrix chart y axis labels (tick label) getting cut off and overlaps scale title

[syeanot]

Y-axis tick labels are getting cut off much sooner when compared to other chartjs charts. For example, with a bar chart, I can have much longer labels before they start overlapping scale title or overflow the canvas:

A matrix chart containing the same data (labels) on the y-axis will overflow:

I have noticed while resizing, the bar chart will hold the y-axis in place while the rest of the chart resizes until a certain point. However, this is not the case for the matrix chart, resizing moves the y-axis no matter the available space. If I apply padding to the left of the chart it will allow me to see more of the labels but it also pushes the scale label right. This is probably chartjs behavior, and applying negative padding to the scale label will negate all the padding):

Is there something I am missing?

[kurkle]

What versions (Chart.js and chartjs-chart-matrix) are you using?

In the latest v3 beta, scales can take up to 50% of the chart area, but before that there was no limitation at all.

Also, can you create an interactive example of this behavior?

[syeanot]

I am using chartjs v2.9.4 and implementation from chartjs-chart-matrix v0.1.3. Here is a screen recording of the behavior:
https://drive.google.com/file/d/1MBWa-Bw9kNi_vmEqNIyp146biP_8OoAb/view?usp=sharing

In the latest v3 beta, scales can take up to 50% of the chart area, but before that there was no limitation at all.

What exactly would need to change in chartjs-chart-matrix v0.1.3 to modify that behavior? And by interactive example, do you mean maybe something on jsfiddle or the like or will the screen recording suffice? My implementation does not deviate in any significant way from your samples.

[kurkle]

What exactly would need to change in chartjs-chart-matrix v0.1.3 to modify that behavior? And by interactive example, do you mean maybe something on jsfiddle or the like or will the screen recording suffice? My implementation does not deviate in any significant way from your samples.

Yes, I mean jsfiddle or the like, that reproduces the issue. Screen recording does not suffice, because there is nothing to debug in that :)

There should be nothing in chartjs-chart-matrix (any version), that affects hot the scales are laid out, so that's why I need a reproduce that I can debug.

[kurkle]

I'm guessing its the category scale that fails.

[syeanot]

Yes, the scales are category (and the labels are provided at the axes level).

[syeanot]

I am still updating this fiddle (to get the cells to be the size) but this is what I have so far: https://jsfiddle.net/syeanot/k92vujhd/45/ This is how I have implemented it.

[kurkle]

Can't reproduce it like in the video yet (modified a bit):
https://jsfiddle.net/ewdvny0a/1/

Maybe you need to add the other chart too?

[syeanot]

I have added the bar chart, they both seem to be behaving very similarly: https://jsfiddle.net/syeanot/k92vujhd/143/

[kurkle]

So, the thing causing the issue is not in the fiddle (yet). Do you have any paddings set to the charts? Any negative values?

[syeanot]

No paddings or negative values on the charts, and the css on the wrappers are the same for both charts. Looking to see if there any other notable differences.

[syeanot]

I can't seem to find any odd external factors in my code base that could be affecting the matrix and not the bar chart (I will keep looking). However, you mentioned, "In the latest v3 beta, scales can take up to 50%". Do you think a similar limitation on the version I am using might have an effect? I am not a chartjs pro :) so not sure where to start there.

[kurkle]

Looks like 2.9.4 at least tries to keep 50% of the width for the chart (that's when the labels start cutting):

[kurkle]

This might be related to: chartjs/Chart.js#8483
If you have hidden scales, or legend or title that is positioned left or right, it reduced the given space for visible ones.
The core fix has not been released yet.

[syeanot]

Interesting, I will have a look at that issue and see if the solution resolves what I have here.

[syeanot]

The fix added for chartjs/Chart.js#8483 does in fact resolve the issue I have outlined here. Any idea when the fix will be released?

[kurkle]

It's been released in 3.0.0-beta.12

[syeanot]

I see. Is there no chance we can get the fix as a version 2 patch? 2.9.5 maybe?

[kurkle]

I see. Is there no chance we can get the fix as a version 2 patch? 2.9.5 maybe?

I'm not personally investing time in 2.9, but I'm not against that either.