2👍
✅
Here is the correct usage of annotation plugin:
var ann = [1];
var ann_labels = ["your data"];
var annotations_array = ann.map(function(value, index) {
return {
type: 'line',
id: 'vline' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: value,
borderColor: 'red',
borderWidth: 2,
label: {
enabled: true,
position: "center",
content: ann_labels[index]
}
}
});
console.log(annotations_array)
var data = [{
x: 0,
y: 5
}, {
x: 1,
y: 6
}, {
x: 2,
y: 8
}, {
x: 3,
y: 9
}];
var chart = new Chart(document.getElementById("ctx"), {
type: 'scatter',
data: {
datasets: [{
label: "Benign_Cross_Entropy",
data: data,
borderWidth: 2,
showLine: true,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
//borderCapStyle: 'butt',
//borderJoinStyle: 'miter'
// pointBorderColor: "rgba(75,192,192,1)",
// pointBackgroundColor: "#fff"
}]
},
options: {
responsive: true,
//elements: { point: { radius: 0 } },
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: annotations_array,
},
scales: {
xAxes: [{
type: 'linear',
id: 'x-axis-0',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script>
<canvas id="ctx"></canvas>
Here is a jsfiddle as well: https://jsfiddle.net/beaver71/e3b1Ldms/
Source:stackexchange.com