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 } |
options.interaction.mode nearest - 근접한 위치의 포인트를 툴팁으로 표시 (기본값) index - 여러개의 데이터가 있을 경우 모아서 툴팁으로 표시 optiones.interaction.intersect true - 선에 겹쳐야만 툴팁 표시 false - 해당되는 x 축에 대해서 툴팁 표시 |
[링크 : https://www.chartjs.org/docs/latest/configuration/interactions.html]
'Programming > web 관련' 카테고리의 다른 글
chatGPT님 가라사대 Server-Sent Events (SSE) (0) | 2023.03.15 |
---|---|
chart.js 특정 항목 보이지 않게 하기(가로줄 치기) (0) | 2023.03.10 |
JWT 로그인 예제 (0) | 2022.08.24 |
quirks mode (0) | 2022.08.08 |
grid와 flex (0) | 2022.07.04 |