React 我想将文本添加到react-chart-2工具提示中

我正在使用react-chart-2。
将鼠标悬停在图表上可查看工具提示。我想在数字右侧显示 %，例如 30%。
如何将 % 字符添加到工具提示中？另外，如何将 left 值设置为最小值 0 和最大值 100？

code https://codesandbox.io/s/suspicious-frost-19qv9?file=/src/App.tsx:0-917

import "./styles.css";
import { Line } from "react-chartjs-2";

const App = () => {
  const data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "test",
        data: [30, 10, 10, 40, 70, 10, 30],
        fill: false,
        backgroundColor: "#F7C520",
        borderColor: "#F7C520",
        hoverBackgroundColor: "#E6B71E",
        hoverBorderColor: "#E6B71E"
      }
    ]
  };

  const options = {
    responsive: true,
    tooltips: {
      mode: "label"
    },
    elements: {
      line: {
        fill: false
      }
    },
    scales: {
      xAxes: [
        {
          display: true,
          gridLines: {
            display: true
          }
        }
      ]
    }
  };

  return (
    <div className="App">
      <h2>Mixed data Example</h2>
      <Line data={data} options={options} />
    </div>
  );
};

export default App;

ChartJS 提供了一个回调，允许您自定义工具提示的内容 https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback。 ChartJS还有很多其他工具提示回调 https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks这对于自定义图表的外观和感觉非常方便，而react-chartjs-2作为ChartJS的包装器，允许相同的功能。

Add a plugins包含工具提示配置的对象如下：

    plugins: {
      tooltip: {
        callbacks: {
          label: (context: any) => {
            let label = "";
            if (context.parsed.y) {
              label = context.parsed.y + "%"
            }
            return label;
          }
        }
      }
    }

导致：

至于你的其他问题，你似乎已经在沙箱中找到了答案。设置min and max将轴上的值调整为所需值。