Chartjs-Display Chartjs tooltip values outside the canvas – multi line chart

by

0👍

✅

You can use Label Callback

document.getElementById('y-label').textContent = tooltipItem.yLabel;

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) {
      var activePoint = this.chart.tooltip._active[0],
        ctx = this.chart.ctx,
        x = activePoint.tooltipPosition().x,
        topY = this.chart.scales['y-axis-0'].top,
        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 chart = new Chart(ctx, {
  type: 'LineWithLine',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
    datasets: [{
      label: 'Statistics',
      data: [3, 1, 2, 5, 4, 7, 6],
      backgroundColor: 'rgba(0, 119, 204, 0.8)',
      borderColor: 'rgba(0, 119, 204, 0.3)',
      fill: false
    }]
  },
  options: {
    responsive: false,
    tooltips: {
      intersect: false,
      callbacks: {
        label: function(tooltipItem, data) {
          var label = data.datasets[tooltipItem.datasetIndex].label || '';

          if (label) {
            label += ': ';
          }
          label += Math.round(tooltipItem.yLabel * 100) / 100;
          
          document.getElementById('y-label').textContent = tooltipItem.yLabel;
          return label;
        }
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<h4 id="y-label"> </h4>
<canvas id="ctx" height="200"></canvas>

Leave a comment