chartjs / chartjs/chartjs-plugin-annotation

Setting resizeDelay to non-zero value gives "Cannot read properties of undefined (reading 'left')" on clipArea error

Open
#909 7 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
623
Forks
377
PR merge metrics
No merged PRs in 30d

Description

Using `chart.js@4.40` and `chartjs-plugin-annotation@3.0.1`, an error is generated "Cannot read properties of undefined (reading 'left') on clipArea" when the `resizeDelay` option is set to non-zero.

JSFiddle: [here](https://jsfiddle.net/u2aLmgx9/14/) (or just copy and paste this into a new fiddle)
```



const ctx = document.getElementById('myChart');

new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5, 6],

datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
resizeDelay: 100,
annotation: {
annotations: {
box1: {
// Indicates the type of annotation
type: 'box',
xMin: 1,
xMax: 2,
yMin: 8,
yMax: 10,
backgroundColor: 'rgba(255, 99, 132, 0.25)'
}
}
}
}
});

```
If you comment and uncomment line 28, `resizeDelay: 100`, the JSFiddle shows "script error" appear when resizeDelay is set.

The error appears to be in the Draw function

https://github.com/chartjs/chartjs-plugin-annotation/blob/193e4ceba18c4d242e8e7d30bcc2ee78b135894f/src/annotation.js#L151-L167

Where `clipArea(ctx, chartArea)` is called but `chartArea` is not yet defined, hence the chart.js helper at
https://github.com/chartjs/Chart.js/blob/master/src/helpers/helpers.canvas.ts#L327
fails.

My guess at a possible solution could be to only draw if ctx and chartArea are defined?

alternatively, it may be one for the maintainers of chartJS to fix for all users of plugin helprs. It only seems to affect chartjs-plugin-annotation however, not other plugins we're currently using such as chartjs-plugin-zoom

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.