chartjs / chartjs/chartjs-plugin-annotation
Setting resizeDelay to non-zero value gives "Cannot read properties of undefined (reading 'left')" on clipArea error
- 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
Assessment
This issue has not been assessed yet.