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')