Legend centering and label click zones broken with non-standard font

[bolau]

Expected behavior

Even with a non-standard font, the legend should be centered properly, and clicking on a label should disable the correct dataset.

Current behavior

The legend seems to be positioned based on the wrong font width. Clicking on the right half of the second last label hides the last dataset instead of the second last. After that, the legend is re-centered, now correctly, and the click regions are correct.

Reproducible sample

https://www.borislau.de/chartjs_bug.html

Optional extra steps/info to reproduce

• use a font that's wider than the regular by using Chart.defaults.font.family = 'Permanent Marker';
• use 100% width/height
• make many and wide labels, so that the error gets obvious

Possible solution

Didn't find a workaround.
Even waiting for document.fonts.ready doesn't help:

window.onload = function() {
    document.fonts.ready.then(function() {
        var ctx = document.getElementById('chartcanvas').getContext('2d');
        window.chart = new Chart(ctx, config);
    });
};

Context

I want to make a beautiful chart with the Bitstream Vera font, and I want to be able to hide and show datasets by clicking on the entries in the legend.

chart.js version

v4.3.0

Browser name and version

Firefox, Chrome, Safari

Link to your project

https://www.borislau.de/chartjs_bug.html

[bolau]

Note, that this applies to axis label positioning as well (see the y labels in my example).

Note that it doesn't make a difference, if I load the font via CSS font-face or JavaScript's FontFace API as suggested here: https://www.chartjs.org/docs/latest/general/fonts.html

Am I missing something, or is this an actual bug?
If you know a workaround, I'd be happy to learn about it!

[etimberg]

In terms of how we actually do the measuring, we're relying on measureText from the canvas. I don't think we ever just assume that the width is a constant per character, so I'm not sure where this is coming from.

If you hadn't already tried to wait for the fonts to be ready, that would have been my first suggestion. The code for us to investigate will be

Chart.js/src/helpers/helpers.canvas.ts

Lines 39 to 55 in f2cfb93

	export function _measureText(
	ctx: CanvasRenderingContext2D,
	data: Record<string, number>,
	gc: string[],
	longest: number,
	string: string
	) {
	let textWidth = data[string];
	if (!textWidth) {
	textWidth = data[string] = ctx.measureText(string).width;
	gc.push(string);
	}
	if (textWidth > longest) {
	longest = textWidth;
	}
	return longest;
	}

.

What's curious is that when the Y axis maximum is < 5000, the labels are fine but they're wrong otherwise. It almost seems like in some cases we're sending the wrong labels to be measured

[bolau]

Thanks for the feedback! That helped me to further hunt down the issue.

At least in Firefox and Safari (but not in Chrome), the problem disappears if I assign the font to the canvas element via CSS, instead of just doing Chart.defaults.font.family = 'Vera';:
https://www.borislau.de/chartjs_bug_fixed.html

It seems that the measuring uses the default font. ctx.font = '12px Vera' also doesn't help, by the way.

[stockiNail]

Forgive me if I'm jumping in the thread (I was curious). I had a quick look to the code.

@etimberg the _measureText function of the helpers is not used in the legend plugin where measureText of the context 2d is always used directly.

I have anyway found another weird behavior using the code of @bolau.
Locally and reducing the size (width and height), the legend items are not all showed and the hit boxes are of course wrong.
It could be related to root cause of this issue.

It seems something related to the max width acceptable on the legend, It seems (but not sure yet, I'm still having a look), that there is a different control between update (to calculate the hitboxes and location) and draw phases. It could be also related to PR #11352 which solved for vertical legend.

[stockiNail]

@bolau @etimberg after a check, the code sound being correct.

But I see that the font is not loaded when chart is invoked.
Having a look to MDN, https://developer.mozilla.org/en-US/docs/Web/API/FontFace/load, @bolau I think you could use load method (and its Promise) of FontFace instead of document.fonts.ready promise:

const fontface = new FontFace("Vera", "url(Vera.ttf)")
document.fonts.add(fontface);

const config = {
    type: 'line',
    },
	.....		
}

window.onload = function() {
  fontface.load().then(function() {
    Chart.defaults.font.family = 'Vera';
    var ctx = document.getElementById('chartcanvas').getContext('2d');
     window.chart = new Chart(ctx, config);
  });
};

I have tested locally and sounds working.

[bolau]

@stockiNail very nice, indeed! This works! Thank you so much for your help!

Should we close this issue?

[stockiNail]

Thank you so much for your help!

UR welcome

Should we close this issue?

Yes, I think so.

[etimberg]

Thanks @stockiNail, good find on the font loading