如何在 React Chart.js 中更改工具提示的位置和样式？

Question

我在我的 React 项目中使用折线图。我需要做的是自定义工具提示的样式并更改其位置。目前它在悬停时显示在图表的左下角（尽管它显示在其官方文档中的悬停点上）。 这是我的代码：

import React from "react";
import { CChart } from "@coreui/react-chartjs";
import "./App.css";
const StatsChart = () => {
  const data = {
    labels: ["January", "February", "March", "April", "May", "June"],
    given: [5000, 6000, 4500, 7000, 5500, 8000],
    raised: [4000, 5500, 3500, 6000, 5000, 7000]
  };

  const options = {
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        enabled: true
      }
    }
  };

  return (
    <div className="px-6 pt-6">
      <h1>My design:</h1>
      <CChart
        options={options}
        type="line"
        data={{
          labels: data.labels,
          datasets: [
            {
              label: "Given",
              backgroundColor: "rgba(220, 220, 220, 0.2)",
              borderColor: "#00ADE9",
              pointBackgroundColor: "#00ADE9",
              pointRadius: "0",
              pointBorderColor: "#fff",
              data: data.given.map((val) => val / 100)
            },
            {
              label: "Raised",
              backgroundColor: "rgba(151, 187, 205, 0.2)",
              borderColor: "#00c98b",
              pointBackgroundColor: "#00c98b",
              pointRadius: "0",
              pointBorderColor: "#fff",
              data: data.raised.map((val) => val / 100),
              borderDash: [5, 5]
            }
          ]
        }}
      />

      <h1>What I need:</h1>
      <img src="/line-chart.png" />
    </div>
  );
};

export default StatsChart;

这里是 codesandbox 示例的链接，以便更好地演示，还附上了所需图片：https://codesandbox.io/s/line-chart-idf789?file=/src/App.js:0- 1492