How to make vertical line when hovering cursor (Chart js)

Question

Hay everyone, I am trying to make vertical line drawing on chart when I hover my mouse on some dot. I saw some solutions online but I didn't figer it out how to implement it on my code because I am very new at react js

this is an example of chart that has that vertical line that I am referring to - vertical line chart

Can someone help me do this?

This is my code:

import React, { Component } from "react";
import "../App.css";
import { Line } from "react-chartjs-2";
import { Chart as ChartJS, Filler } from "chart.js/auto";

export default class Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mapRecv: props.data[0],
      type: props.data[1],
    };
  }

  render() {
    return (
      <>
        <Line
          className="chart"
          data={{
            labels: this.state.mapRecv["stockChartXValues"],
            datasets: [
              {
                label: `${this.state.type} Price USD`,
                data: this.state.mapRecv["stockChartYValues"],
                fill: true,
                backgroundColor: ["rgba(75, 192, 192, 0.2)"],
                borderColor: "rgba(75, 192, 192, 1)",
                borderWidth: 2,
              },
            ],
          }}
          plugins={{
            afterDraw: (chart) => {
              if (chart.tooltip?._active?.length) {
                let x = chart.tooltip._active[0].element.x;
                let yAxis = chart.scales.y;
                let ctx = chart.ctx;
                ctx.save();
                ctx.beginPath();
                ctx.setLineDash([5, 5]);
                ctx.moveTo(x, yAxis.top);
                ctx.lineTo(x, yAxis.bottom);
                ctx.lineWidth = 1;
                ctx.strokeStyle = "rgba(0, 0, 255, 0.4)";
                ctx.stroke();
                ctx.restore();
              }
            },
          }}
          options={{
            scales: {
              x: {
                grid: {
                  drawOnChartArea: false,
                },
              },
            },
            position: "right",
            showLine: true,
            elements: {
              point: {
                radius: 0,
              },
            },
            plugins: {
              legend: {
                display: false,
              },
            },
            interaction: {
              intersect: false,
              mode: "index",
            },
            spanGaps: true,
          }}
        />
      </>
    );
  }
}

Answer 1

As LeeLenalee already commented, a pure Chart.js solution is shown in this answer.

With react-chartjs-2, plugins needs to be defined as a separate option, same as data and options. In your case, this could look as follows.

render() {
  return (
    <Line
      data = {
        ...
      }
      plugins = {
        [{
          afterDraw: chart => {
            if (chart.tooltip?._active?.length) {
              let x = chart.tooltip._active[0].element.x;
              let yAxis = chart.scales.y;
              let ctx = chart.ctx;
              ctx.save();
              ctx.beginPath();
              ctx.setLineDash([5, 5]);
              ctx.moveTo(x, yAxis.top);
              ctx.lineTo(x, yAxis.bottom);
              ctx.lineWidth = 1;
              ctx.strokeStyle = 'rgba(0, 0, 255, 0.4)';
              ctx.stroke();
              ctx.restore(); 
            }
          }
        }]
      }
      options = {
        ...
      }
    /> 
  );
}