Show multiple tooltips

[arnriu]

Expected behavior

I'm trying to display multiple tooltips at once. I do not want to use chartjs-plugin-datalabels 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
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:

chart.js version

4.2.1

Browser name and version

No response

Link to your project

No response

[arnriu]

I solved this hacking into tooltips externalTooltipHandler. Here is how:

• I set the externalTooltipHandler to draw tooltips into canvas parent. But I do not override already existing tooltip. Instead, each tooltip has an ID and I only draw tooltip if the ID does not exists.
• I have a positioner function to compute desired x and y for my element. I have a radius function to compute which corner is not rounded to make my "arrow" shape.
• I listen to onChartReady event, and only when the animation end, I do tooltip.setActiveElements on each element I want tooltip displayed.
• the rest is some css.

https://codesandbox.io/s/chartjs-persistent-donut-datalabels-2xomxl

[jonnybear]

Just been researching this problem. It seems crazy to me that a plugin as old and established as chartjs hasn't considered this as core functionality that is useful for practically any chart or user. All the solutions presented above by the community are impressive but far too complicated to implement this fundamental. On this basis, I am now going to look at other charting solutions, which is disappointing.