react-chartjs - line chart displaying all datapoints, not just on hover

I'm trying to create a basic line chart in React. As I understand it, by default Chartjs will display the datapoint on hover but for some reason every single data point is showing on the chart, which is not ideal since there are going to be thousands of them. chart examle

As far as I can tell, the default behavior of a line chart in Chartjs is to display data on hover. I've tried disabling tooltips like so:

options: {
tooltips: {
enabled: false
}
}

I also just tried straight up copy pasting the example code from react-chartjs and plugging in my own data, but I'm still getting all data points showing. I'm at bit of a loss as to what to try so thanks in advance. Here's my component:

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;

In Chart.js's terminology, there are maybe three different concepts that are getting involved here:

• Tooltips, which by default display a box with a label when you hover over or near a point
• Hover (e.g., line hover), which are commonly used with tooltips to change the styling of a point when it's hovered
• The datalabels plugin, which by default labels every single point (whether or not it's hovered)

If you don't specifically need datalabels, it's simplest to not globally register it. You can still pass it as a plugin to specific charts that need it.

If you want to use datalabels only for some points or some datasets, then you'll have to check the datalabels documentation - it has quite a few options, including (for full flexibility) scriptable options that can apply whatever logic you want via JavaScript callbacks.