Tooltip values are not being updated when dragging fast

[YahavTheKing123]

Hi,

When dragging points fast or in some other times, tooltip is not being updated (in Line chart).
This is happenning also in your examples here:

https://chrispahm.github.io/chartjs-plugin-dragdata/

Can you please suggest?

Thanks in advanced!

[chrispahm]

Hey @YahavTheKing123

not so sure what you mean, this is what's happening when I drag a datapoint (fast) from the given example

The tooltip is always updating, there's a delay in the tooltip position animation that I don't have any control over though.

Is this delay the issue you're describing? Or is something different happening on your end? If so, a video/GIF as well as some more details (e.g. browser used) etc. would be helpful.

Best
Chris

[YahavTheKing123]

Thank you for your reply @chrispahm ,

I am not talking about the animation delay. My issue is with the tooltip values that are not being changed (sometimes).
I am adding a video-gif that shows it.

My browser is chrome latest version but its also happens on edge and on chrome 90V

[YahavTheKing123]

Hi,

have you manage to identify this issue?

Thanks :)

[YahavTheKing123]

@chrispahm One strage thing here, when the chrome devTools is open, this is not happening... not sure why

[chrispahm]

Hey @YahavTheKing123,
While I'm sometimes able to reproduce the issue, I also haven't found out what exactly is causing it... sorry!

[YahavTheKing123]

Hi @chrispahm and thank you for your check.
I havent tryed it yet, but do you think that upgrading d3-drag and d3-select to latest version (you are currently work with old version) will make some difference?

Thanks :)

[chrispahm]

Hey @YahavTheKing123,
I just released v.2.2.0 with updated dependencies, and also updated examples using Chart.js v3.6.0, but unfortunately still no luck.

It's indeed really strange that the updates seem to work perfectly fine once the developer console is open, which makes it especially hard to debug. In a similar manner, I noticed that the following GANTT-Chart expressed super slow dragging behaviour, which is however fixed as well once the developer console is opened (and the page reloaded with an open dev console)

https://chrispahm.github.io/chartjs-plugin-dragdata/ganttChart.html

Not sure if that's a (temporary) option for you, but the issues doesn't seem to appear using Chart.js v2 (see v2 branch https://github.com/chrispahm/chartjs-plugin-dragdata/tree/v2)

[chrispahm]

chartjs/Chart.js#9904

[YahavTheKing123]

Thank for that @chrispahm. Unfortunately I need the Chartjs v3...

One thing that i did found is that on FireFox, when devTools is opened, this bug is still reproduceable so maybe it will help when debugging..

Thanks :)

[chrispahm]

Thanks to Chart.js maintainer @kurkle we finally have a fix 🎉 (v2.2.1)
You can follow the discussion in chartjs/Chart.js#9904 if you are interested in how the proposed solution works.
https://chrispahm.github.io/chartjs-plugin-dragdata/

Please let me know if the new version also fixes your issue!

[YahavTheKing123]

@chrispahm Thank you so much :)
Having some problems to compile the new version in my environment. Any chance you can create me a version with the old dependencies of your package that contains the new fix?
Thanks alot for everything!

[chrispahm]

What's the error you are receiving?

[YahavTheKing123]

After one more look, I think that it can happen due to your new syntax that is not recognize by my webpack (the js conditional chaining). can you please compile it with old syntax or with some plugin that converts it to old syntax?

Thanks U @chrispahm

[chrispahm]

I see, I checked caniuse before implementing optional chaining, and figured ~90% availability would be enough. Let me publish a quick fix, it's not used anywhere else so I guess an additional line wouldn't hurt!

Here's a small blogpost on optional chaining, it has a link to the required toolchain: https://chrispahm.github.io/posts/es2020-features.html (for future projects of yours)

[chrispahm]

Published v2.2.2 without optional chaining

[YahavTheKing123]

Thank you for the quick response!

1. Thanks for the blogpost, looks good!
2. I am now able to compile my bundle, but for some reason it is still not updating the tooltip new value.

Can you please commit the change here to gihub and also see that the example here work with this version.

Thanks @chrispahm

[chrispahm]

Hmm that is strange, did you disable your browsers cache?

[YahavTheKing123]

Yep :(
Still not working for me... I will try to share here an example...

[kurkle]

@chrispahm I think you should still cancel the replayed (or any) event when dragging. Its going to be the event before drag (because the d3-drag prevents the consumed events, such that chart.js does not receive them), so the event coordinates are at the starting point. This could cause the tooltip (and hover) to change in the chart.update('none') call.
I'm not sure that is the cause, but it could be a factor.

[YahavTheKing123]

@chrispahm Still working on some example but meanwhile I notice that in your example there is some bug (minor one).
When I drag the point to touch the edges of the chart, then the tooltip value is no longer changes...

[YahavTheKing123]

Hi @chrispahm :),

I created this codeSandbox below. This is more or less my prod setup (except for the zoom plugin which i am using and didnt include here).

You can see that here with the latest version its also not working well...
https://codesandbox.io/s/cool-spence-l6guy?file=/src/App.js:184-210

Thanks in advance my friend.

[YahavTheKing123]

Sorry for bugging you @chrispahm , but maybe you had a chance to take a look on that?

Thanks :)

[chrispahm]

Sorry, I'm really busy with work this week. Will let you know when I get to it!

[chrispahm]

Hey @YahavTheKing123,

sorry it took me so long, the bug turned out be really difficult to fix: If we cancel all events during the dragging gesture in the beforeEvent hook (as recommended by @kurkle) the tooltips stay active but unfortunately aren't updated anymore (see fiddle a.
If we don't cancel the events, but set the tooltip as the active element during the dragging gesture (which is the current approach used in this plugin) the tooltips work as advertised for all "simple" demos outlined in this repo (see fiddle b). However, in the CodeSandbox example you provided the tooltips vanish after dragging points further than a certain distance. After quite some investigation I'm relatively confident that a bug in the setActiveElements method in the main Chart.js repo is the culprit (see chartjs/Chart.js#9989).

Chart will replay the last registered event on update and thus replace the active elements

The PR chartjs/Chart.js#9992 fixing this issue has been merged a few days ago. As the fix is not released yet, I re-build Chart.js from source (attached to this comment), used it in your CodeSandbox example, and voilà: it works!

Still working on some example but meanwhile I notice that in your example there is some bug (minor one).
When I drag the point to touch the edges of the chart, then the tooltip value is no longer changes...

Despite the above fix, this issue hasn't been fixed yet. The afterEvent hook isn't called anymore after the dragging event leaves the Chart container. We could set the tooltip as active during the drag gesture, however then the tooltip isn't receiving any updates → same issue as before/initially when the issue was opened. I'll keep investigating!

[kurkle]

@chrispahm FYI, you can use https://chartjs.org/dist/master/chart.js (or .min.js etc) in pens etc (not in production!), to test out the master version.

edit: another fiddle with chart.js master and doing chart.tooltip.update() instead.
https://jsfiddle.net/bt26849e/1/

[chrispahm]

@kurkle that's awesome! I didn't know about the chart.tooltip.update() method! I guess that one solves both issues at once, will publish a fix ASAP.

@YahavTheKing123 here's the updated CodeSandbox using @kurkle's proposed fix:
https://codesandbox.io/s/musing-margulis-mjkwh?file=/src/chartjs-plugin-dragdata.js

[chrispahm]

Published v2.2.3, @YahavTheKing123 would appreciate if you could confirm if the fix works for you as well

[YahavTheKing123]

@chrispahm you are AMAZING!!!!! Thank you so much for your help (@kurkle to you too!)

I have just tested it with the new version and finally, it works great!!! It was worth waiting :)

Again thanks!

This issue can be closed now :)

[YahavTheKing123]

Sorry for all the bugging @chrispahm and @kurkle :(,

Your plugin is working now great.
I updated my example since its also using the chartjs-plugin-zoom for zoom and pan functionality.

I see some weird behavior after you deployed your new version.
When enabling the pan option in the zoomPlugin, the tooltip is freezing on the previous dragged point even if i am hovering on new point :( (if I disable the pan its working as expected).

I updated the codesandbox https://codesandbox.io/s/ancient-frog-chloh?file=/src/App.j (hope its ok.. I though that when I am editing it, its automatically creates new instance of it..) and you can see the behavior there.

Can you please suggest how can I address this?

Thanks a lot for your assistance Chris!

Edit:

Looks like this ugly hack is solving it for now...
adding to:
onDragStart(){
...
this.chartRef.current.config._config.options.plugins.zoom.pan.enabled = true;
}

    and to:    
      onDragEnd = (e, datasetIndex, index, value) => {
            this.chartRef.current.config._config.options.plugins.zoom.pan.enabled = true;
             ...
    }

[kurkle]

You can use onPanStart to reject the pan:
https://codesandbox.io/s/determined-kalam-lvhxf

[YahavTheKing123]

@kurkle , it worked like a magic!!!! Thank you!