I utilised charts-plugin-annotation in an Angular project, and it worked without issue under Angular 15, but since migrating to Angular 16, the annotation plugin errors and breaks the rendering of the chart it plugged into - I haven't found a similar issue logged - and this is the error I receive:
loader.interceptor.ts:25 ERROR TypeError: Cannot read properties of undefined (reading 'borderWidth') at resolveLabelElementProperties (chartjs-plugin-annotation.esm.js:2141:31) at LineAnnotation.resolveElementProperties (chartjs-plugin-annotation.esm.js:1948:29) at updateElements (chartjs-plugin-annotation.esm.js:2717:32) at Object.afterUpdate (chartjs-plugin-annotation.esm.js:2894:5) at callback (helpers.segment.js:79:19) at PluginService._notify (chart.js:5091:25) at PluginService.notify (chart.js:5074:29) at Chart.notifyPlugins (chart.js:6356:30) at Chart.update (chart.js:5917:14) at Chart.<anonymous> (chart.js:5659:48)
And the annotation plugin method where the error occurs:
My configuration of the plugin is like so:
And it hasn't changed through the update, which touched the following packages:
Angular 15.2.9 => 16.2.12
ng2-charts 3.1.2 => 5.0.4
chart.js 3.9.1 => 4.4.3
chartjs-plugin-annotation 2.2.1 => 3.0.1
After discovering the issue, I've also tried chartjs-plugin-annotation 3.1.0 and chart.js 4.4.4/4.4.5, but the issue persists. Any help on this would be appreciated if someone can see where I'm going wrong or has also encountered this themselves and found a solution?
Hello 👋🏻
I utilised charts-plugin-annotation in an Angular project, and it worked without issue under Angular 15, but since migrating to Angular 16, the annotation plugin errors and breaks the rendering of the chart it plugged into - I haven't found a similar issue logged - and this is the error I receive:
loader.interceptor.ts:25 ERROR TypeError: Cannot read properties of undefined (reading 'borderWidth') at resolveLabelElementProperties (chartjs-plugin-annotation.esm.js:2141:31) at LineAnnotation.resolveElementProperties (chartjs-plugin-annotation.esm.js:1948:29) at updateElements (chartjs-plugin-annotation.esm.js:2717:32) at Object.afterUpdate (chartjs-plugin-annotation.esm.js:2894:5) at callback (helpers.segment.js:79:19) at PluginService._notify (chart.js:5091:25) at PluginService.notify (chart.js:5074:29) at Chart.notifyPlugins (chart.js:6356:30) at Chart.update (chart.js:5917:14) at Chart.<anonymous> (chart.js:5659:48)
And the annotation plugin method where the error occurs:My configuration of the plugin is like so: And it hasn't changed through the update, which touched the following packages:
After discovering the issue, I've also tried chartjs-plugin-annotation 3.1.0 and chart.js 4.4.4/4.4.5, but the issue persists. Any help on this would be appreciated if someone can see where I'm going wrong or has also encountered this themselves and found a solution?