JavaScript
var ann = ["4.35"];
var ann_labels = ["start"];
var annotations_array = ann.map(function(value, index) {
return {
type: 'line',
id: 'vline' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: value,
borderColor: 'green',
borderWidth: 1,
label: {
enabled: true,
position: "bottom",
content: ann_labels
}
}
});
var ann2 = ["4.29"];
var ann_labels2 = ["stop"];
var annotations_array2 = ann2.map(function(value, index) {
return {
type: 'line',
id: 'vline2' + index,
mode: 'vertical',
scaleID: 'x-axis-0',
value: value,
borderColor: 'green',
borderWidth: 1,
label: {
enabled: true,
position: "top",
content: ann_labels2
}
}
});
var ctx = document.getElementById('test').getContext('2d');
var test = new Chart(ctx, {
type: 'line',
data: {
labels: ["1.44","4.03","4.35","3.99","3.58","3.75","4.29","5.02","5.95","6.65"],
datasets: [{
data: ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2"],
yAxisID: 'A',
backgroundColor: [
'rgba(91, 192, 222, 0.1)',
],
borderColor: [
'rgba(0, 123, 255, 0.8)',
],
borderWidth: 1.3,
},
{
data: ["10", "11", "12","13","14","15","16","17",],
yAxisID: 'B',
backgroundColor: [
'rgba(255, 206, 86, 0.0)',
],
borderColor: [
'rgba(217, 83, 79, 0.6)',
],
borderWidth: 1.3,
}]
},
options: {
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: annotations_array
},
maintainAspectRatio: true,
scales: {
yAxes: [{
id: 'A',
ticks: {
...