Chart.js: Custom tooltip code for multiple charts per page (custom-line.html)

[TheMaaarc]

Expected & Current Behavior

Using the tooltip code from custom-line.html should give me a working example for one or more charts per page. That's currently not the case, it only works with one chart per page.

Possible Solution

See: https://github.com/TheMaaarc/Chart.js/commit/ec69a66b8410a7a6a8d5288871cdc7ddacb960e3
With that code the tooltip will be generated for each individual chart.

I can make a Pull request if you like the solution.

[etimberg]

I'm fine to look at a PR for this. @simonbrunel thoughts?

[simonbrunel]

I agree, however this._chart is a private member that should not leak in our examples.

[TheMaaarc]

@simonbrunel Okay, but it's already in use at line 52 this._chart.canvas.parentNode.appendChild(tooltipEl);.

[simonbrunel]

Everything starting by _ or $ should be considered private. I'm not sure what the best change in that case: promote tooltip._chart public (tooltip.chart) and deprecate tooltip._chart, or send chart as third argument of the custom callback?

If we make chart public for tooltip, we should do the same for elements:

• core.datasetController.js#L151
• core.datasetController.js#L160
• core.controller.js#L686

[etimberg]

I'm fine with making it public and also making it public for the other elements. It could be useful for some.

[yusufozturk]

I don't know how to test and verify this but I see that Custom Tooltips works super laggy. Especially when you have large datasets. Am I only one who sees that lag? Did you experience lag issues on custom tooltips?

If answer is yes, are there any performance improvement plans scheduled for custom tooltips? I had to disable custom tooltip due to lags.

Thanks.

[darrylferdinands]

How do I access the code for this? It says page not found when I try to open https://github.com/TheMaaarc/Chart.js/commit/ec69a66b8410a7a6a8d5288871cdc7ddacb960e3.
I want a solution for the same. Any directions?

[zivc]

@darrylferdinands in your tooltip;

Chart.defaults.global.tooltips.custom = function(tooltip) {
    console.log(this);
}

Play with that,

[danielpjr]

First implement a custom function according to the manual
https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips

After the following line:
_var tooltipEl = document.getElementById('chartjs-tooltip');_

Enter the following script:
_if (tooltipEl) { tooltipEl.parentNode.removeChild(tooltipEl); }_

In short ... I always destroy the tooltip before rebuilding it again.