[Front end] Chart.js Line Chart 가상선 (hover vertical line)

Chart.js 라이브러리를 사용하여 Line Chart에서 마우스오버시 가상의 선을 추가해 보자.

// hover vertical line
const originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw : function() {
    
    originalLineDraw.apply(this, arguments);

    if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
        
        const activePoint = this.chart.tooltip._active[0];
        const ctx = this.chart.ctx;
        const x = activePoint.tooltipPosition().x;
        const topY = this.chart.scales['y-axis-0'].top;
        const bottomY = this.chart.scales['y-axis-0'].bottom;
        
        // draw line
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x, topY);
        ctx.lineTo(x, bottomY);
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#07C';
        ctx.stroke();
        ctx.restore();
    }
  }
});