大家好，我正在尝试在图表上绘制垂直线，当我把鼠标悬停在某个点上时。我在网上看到了一些解决方案，但我没有弄清楚如何在我的代码上实现它，因为我在react js非常新
这是一个图表示例，其中包含我所指垂直线-vertical line chart
有人能帮我吗？

这是我的密码

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,
          }}
        />
      </>
    );
  }
}