Problem with tooltips, legend and zoom

[candelrg]

Hello.
As an introduction, I don't known whether this issue is really a chartjs issue or a react-chartjs-2 issue, so don't hesitate to tell me whether I reported it in the wrong place.

Expected behavior

The main issue:

I need to customize the content of my tooltip.
For this, I use method to configure what to display and a filter to choose accepted datasets in tooltip.
(you can check src/chart/config/chartjs_configurator.ts)
I expect to then have tooltip containing:

Date
[current region fill color] MainData: value
current region name

In short, a tooltip like this :

(image made with gimp)

Less important issue, but still bothering:

I activated the zoom plugin for the chart.
I expect to always have a tooltip displayed when moving cursor over chart, even when chart is zoomed.

Maybe I should open 2 separate issue tickets, but you can check all this with the code I gave in timechartpoc.zip.

Current behavior

The main issue:

• If, in my chart, I don't register Legend, the filter will never be called, which is a problem.
• If, instead, I do register Legend, then I get a "name.startsWith is not a function" error when receiving data
  

Less important issue, but still bothering:

• When the chart is not zoomed, the tooltip is easily displayed.
• When there is a zoom, it becomes very hard to have a tooltip displayed with cursor: either this tooltip does not appear, or it does appear but then disappears almost immediately.

Reproducible sample

timechartpoc.zip

Optional extra steps/info to reproduce

unzip timechartpoc.zip
npm install
npm start
(with node v20.16.0)

Possible solution

The main issue:

Concerning the "name.startsWith is not a function", I think that instead of (name) => !name.startsWith('on') (and similar codes), you should use something like (name) => name && (typeof name === 'string') && !name.startsWith('on')

Less important issue, but still bothering:

For this one, no real idea. Maybe a problem in the coordinates resolution.

Context

I have a project in which I use a LineChart (react) that will display a line with colored regions.
To obtain this, I have a main dataset containing all points with dark line color and transparent fill color, and 1 dataset per region containing a subpart (segment) of main data, with transparent line color and desired fill color, the last point of a region being the first point of the next one (to ensure continuity in fill colors).
In this line chart, I don't need legends (tooltip on cursor is enough).

This project is compiled with node v20.16.0.
I made a simplified version of this project, which I named "timechartpoc", the code of which you can find in this zip file:
timechartpoc.zip

I try to display the essential information in tooltip.

chart.js version

4.4.7

Browser name and version

Firefox 135.0 and Chromium 121.0.6120.0

Link to your project

timechartpoc.zip