chartjs
Show multiple tooltips
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
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
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.
