onComplete for first finished rendering of a chart

[methnen]

Feature Proposal

It's sometimes really useful to know when a chart has finished it's initial first render so you can do some additional things knowing that the chart is completely ready.

It's possible I'm missing something and this is already achievable in another way but I can't find it if so.

Feature Use Case

I maintain a chart plugin for WP:

https://wordpress.org/plugins/m-chart/

It was originally built on top of Highcharts but due to their increasingly weird licensing restrictions and WP Plugin repository rules I've been moving away from it to Chart.js.

One feature of the plugin is that it renders the canvas object out to a high res PNG and saves that along with the chart meta for every chart when the user is editing it in the admin interface.

This is useful for AMP pages and any other situation where you may want an image version of a chart instead of the JS one (rendered PDFs for instance).

I previously did this using the animation.onComplete functionality. This was a bit problematic because it runs every time the use mouses over the chart and triggers a tooltip and again when they mouse off but it was generally manageable.

However, with the recent rewrite it got even more problematic because it now fire constantly whenever the curser moves over the chart anywhere this bogs things down quickly and I end up with an unresponsive browser tab.

Of course I can set a value to check if it's run once already and while that should work it's not very elegant and it doesn't solve the issue that the animation.onComplete stuff seems sort of broken given it's current behavior.

[LeeLenaleee]

You could write a custom inline plugin and listen to the NotifyAfterRenderHook and keep track in there if its the first time, not ideal for you maby but at least your tab will remean responsive

https://www.chartjs.org/docs/master/developers/plugins.html#rendering

[methnen]

Here's a little additional context:

https://methnen-dropshare.s3.amazonaws.com/Screen-Recording-2021-04-13-15-20-30.mp4

And the JS Fiddle I was showing:

https://jsfiddle.net/methnen/yf0uc9jk/52/

[methnen]

Yeah, like I said I realize there's work arounds one of which I'm working on now personally but it seems like a missing feature and additionally I'm not sure the current behavior isn't actually broken.

It didn't behave like this before and it seems like you wouldn't actually want it to fire constantly like it currently does.

[LeeLenaleee]

And the JS Fiddle I was showing:

https://jsfiddle.net/methnen/yf0uc9jk/52/

Seems like its a bug in your browser, because when I run your fiddle or make one of my own verry basic I dont have the issue (https://jsfiddle.net/Leelenaleee/8ntxg706/1/), can you check if it still happens when using another browser?

[LeeLenaleee]

Nvm, it seems like there is a bug in the oncomplete, the bahaviour doesnt happen when you mouse off and hover but only happens when you wait for a period of time which is kind of weird

[methnen]

Hah... never even occurred to me it might be a browser issue.

I tend to use Safari. You are correct it doesn't have the same behavior in Chrome. Though there it does oddly enough fire twice whenever I click. In Safari it only fires once in that situation.

In Firefox it behaves basically how I want it to. It seems to only fire once and then never again which is interesting and a problem in another way entirely.

[etimberg]

I tried this a bit locally. If https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js#L624 is commented out, the problem goes away.

What I suspect is happening is that a render is occurring during the event handling even when nothing changed. In that case, we should not be doing anything.

[etimberg]

Tracing this a bit, it's coming from https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.tooltip.js#L1078

Initially caretX and caretY are undefined and so this is always returning true even when no tooltip items are shown.