chartjs/chartjs-plugin-annotation

Cannot set properties of undefined (setting 'backgroundColor')

Joy-300799 opened this issue · 8 comments

Joy-300799 commented

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 commented

@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 commented

I use ChartJs with symfony Ux and AssetMapper

image

image

image

image

stockiNail commented

@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 commented

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.

image
image

stockiNail commented

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 commented

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

image
image

Here is the solution provided by the Symfony ux teams :
symfony/ux#1474

kx7895 commented

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

image