Adding reading off lines in ChartJS - chart.js

Question

Is there a way of adding lines to assist reading off a articular value in ChartJS? An example is below. I would like to enter the number on the x axis and have ChartJS draw up and then across from where is meets the curve. An example shown below.
Is this possible?

Answer 1

Yes, it's possible
You can check my fiddle:
https://jsfiddle.net/iphong993/gru4Lad6/14/
var canvas = document.getElementById('chart');
new Chart(canvas, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'A',
yAxisID: 'A',
data: [100, 96, 84, 76, 69]
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}]
},
annotation: {
annotations: [
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "B",
xMin: "3",
xMax: "5",
yMin: 0.3,
yMax: 0.3,
borderColor: "red",
borderWidth: 1,
onClick: function(e) {
console.log("Box", e.type, this);
}
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "B",
xMin: "3",
xMax: "3",
yMin: 0,
yMax: 0.3,
borderColor: "red",
borderWidth: 1,
onClick: function(e) {
console.log("Box", e.type, this);
}
}
]
}
}
});