Open edwardmjackson opened 1 year ago
@edwardmjackson thank you for issue. I have tried your code both in JSFiddle and Codepen but I don't have any issue, both enabling and disabling resizeDelay
.
You can see my codepen https://codepen.io/stockinail/pen/YzdELbx.
Anyway I see that the box annotation looks like to be configured in the wrong place, in chart options. The annotation plugin options must be located in the "plugins"
node of chart options.
If I have done something wrong for reproducing your issue, let me know.
This is very curious. I reproduced at work, which is using Chrome. At home, Firefox (at least v 117.0.1) doesn't have the same issue though. The Chrome build is Version 116.0.5845.188 (64-bit) on Windows.
Hopefully this ScreenToGif works to show what I'm seeing.
uhmm... It's really weird. I have tried with Chrome Version 117.0.5938.88 (Official Build) (and before with FF 117.0.1) and no issue doing the same things you showed me in the img. Let me take time (I'm very busy on other stuff in this period) to try reproducing the issue.
I was able to reproduce it. JSFiddle + Chrome. With FF works and on Codepen works on both browser. Anyway, let me report here the exception:
Uncaught TypeError: Cannot read properties of undefined (reading 'left')
at Object.Ie [as clipArea] (chart.js@4.4.0:19:18340)
at Jt (chartjs-plugin-annotation@3.0.1:7:33797)
at Object.beforeDraw (chartjs-plugin-annotation@3.0.1:7:33031)
at d (chart.js@4.4.0:13:1113)
at sn._notify (chart.js@4.4.0:19:82974)
at sn.notify (chart.js@4.4.0:19:82795)
at An.notifyPlugins (chart.js@4.4.0:19:101789)
at An.draw (chart.js@4.4.0:19:97016)
at An.render (chart.js@4.4.0:19:96791)
at An._resize (chart.js@4.4.0:19:91846)
Using
chart.js@4.40
andchartjs-plugin-annotation@3.0.1
, an error is generated "Cannot read properties of undefined (reading 'left') on clipArea" when theresizeDelay
option is set to non-zero.JSFiddle: here (or just copy and paste this into a new fiddle)
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 butchartArea
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