React Chart.js disabling interactivity for a single dataset

I'm currently working on a web application where I'm using Chart.js to display a line chart with multiple datasets. The chart contains two datasets, with the first dataset containing the main data points and the second dataset containing 2 data points, one at the beginning and one at the end as a dotted line to fill the whole chart. The goal is to show tooltips only for the points in the first dataset and prevent tooltips from being activated for the points in the second dataset.

Issue: I want the tooltips to be activated only for the points in the first dataset, regardless of how close the cursor gets to points in the second dataset. When hovering over the chart, I expect tooltips to only appear for the points in the first dataset and not be triggered by points in the second dataset.

Could anyone please provide guidance on how to achieve this? Is there a way to modify the Chart.js tooltip behavior to prevent tooltips/any interactivity in the 2nd dataset? Any insights or code examples that could help resolve this issue would be greatly appreciated.

Thank you in advance for your help!

How 2nd dataset is activating:

How it should be when the cursor is on 2nd half of the graph:

I've tried various approaches to control tooltip activation, but the tooltips for the second dataset keep getting activated.

I suggest using chartjs-plugin-annotation to draw the second line, instead of a second dataset. Then you don't have to worry about interactivity at all.

If you want to stick with your current approach, then the tooltip plugin offers lots of options - the simplest might be to add a filter to exclude the second dataset.