Cannot read properties of null (reading 'addEventListener')

[donavan-tangible]

Expected behavior

Check if canvas is 'null' before calling addListener(canvas, type,proxy).

function createProxyAndListen(chart, type, listener) {
const canvas = chart.canvas;
const proxy = helpers_segment.throttled((event)=>{
if (chart.ctx !== null) {
listener(fromNativeEvent(event, chart));
}
}, chart);
addListener(canvas, type, proxy);
return proxy;
}

Current behavior

Cannot read properties of null (reading 'addEventListener')
TypeError: Cannot read properties of null (reading 'addEventListener')
at addListener (http://localhost:3000/static/js/bundle.js:323367:8)
at createProxyAndListen (http://localhost:3000/static/js/bundle.js:323496:3)
at DomPlatform.addEventListener (http://localhost:3000/static/js/bundle.js:323539:21)
at _add (http://localhost:3000/static/js/bundle.js:326413:16)
at http://localhost:3000/static/js/bundle.js:326421:96
at each (http://localhost:3000/static/js/bundle.js:332240:12)
at Chart.bindUserEvents (http://localhost:3000/static/js/bundle.js:326421:66)
at Chart.bindEvents (http://localhost:3000/static/js/bundle.js:326402:10)
at Chart._checkEventBindings (http://localhost:3000/static/js/bundle.js:326088:12)
at Chart.update (http://localhost:3000/static/js/bundle.js:326032:10)

Reproducible sample

www.noexample.com

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

4.2.1

Browser name and version

No response

Link to your project

No response

[mukham12]

I'm having difficulty grasping the purpose of this issue. What's the rationale behind passing a null instead of a canvas element? Even if null is passed, it would be detected and reported earlier in the stack trace. If I am misunderstanding the intent of this issue, could you please provide more details and instructions to reproduce the problem? Otherwise, it appears to be a non-issue.

[mukham12]

@etimberg,

Do you consider this issue to be a genuine concern? It appears that the creator of the issue has remained unresponsive despite the comment above. I would like to hear your thoughts on whether this issue can be closed. Considering that a potential bug like this would likely have been identified and addressed earlier, it raises doubts about the significance of this reported problem. Plus, it would be nice to have one less issue open.

Thanks.

[donavan-tangible]

I'll check again this Tuesday... I think it's related to a browser problem...
I restarted my MacBook and this problem seems to be gone... I will reopen it if I see any problem appear again

[mukham12]

Thanks @donavan-tangible. Please do re-open in case this problem persists. Also, please provide a reproducible sample if possible!

[ThenTech]

I was trying to use the chartjs-chart-graph plugin, but ChartJS errors out in the function as described above because, somehow, chart.canvas is in fact null.

Perhaps the plugin in my case is trying to do something before the chart is fully initialized, but I've yet to find it. If I change the chart type to e.g. line and then to tree, it does work as a canvas is now created, but on resize, it becomes null again.

Also, this is using react-chartjs-2. Adding redraw={true} to the Chart, still shows the error from above twice, but after that it seems to work.

[DAcodedBEAT]

@mukham12 I'm also hitting this with react-chartjs-2 using the Doughnut chart from Chart.js. Any ideas on how to fix this? Should we add the conditional checks to chart.js to ensure that addEventListener and removeEventListener is only called on a canvas object?

[guru-keepspace]

Whats the solution to this issue, @DAcodedBEAT could you please explain how to this check , I am facing this is react-chartjs2 LineChart component

[DAcodedBEAT]

Whats the solution to this issue, @DAcodedBEAT could you please explain how to this check , I am facing this is react-chartjs2 LineChart component

@guru-keepspace I fixed the issue in the underlying chartjs library so this doesn't happen but as a result, other issues were uncovered - the latest one: #11809

Best of luck!