Problem with tooltips, legend and zoom
- Dominant language
- JavaScript
- Stars
- 67.7k
- Forks
- 11.9k
- Avg merge
- 7h 39m
- Merged PRs (30d)
- 5
Description
Hello.
As an introduction, I don't known whether this issue is really a chartjs issue or a [react-chartjs-2](https://github.com/reactchartjs/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](https://github.com/user-attachments/files/18753912/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](https://github.com/user-attachments/files/18753912/timechartpoc.zip)
# Optional extra steps/info to reproduce
unzip [timechartpoc.zip](https://github.com/user-attachments/files/18753912/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](https://github.com/user-attachments/files/18753912/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](https://github.com/user-attachments/files/18753912/timechartpoc.zip)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.