Проблема с двумя динамически обновляемыми вертикальными линиями на двух графиках в Chart.js

Question

У меня проблема с одновременным обновлением положения вертикальных линий на графиках с использованием Chart.js. Я хочу нарисовать вертикальную линию в определенной позиции x, когда указатель мыши находится на другом графике. Проблема заключается в том, что в текущем коде после наведения указателя мыши на один график во втором я построил линию, но график не обновляется, поэтому после повторного перемещения указателя появляется ряд других линий.

Я пытался включить опцию update() перед рисованием вертикальных линий, что фактически решает проблему, но весь график обновляется, и он очень медленный. Спасибо за помощь!

    Chart.defaults.LineWithLine = Chart.defaults.scatter

    Chart.controllers.LineWithLine = Chart.controllers.scatter.extend({
       draw: function(ease) {
          Chart.controllers.scatter.prototype.draw.call(this, ease);

          if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
             var activePoint = this.chart.tooltip._active[0],
                 ctx = this.chart.ctx,
                 x = activePoint.tooltipPosition().x,
                 topY = this.chart.scales['y-axis-1'].top,
                 bottomY = this.chart.scales['y-axis-1'].bottom;      

             // draw line
             ctx.save();
             ctx.beginPath();
             ctx.moveTo(x, topY);
             ctx.lineTo(x, bottomY);
             ctx.lineWidth = 1.5;
             ctx.strokeStyle = 'black';
             ctx.stroke();
             ctx.restore();

             // get x value 
             var xValue = map(x, this.chart.chartArea.left, this.chart.chartArea.right, chainage_min, chainage_max);

             if (this.chart == graph2) {
               try {
                // graph1.update()    // drastically slows down 
               } finally {
                //
               }
               var activePoint = graph2.tooltip._active[0],
                   ctx2 = graph1.ctx,
                   x = graph1.scales['x-axis-1'].getPixelForValue(xValue)
                   topY = graph1.scales['y-axis-1'].top,
                   bottomY = graph1.scales['y-axis-1'].bottom;

               // draw line
               ctx2.save();
               ctx2.beginPath();
               ctx2.moveTo(x, topY);
               ctx2.lineTo(x, bottomY);
               ctx2.lineWidth = 2.0;
               ctx2.strokeStyle = 'black';
               ctx2.stroke();
               ctx2.restore();

             } else if (this.chart == graph1) {
               try {
                //graph2.update()   // drastically slows down 
               } finally {
                //
               }
               var activePoint = graph1.tooltip._active[0],
                   ctx2 = graph2.ctx,
                   x = graph2.scales['x-axis-1'].getPixelForValue(xValue)
                   topY = graph2.scales['y-axis-1'].top,
                   bottomY = graph2.scales['y-axis-1'].bottom;

               // draw line
               ctx2.save();
               ctx2.beginPath();
               ctx2.moveTo(x, topY);
               ctx2.lineTo(x, bottomY);
               ctx2.lineWidth = 2.0;
               ctx2.strokeStyle = 'black';
               ctx2.stroke();
               ctx2.restore();
             }
          }
       }
})

function map(value, start1, stop1, start2, stop2) {
        return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1))
    }