How can I add vertical line and label for each point in Chart.js?

Question

How can I add a vertical line for each point and make the selected data to appear with a 5.5k label like on the below screenshot?

Answer 1

You can draw your own lines directly on to the canvas using the Plugin Core API . It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw vertical lines up to the individual points from the dataset.

 const data = [65, 0, 80, 81, 56, 85, 40]; new Chart(document.getElementById("myChart"), { type: 'line', plugins: [{ afterDraw: chart => { var ctx = chart.chart.ctx; var xAxis = chart.scales['x-axis-0']; var yAxis = chart.scales['y-axis-0']; xAxis.ticks.forEach((value, index) => { var x = xAxis.getPixelForTick(index); var yTop = yAxis.getPixelForValue(data[index]); ctx.save(); ctx.strokeStyle = '#aaaaaa'; ctx.beginPath(); ctx.moveTo(x, yAxis.bottom); ctx.lineTo(x, yTop); ctx.stroke(); ctx.restore(); }); } }], data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", data: data, fill: false }] }, options: { legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false } }], xAxes: [{ gridLines: { display: false } }] } } });

 <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js'></script> <div style="width: 75%"> <canvas id="myChart" height="90"></canvas> </div>