chart.js 수직 도움선

chart.js의 interaction 항목을 intersect = false로 해주면

 

var chart_obj = new Chart(chart, { plugins: [{ afterDraw: chart => {   if (chart.tooltip?._active?.length)   {                 let x = chart.tooltip._active[0].element.x;               let yAxis = chart.scales.y;  let ctx = chart.ctx;  ctx.save();  ctx.beginPath();  ctx.moveTo(x, yAxis.top);  ctx.lineTo(x, yAxis.bottom);  ctx.lineWidth = 1;  ctx.strokeStyle = 'rgba(0, 0, 255, 0.4)';  ctx.stroke();  ctx.restore();   } }   }], // ... options: { animation : false, interaction: {             intersect: false,             mode: 'index',           }, spanGaps: true }

[링크 : https://stackoverflow.com/questions/68058199/chartjs-need-help-on-drawing-a-vertical-line-when-hovering-cursor]

 

options.interaction.mode nearest - 근접한 위치의 포인트를 툴팁으로 표시 (기본값) index - 여러개의 데이터가 있을 경우 모아서 툴팁으로 표시 optiones.interaction.intersect true - 선에 겹쳐야만 툴팁 표시 false - 해당되는 x 축에 대해서 툴팁 표시

[링크 : https://www.chartjs.org/docs/latest/configuration/interactions.html]