Quiero dibujar una línea vertical al pasar el mouse sobre ChartJS3 (3.6 para ser precisos). Esto solía funcionar en ChartJS2:

 // Create vertical line on hover export class LineWithLine extends LineController { draw() { // Call line controller method to draw all the points super.draw(); // Get active tooltip const tooltip = this.chart['tooltip']; if (tooltip._active && tooltip._active.length) { var ctx = this.chart.ctx, x = tooltip._active[0].element.x, topY = this.chart.scales['y'].top, bottomY = this.chart.scales['y'].bottom; // Draw vertical line ctx.save(); ctx.setLineDash([1, 1]); ctx.beginPath(); ctx.moveTo(x, topY); ctx.lineTo(x, bottomY); ctx.lineWidth = 1; ctx.strokeStyle = '#424242'; ctx.stroke(); ctx.restore(); } } }

Pero no funciona con 3.6. ¿Alguien ha descubierto esto? No puedo encontrar nada sobre esto en su documentación.

EDITAR: Probé este enfoque también. EDIT2: ¡Y funciona!

 plugins: [{ afterDraw: (chart) => { if (chart.tooltip?._active?.length) { const { x } = chart.tooltip._active[0].element; const yAxis = chart.scales.y; const { ctx } = chart; 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(); } }, }],