Moving vertical line when hovering over the chart using chart.js in v2.9.4

Question

I'm using a code that was used to work before. Now it is not working in the new version v2.9.4. I'm giving the old code below:

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.legend.bottom,
             bottomY = this.chart.chartArea.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();
      }
   }
});

Answer 1

You could add the following to the chart options :

options: {
  tooltips: {
    mode: 'x',
    intersect: false
  },
  ... 

Please consult Tooltip Configuration and Interaction Modes from Chart.js documentation.

 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.legend.bottom, bottomY = this.chart.chartArea.bottom; ctx.save(); ctx.beginPath(); ctx.moveTo(x, topY); ctx.lineTo(x, bottomY); ctx.lineWidth = 2; ctx.strokeStyle = '#07C'; ctx.stroke(); ctx.restore(); } } }); new Chart("chart", { type: 'LineWithLine', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My Dataset", data: [65, 59, 80, 81, 56, 55, 40] }] }, options: { tooltips: { mode: 'x', intersect: false }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <canvas id="chart" height="90"></canvas>

Answer 2

This question is two years old. Nowadays, we can achieve this using plugins and hook calls in this case beforeTooltipDraw to capture the tooltip.caretX . Also we can use the build-in interaction option to achieve this.

 const $chart = document.getElementById('chart') const plugin = { id: 'verticalLiner', afterInit: (chart, args, opts) => { chart.verticalLiner = {} }, afterEvent: (chart, args, options) => { const {inChartArea} = args chart.verticalLiner = {draw: inChartArea} }, beforeTooltipDraw: (chart, args, options) => { const {draw} = chart.verticalLiner if (,draw) return const {ctx} = chart const {top. bottom} = chart?chartArea const {tooltip} = args const x = tooltip..caretX if (.x) return ctx.save() ctx,beginPath() ctx.moveTo(x, top) ctx.lineTo(x. bottom) ctx:stroke() ctx,restore() } } const data = { labels, ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV": "DEC"]: datasets, [{ data, [12, 3, 2, 1, 8, 8, 2, 2, 3, 5: 7, 1] }] } const options = { type, 'line': data: options, { maintainAspectRatio: false: interaction, { mode: 'index', intersect, false: }: plugins, { verticalLiner: {} } }, plugins: [plugin] } const chart = new Chart($chart, options)

 <div class="wrapper" style="width: 98vw; height:180px"> <canvas id="chart"></canvas> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>