chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.75k stars 11.92k forks source link

Error when trying to show a tooltip during data updates #11206

Open aeqz opened 1 year ago

aeqz commented 1 year ago

Expected behavior

If data changes are triggered due to the user interaction with the chart, like zoom and pan with chartjs-plugin-zoom plugin, and tooltips are no explicitly configured (default options.plugins.tooltip configuration), there should not be unhandled JS errors due to this usage.

Current behavior

The following error is thrown randomly:

[Error] TypeError: undefined is not an object (evaluating 'parsed[iScale.axis]')
    getLabelAndValue (chunk-VGFJOCNB.js:969)
    createTooltipItem (chunk-VGFJOCNB.js:8917)
    _createItems (chunk-VGFJOCNB.js:9260)
    update (chunk-VGFJOCNB.js:9293)
    handleEvent (chunk-VGFJOCNB.js:9668)
    afterEvent (chunk-VGFJOCNB.js:9735)
    _notify (chunk-VGFJOCNB.js:5144)
    notify (chunk-VGFJOCNB.js:5127)
    _eventHandler (chunk-VGFJOCNB.js:6403)
    listener (chunk-VGFJOCNB.js:6278)
    (anonymous function) (chunk-VGFJOCNB.js:3455)
    (anonymous function) (chunk-5HRYR2VN.js:996)

It does not happen with so much frequency, but it just sometimes does.

Reproducible sample

None

Optional extra steps/info to reproduce

I'm really sorry to not provide a reproducible example, but after many attempts I have not even been able to come up with a sequence of steps to reproduce it.

Possible solution

In the getLabelAndValue functions from the library, check also whether parsed is undefined or not before accessing its properties.

Context

We are trying to reload a line chart data every time that the user does zoom or ends a pan gesture in order to show it to him with a suitable resolution. The client-side data decimation feature of Chart.js did not work well for us in this case.

Also, we use a React setup.

chart.js version

v4.2.1

Browser name and version

Safari 16.3

Link to your project

No response

zigomir commented 9 months ago

Not sure if related;

I had similar issue in a Vue app, but then figured that wrapping canvas element used by Chart.js in Transition component was related to this problem, removing Transition component solved the issue for me 🤷‍♂️

masiama commented 2 weeks ago

Seems like it is a duplicate of https://github.com/chartjs/Chart.js/issues/11315 which is already resolved by https://github.com/chartjs/Chart.js/pull/11596 and included in 4.4.1 release