React-ChartJS折线图异常显示所有数据点，而非仅hover时展示

我在React中创建基础折线图时遇到问题：ChartJS折线图应该默认仅在hover时显示数据点，但现在图表上显示了每一个数据点，后续会有数千个数据点，这种显示方式不可行。

我尝试过禁用tooltip，但没有效果：

options: {
    tooltips: {
         enabled: false
    }
}

我还直接复制了react-chartjs-2的官方示例代码并替换为自己的数据，问题仍然存在。以下是我的组件代码：

import { 
  CategoryScale, 
  LineElement, 
  LinearScale, 
  PointElement, 
  TimeScale,
  Legend,
  Title,
  Chart,
  Tooltip 
} from 'chart.js';
import './App.css';
import { Line } from 'react-chartjs-2';
import annotationPlugin from 'chartjs-plugin-annotation';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import 'chartjs-adapter-date-fns';
import { useEffect, useState } from 'react';


Chart.register(
  CategoryScale,
  LinearScale,
  PointElement, 
  LineElement,
  Title,
  annotationPlugin,
  ChartDataLabels,
  TimeScale,
  Legend,
  Tooltip
);




function App() {

  const [ temps, setTemps ] = useState([]);
  const [ times, setTimes ] = useState([]);

  useEffect(() => {
    async function fetchData () {
      const dates = [];
      const temps = [];
      const url = 'data/device1/input_device_1_a.json';
      const response = await fetch(url);
      const data = await response.json();
      for (let i = 0; i < data.length; i++) {
        dates.push(data[i].time);
        temps.push(data[i].tmp);
      }
      setTimes(dates);
      setTemps(temps);
  }
  
  fetchData();
  }, []);

  const chartData = {
    labels: times,
    datasets: [
      {
        label: 'Device 1',
        data: temps,
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
    ],
  }

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Line Chart',
      },
    },
  }

  return (
    <Line data={chartData} options={chartOptions} />
    );
}

export default App;

问题原因 #

你混淆了tooltip（悬浮提示框）和数据点本身的显示逻辑：

• ChartJS折线图默认会显示所有数据点，这是PointElement的默认行为，和tooltip无关
• 你注册的ChartDataLabels插件如果未禁用，会额外显示每个数据点的数值标签，进一步加重视觉问题
• 你之前的tooltip配置是旧版（v2）写法，ChartJS v3+的tooltip配置需要放在plugins对象下

解决方案 #

要实现「默认隐藏数据点，仅hover时显示」，需做以下调整：

1. 配置数据集的点显示规则：在dataset中设置默认隐藏点，hover时触发显示
2. 修正Tooltip配置：适配ChartJS v3+的新结构，确保hover时显示数据提示
3. 禁用不必要的DataLabels插件：如果不需要显示数据标签，直接移除插件注册或禁用它

修改后的完整代码 #

import { 
  CategoryScale, 
  LineElement, 
  LinearScale, 
  PointElement, 
  TimeScale,
  Legend,
  Title,
  Chart,
  Tooltip 
} from 'chart.js';
import './App.css';
import { Line } from 'react-chartjs-2';
import annotationPlugin from 'chartjs-plugin-annotation';
import 'chartjs-adapter-date-fns';
import { useEffect, useState } from 'react';


// 移除ChartDataLabels插件注册（如果不需要数据标签）
Chart.register(
  CategoryScale,
  LinearScale,
  PointElement, 
  LineElement,
  Title,
  annotationPlugin,
  TimeScale,
  Legend,
  Tooltip
);


function App() {

  const [ temps, setTemps ] = useState([]);
  const [ times, setTimes ] = useState([]);

  useEffect(() => {
    async function fetchData () {
      const dates = [];
      const temps = [];
      const url = 'data/device1/input_device_1_a.json';
      const response = await fetch(url);
      const data = await response.json();
      for (let i = 0; i < data.length; i++) {
        dates.push(data[i].time);
        temps.push(data[i].tmp);
      }
      setTimes(dates);
      setTemps(temps);
  }
  
  fetchData();
  }, []);

  const chartData = {
    labels: times,
    datasets: [
      {
        label: 'Device 1',
        data: temps,
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
        // 核心：配置点的显示规则
        pointRadius: 0, // 默认隐藏数据点
        pointHoverRadius: 5, // hover时显示的点大小
        pointHoverBackgroundColor: 'rgb(255, 99, 132)',
        pointHoverBorderColor: '#ffffff',
        pointHoverBorderWidth: 2
      },
    ],
  }

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Line Chart',
      },
      // 修正Tooltip配置（ChartJS v3+ 规范写法）
      tooltip: {
        enabled: true,
        mode: 'index',
        intersect: false
      },
      // 如果保留ChartDataLabels插件，需添加以下配置禁用标签
      // datalabels: {
      //   display: false
      // }
    },
  }

  return (
    <Line data={chartData} options={chartOptions} />
    );
}

export default App;

内容的提问来源于stack exchange，提问作者Corey