(x|y)Adjust scriptable context not working properly (cached and overrided)

[guillaume-ro-fr]

Hello 👋

I'm using the yAdjust property on label annotation for a box.
The box is larger than the complete chart, which adjusts to the Y axis.
Until the previous version of this plugin, I used yAdjust to correct the centering of the title (which when the "center" option is used, is centered with respect to the whole box and not the chart).

For that, I used this code:

yAdjust: (ctx: PartialEventContext) => (ctx.chart.chartArea.height - ctx.element.y) / 2,

With the double execution, I can just return 0 (or any value) when ctx.element.y is not ready, and return the correct value on the second execution:

if (typeof ctx.element.label?.y === 'undefined') {
    return 0; // Any value
}
return (ctx.chart.chartArea.height - ctx.element.label.y) / 2;

But now, this code doesn't work anymore, (I think) because of the merge request #725: yAdjust is evaluated twice but cached by the Proxy object:

• updateElements -> resolveElementProperties -> resolveLabelElementProperties -> calculateY
• updateElements -> updateSubElements -> resolveAnnotationOptions -> resolveObj

The problem is at line 64: resolver.label object contains the cached value of yAdjust (first call) and resolveAnnotationOptions method override element.elements[0].options.yAdjust (correct value with second call) with resolver.label.yAdjust value.

chartjs-plugin-annotation/src/elements.js

Lines 45 to 64 in 5d9042c

	const properties = element.resolveElementProperties(chart, resolver);
	properties.skip = toSkip(properties);
	if ('elements' in properties) {
	updateSubElements(element, properties, resolver, animations);
	// Remove the sub-element definitions from properties, so the actual elements
	// are not overwritten by their definitions
	delete properties.elements;
	}
	if (!defined(element.x)) {
	// If the element is newly created, assing the properties directly - to
	// make them readily awailable to any scriptable options. If we do not do this,
	// the properties retruned by `resolveElementProperties` are available only
	// after options resolution.
	Object.assign(element, properties);
	}
	properties.options = resolveAnnotationOptions(resolver);

Here is an example of my code (the red zone is the one with title uncentered):

https://codepen.io/guillaume-ro-fr/full/jOzXpMz

Don't hesitate to tell me if you need more information (I tried to return a Proxy instead of a raw number, but I failed...).
Maybe related to #726

[stockiNail]

@guillaume-ro-fr I'm still having a look if it's possible to remove the cache from proxy for some options.

When you are mentioning double execution, are you meaning after a chart update? AFA I remember, the behavior should be the same of previous version. But I'll have a look in deep.
It happened (and happens) for all options used for element initialization.
Can I evaluate another method to positioning the label in the center of the box, without using element options?

[stockiNail]

@guillaume-ro-fr in the meanwhile, I'm sharing with you the following yAdjust scriptable options which is working as you want since the first callback invocation. Let me know if it helps.

yAdjust: (ctx) => {
    const chart = ctx.chart;
    const options = chart.options.plugins.annotation.annotations[ctx.id];
    const maxPx = chart.scales.y.getPixelForValue(options.yMax);
    const base = chart.scales.y.getBasePixel();
    const font = Chart.helpers.toFont(options.label.font);
    return (base - maxPx - font.lineHeight) / 2;
},

[guillaume-ro-fr]

When you are mentioning double execution, are you meaning after a chart update?

In the same update event. I don't know if it is relevant to send you the backtrace (with Webstorm, and I don't know if it is possible 🤷‍♂️).

But THANK YOU very much for your solution, it works perfectly!!! 🎉
It's been 3 hours that I try to find a solution through different means...

[stockiNail]

But THANK YOU very much for your solution, it works perfectly!!! 🎉

Glad to know that it was helpful!