使用react-chartjs-2库自定义工具提示

npm install react-chartjs-2 chart.js

import { Line } from 'react-chartjs-2';
import 'chart.js/dist/Chart.css';

import React from 'react';

const ChartComponent = () => {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Sales',
        data: [12, 19, 3, 5, 2, 3, 9],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
      },
    ],
  };

  const options = {
    tooltips: {
      callbacks: {
        label: function (tooltipItem, data) {
          return `Sales: ${tooltipItem.yLabel}`;
        },
      },
    },
  };

  return <Line data={data} options={options} />;
};

export default ChartComponent;

import React from 'react';
import ChartComponent from './ChartComponent';

const App = () => {
  return (
    <div>
      <h1>Custom Tooltip Example</h1>
      <ChartComponent />
    </div>
  );
};

export default App;