Align line annotation label and label annotation - chart.js

Question

I'm using chartjs-plugin-annotation version 2.1.1 to draw a line and a couple of labels on a chart.
With position: 'end' the label is aligned to the right.
const l1 = {
type: 'line',
label: {
display: true,
content: 'line',
position: 'end',
},
scaleID: 'y',
value: 62,
};
However, I am not able to draw a label annotation vertically-aligned (to the right) with the label of the line.
I have tried several
const l2 = {
type: 'label',
yValue: 0,
position: 'end',
// position { x: 'end' },
content: 'label'
}
Am I missing anything here?

Answer 1

The position of the label can be used to define where the label must be located, compared to the point defined by xValue and yValue option.
Probably the best way is to use line annotations, with the same config, apart for value.
const l2 = {
type: 'line',
label: {
display: true,
content: 'line',
position: 'end',
},
borderWidth: 0, // no line
scaleID: 'y',
value: 0
};
Or in you label annotation, you could set xValue and xAdjust as following:
const l2 = {
type: 'label',
yValue: 0,
xValue: (context) => context.chart.scales.x.max,
position: 'end',
content: 'label',
color: 'white',
xAdjust: (context) => -context.chart.options.plugins.annotation.annotations.l1.label.padding,
backgroundColor: 'black'
}