chartjs-plugin-annotation
chartjs-plugin-annotation copied to clipboard
xAdjust scriptable context not working properly
I want adjust label position according to his width with this code:
{
drawTime: 'beforeDraw',
type: 'label',
color: 'rgba(0, 32, 51, 0.6)',
font: {
size: 10,
},
xValue: x,
xAdjust: ctx => {
console.log('el', ctx.element); // get element with width
console.log('el w', ctx.element.width); // undefined
// return ctx.element ? -(ctx.element.width/2) : 0
return -130;
},
yValue: y,
textAlign: 'right',
content: [trend.string, `R2: ${trend.r2}`],
enabled: true
};
But element.width sometime is undefined. How to resolve this?

This is because xAdjust is resolved in measureRect, which is done when resolving the element properties (including width).
Maybe textAlign or position options might get the result you are looking for?
https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/types/label.html#configuration
If I interpret your code correctly, you want to move the label on the left for the half of its width.
As @kurkle said, it's possible using:
position: {
x: 'end'
},

My goal is place label at end of chart line: right side of text to the line end. Width of label is dynamic, so i tried to calculate width of label and adjust its position.
@stockiNail position:end save me, thank you!