Property '_active' does not exist on type 'TooltipModel<keyof ChartTypeRegistry>'

[micobarac]

With latest version 3.5.1, this code, which worked in 3.5.0, doesn't work anymore:

// Create vertical line on hover
export class LineWithLine extends LineController {
  draw() {
    // Call line controller method to draw all the points
    super.draw();

    // Get active tooltip
    const tooltip = this.chart['tooltip'];

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

      // Draw vertical line
      ctx.save();
      ctx.setLineDash([1, 1]);
      ctx.beginPath();
      ctx.moveTo(x, topY);
      ctx.lineTo(x, bottomY);
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#424242';
      ctx.stroke();
      ctx.restore();
    }
  }
}

How do I get the active tooltip?

[kurkle]

https://www.chartjs.org/docs/latest/api/classes/Chart.html#getactiveelements

[Ic3m4n34]

No matter what I do, I can't get this to work. Isn't there any tutorial out there on how to do this in 3.6?

[aboveyunhai]

@Ic3m4n34 It's late to the party but for the sake of demonstrating what the maintainer means by leaving the confusing typescript definition. This is something he means in terms of plugin.

    beforeDraw or afterDraw: (chart) => {
      const activeEle = chart.getActiveElements();
      if (activeEle.length <= 0) return;
      const { ctx, scales } = chart;
      const { x } = activeEle[0].element;
      const topY = scales.y.top;
      const bottomY = scales.y.bottom;
      // draw vertical line
      ctx.save();
      ctx.setLineDash([1, 1]);
      ctx.beginPath();
      ctx.moveTo(x, topY);
      ctx.lineTo(x, bottomY);
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#424242';
      ctx.stroke();
      ctx.restore();
    },

This lib probably has the one of most confusing typescript definitions due to the constant changing apis in different versions.
Many answers are just outdated and throw the users into some typescript definition guess games.