Chartjs-Vertical line across multiple charts

by

1👍

✅

Inside your draw() function, you need to invoke draw() on the other chart. In order to avoid stale tooltips on the chart that looses focus, you must also make sure that its option tooltips.enabled is set to false.

charts.forEach(chart => {         
  chart.options.tooltips.enabled = this.chart == chart;
  if (this.chart != chart) {
    chart.draw();
  }

Please have a look at your amended code below.

var charts = [];

$(document).ready(function() {
  Chart.defaults.LineWithLine = Chart.defaults.line;
  Chart.controllers.LineWithLine = Chart.controllers.line.extend({
    draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);
      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
        charts.forEach(chart => {         
          chart.options.tooltips.enabled = this.chart == chart;
          if (this.chart != chart) {
            chart.draw();
          }
          var activePoint = this.chart.tooltip._active[0];
          var ctx = chart.ctx;
          var x = activePoint.tooltipPosition().x;
          var topY = this.chart.scales['y-axis-0'].top;
          var 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();
        })
      }
    }
  });

  var ctx1 = document.getElementById('myChart1').getContext('2d');
  var chart1 = new Chart(ctx1, {
    type: 'LineWithLine',
    data: {
      labels: ['Segment 1', 'Segment 2', 'Segment 3', 'Segment 4', 'Segment 5', 'Segment 6', 'Segment 7', 'Segment 8', 'Segment 9', 'Segment 10', 'Segment 11', 'Segment 12'],
      datasets: [{
        lineTension: 0,
        backgroundColor: "rgb(34,139,34)",
        borderColor: "rgb(34,139,34)",
        data: [14, 19, 20, 10, 6, 15, 8, 27, 25, 14, 36, 22],
        fill: false,
        pointRadius: 1.5,
        pointHoverRadius: 1,
        borderWidth: 1.5
      }],
      fill: false,
      pointRadius: 0,
      borderWidth: 1,
    },
    options: {
      maintainAspectRatio: false,
      hover: {
        mode: 'index',
        intersect: false,
      },
      title: {
        display: true,
        text: ''
      },
      legend: {
        display: false
      },
      tooltips: {
        mode: 'index',
        //enabled: false,
        intersect: false,
      },
    }
  });

  var ctx2 = document.getElementById('myChart2').getContext('2d');
  var chart = new Chart(ctx2, {
    type: 'LineWithLine',
    data: {
      labels: ['Segment 1', 'Segment 2', 'Segment 3', 'Segment 4', 'Segment 5', 'Segment 6', 'Segment 7', 'Segment 8', 'Segment 9', 'Segment 10', 'Segment 11', 'Segment 12'],
      datasets: [{
        lineTension: 0,
        backgroundColor: "rgb(34,139,34)",
        borderColor: "rgb(34,139,34)",
        data: [14, 11, 10, 20, 20, 15, 25, 15, 13, 14, 16, 8],
        fill: false,
        pointRadius: 1.5,
        pointHoverRadius: 1,
        borderWidth: 1.5
      }],
    },
    options: {
      maintainAspectRatio: false,
      title: {
        display: true,
        text: ''
      },
      legend: {
        display: false
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
    }

  });
  charts.push(chart)
  charts.push(chart1)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

<div>
  <canvas style="width: 500px" height="200px" id="myChart1"></canvas>
</div>
<div>
  <canvas style="width: 500px" height="200px" id="myChart2"></canvas>
</div>

Leave a comment