chartjs / chartjs/Chart.js

Show multiple tooltips

Open
#11,192 2 comments 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

### Expected behavior

I'm trying to display multiple tooltips at once. I do not want to use [chartjs-plugin-datalabels](https://[chartjs-plugin-datalabels](https://chartjs-plugin-datalabels.netlify.app/).netlify.app/) because I need to have custom labels and this is not possible with chartjs-plugin-datalabels.

### Current behavior

I've came accross this issue, where someone is trying to do exactly this: [#7672 ](https://github.com/chartjs/Chart.js/issues/7672)
It's an old issue, and it's been closed by op without good answer, so I hope it's ok to open a new issue.

I tried to make a new plugin as explained to re-use the tooltip component, and render one Tooltip per data.
And I'm stuck. The tooltips are created, but nothing shows in graph. When I log the tooltips, x, y, width and height are NaN.

I forked the example here: https://codepen.io/ariu/pen/ZEMjGLJ?editors=0010

I'm using 3.9.1 in this codepen, but I also tryied 4.2.1 locally.

### Reproducible sample

https://codepen.io/ariu/pen/ZEMjGLJ?editors=0010

### Optional extra steps/info to reproduce

_No response_

### Possible solution

_No response_

### Context

I'm trying to reproduce exactly this:

![Frame 611](https://user-images.githubusercontent.com/9418756/226036944-ee7f6375-73e3-409a-b47b-f31ed68c4e8f.jpg)

### chart.js version

4.2.1

### Browser name and version

_No response_

### Link to your project

_No response_

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.