Cannot set properties of undefined (setting 'backgroundColor')

[Joy-300799]

Seeing a console error intermittently while navigating form some different application, the chart js plugin annotation gives me erroe saying instrument.js:122 TypeError: Cannot set properties of undefined (setting 'backgroundColor') at qe (chartjs-plugin-annotation.esm.js:778:9) at ge (chartjs-plugin-annotation.esm.js:720:17) at O.resolveElementProperties (chartjs-plugin-annotation.esm.js:939:12) at vt (chartjs-plugin-annotation.esm.js:2065:32) at Object.afterUpdate (chartjs-plugin-annotation.esm.js:2232:5) at zt (helpers.segment.js:79:19) at dn._notify (chart.js:5073:17) at dn.notify (chart.js:5056:29) at n.notifyPlugins (chart.js:6338:30) at n.update (chart.js:5899:14) at new n (chart.js:5652:18)

I am using box annotation, This works on manual reloading the page.

[stockiNail]

@Joy-300799 thank you for feedback. May I ask you if you can provide chart options, with annotation plugin config, to try to reproduce the issue?

[RomainChardon]

I use ChartJs with symfony Ux and AssetMapper

[stockiNail]

@RomainChardon thank you very much for screenshot.

It's not clear to me when "chartjs:init" event is triggered. I have the feeling that it is invoked when a chart instance is creating.

The chartjs-plugin-annotation uses the register hook of ChartJS and it should be registered to ChartJS as soon as it is imported. I don't know symfony Ux and AssetMapper but could you try to register the plugin after the import of annotationPlugin? Usually these kind of issues are related to the missing registration.

[RomainChardon]

Hello, thank you for your responsiveness. The chartjs:init was just a desperate attempt at stackoverflow. I also tried to save the plugin just after importing it but it had the same effect.

I will contact the Symfony ux team to find out more.

[stockiNail]

it's weird... let me take time to try to reproduce it because I'm still fighting to get the same or similar issue

[RomainChardon]

On the Symfony ux side I opened an issue, this partially solved the problem. It seems to me that now it's a problem in the configuration of my chart

Here is the solution provided by the Symfony ux teams : https://github.com/symfony/ux/issues/1474

[kx7895]

Any updates? Using Symfony UX, like @RomainChardon , and with this configuration:

            'plugins' => [
                'annotation' => [
                    'annotations' => [
                        'line1' => [
                            'type' => 'line',
                            'yMin' => 2,
                            'yMax' => 2,
                            'borderColor' => 'rgb(255, 99, 132)',
                            'borderWith' => 2,
                        ]
                    ]
                ]
            ],

I still get an JS error:

TypeError: undefined is not an object (evaluating 'o.borderWidth')

[MoSattler]

I have a similar error in remix - when loading a page

react-dom.development.js:22878 Uncaught TypeError: Cannot set properties of undefined (setting 'annotations')
    at Object.beforeUpdate (chartjs-plugin-annotation.esm.js:2598:31)
    at callback (helpers.core.ts:109:15)
    at PluginService._notify (core.plugins.js:60:11)
    at PluginService.notify (core.plugins.js:42:25)
    at Chart.notifyPlugins (core.controller.js:1153:26)
    at Chart.update (core.controller.js:508:14)
    at chart.tsx:85:24
    at commitHookEffectListMount (react-dom.development.js:23189:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24965:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24930:9)Caused by: 
    at ChartComponent (http://localhost:8080/build/_shared/chunk-BSE3OOZT.js:59:11)
    at div
    at TrackersOnTarget (http://localhost:8080/build/_shared/chunk-NSJT5LO5.js:45:3)
    at div
    at div
    at div
    at Card (http://localhost:8080/build/_shared/chunk-IAXPQXFK.js:41:141)
    at a
    at SiteCard (http://localhost:8080/build/_shared/chunk-6SY6MVYL.js:51:3)
    at div
    at MapSiteFull (http://localhost:8080/build/_shared/Map-XMK4SIXC.js:1596:189)
    at Marker (http://localhost:8080/build/_shared/Map-XMK4SIXC.js:1033:65)
    at div
    at div
    at Map4 (http://localhost:8080/build/_shared/Map-XMK4SIXC.js:1515:12)
    at Map3 (http://localhost:8080/build/_shared/Map-XMK4SIXC.js:1645:5)
    at ClientOnly (http://localhost:8080/build/_shared/chunk-5FFJMR6C.js:11711:23)
    at div
    at Suspense
    at div
    at GenericContainer (http://localhost:8080/build/_shared/chunk-5FFJMR6C.js:12640:3)
    at SiteIndex (http://localhost:8080/build/routes/_main_.sites._index-3FL6OEBF.js:92:7)
    at RenderedRoute (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:3347:5)
    at Outlet (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:3765:26)
    at div
    at div
    at Main (http://localhost:8080/build/routes/_main_.sites-ZYIW4I7G.js:751:16)
    at RenderedRoute (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:3347:5)
    at Outlet (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:3765:26)
    at IntlProvider3 (http://localhost:8080/build/root-KKBTJP6G.js:12390:45)
    at body
    at html
    at App (http://localhost:8080/build/root-KKBTJP6G.js:13264:7)
    at ErrorBoundary (http://localhost:8080/build/_shared/chunk-XFWFNEZC.js:17319:5)
    at SentryRoot (http://localhost:8080/build/_shared/chunk-XFWFNEZC.js:17522:22)
    at RenderedRoute (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:3347:5)
    at RenderErrorBoundary (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:3994:9)
    at DataRoutes2 (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:8206:5)
    at Router (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:3772:15)
    at RouterProvider2 (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:8023:5)
    at RemixErrorBoundary (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:13197:5)
    at RemixBrowser (http://localhost:8080/build/_shared/chunk-RLI6TJDY.js:14056:46)

commenting out ChartJS.register(ChartAnnotation) removes the error