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 :
symfony/ux#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

[stockiNail]

@RomainChardon I have seen that your issue in Symfony UX was closed (symfony/ux#1474 (comment)) by you.

Maybe you could explain what you did to solve it. It could be helpful for others.
Thank you!

[RomainChardon]

I have installed ChartJs and Symfony UX-ChartJs and built it with Encore. In my controller, I call the chartBuilder and create the chart in PHP. Finally, I pass it to the view with {{ render_chart }} while remembering to include {{ encore_entry_link_tags('app') }} and {{ encore_entry_script_tags('app') }}.

// In controller

$chartAction = $this->chartBuilder->createChart(Chart::TYPE_BAR);
        $chartAction->setData([
            'labels' => $labels,
            'datasets' => [
                [
                    'label' => 'Prospection',
                    'backgroundColor' => 'rgb(5, 155, 255)',
                    'data' => $dataActionProspection,
                    'stack' => 'Type',
                    'hoverOffset' => 4,
                ],
                [
                    'label' => 'Relance',
                    'backgroundColor' => 'rgb(255, 194, 52)',
                    'data' => $dataActionRelance,
                    'stack' => 'Type',
                    'hoverOffset' => 4,
                ],
                [
                    'label' => 'Rendez-vous',
                    'backgroundColor' => 'rgb(255, 64, 105)',
                    'data' => $dataActionVisite,
                    'stack' => 'Type',
                    'hoverOffset' => 4,
                ],
            ],
        ]);
        $chartAction->setOptions([
            'responsive' => true,
            'interaction' => [
                'intersect' => false,
            ],
            'scales' => [
                'x' => [
                    'stacked' => true,
                ],
                'y' => [
                    'stacked' => true,
                    'suggestedMin' => 0,
                    'suggestedMax' => 5,
                    'grace' => '5%',
                ]
            ],
            'plugins' => [
                'annotation' => [
                    'annotations' => [
                        'line1' => [
                            'type' => 'line',
                            'yMin' => 35,
                            'yMax' => 35,
                            'borderColor' => 'red',
                            'borderWidth' => 2,
                            'label' => [
                                'content' => 'Objectif',
                                'enabled' => true,
                                'position' => 'center',
                            ],
                        ],
                    ],
                ],
            ],
        ]);

// package.json

{
    "devDependencies": {
        "@babel/core": "^7.17.0",
        "@babel/preset-env": "^7.16.0",
        "@hotwired/stimulus": "^3.0.0",
        "@symfony/stimulus-bridge": "^3.2.0",
        "@symfony/ux-autocomplete": "file:vendor/symfony/ux-autocomplete/assets",
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/assets",
        "@symfony/webpack-encore": "^4.6.0",
        "chart.js": "^3.4.1 <3.9",
        "chartjs-plugin-zoom": "^2.0.1",
        "core-js": "^3.23.0",
    }
}

[yunsteel]

@MoSattler
Did you fix the issue? I have the same issue in Next.js on server side rendering