chartjs / chartjs/Chart.js

Problem with tooltips, legend and zoom

Open
#12,030 1 comment 0 reactions 0 assignees View on GitHub
type: bug
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](https://github.com/user-attachments/assets/938660d1-6a27-46c2-8fd7-2322470ba77f)
_(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
![Image](https://github.com/user-attachments/assets/eae6b2d4-9cf7-47f0-8bbe-c1d938b1b263)

## 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).
![Image](https://github.com/user-attachments/assets/243d78e3-90dd-4933-80f9-ee3b10f21901)
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.