1👍
✅
Since you’re using an old version of chartjs-plugin-annotation, you need to consult the related documentation for Line Annotations here.
This will lead you to the following solution
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: per10,
borderColor: '#db7093',
borderWidth: 2,
label: {
enabled: true,
xAdjust: -22,
content: '10%',
backgroundColor: '#ffffff',
fontSize: 14,
fontColor: '#db7093',
position: 'top'
}
},
...
Please take a look at your amended JSFiddle and see how it works.
1👍
To define the label in line annotation, for version 0.55, you must use enabled
and content
, and not display
and value
.
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: per10,
borderColor: 'red',
borderWidth: 2,
label: {
enabled: true, // <-- not display
content: "10%", // <-- not value
position: "top"
}
},
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: per50,
borderColor: '#98fb98',
borderWidth: 2,
label: {
enabled: true, // <-- not display
content: "50%", // <-- not value
position: "top"
}
},
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: per90,
borderColor: '#add8e6',
borderWidth: 2,
label: {
enabled: true, // <-- not display
content: "90%", // <-- not value
position: "top"
}
},
]
},
Source:stackexchange.com