Cannot set properties of undefined (setting 'backgroundColor')

Joy-300799 commented 11 months ago

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 11 months ago

@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 8 months ago

I use ChartJs with symfony Ux and AssetMapper

stockiNail commented 8 months ago

@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 8 months ago

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 commented 8 months ago

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 8 months ago

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 commented 6 months ago

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 commented 5 months ago

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 commented 2 weeks ago

@RomainChardon I have seen that your issue in Symfony UX was closed (https://github.com/symfony/ux/issues/1474#issuecomment-2304833553) by you.

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

RomainChardon commented 1 week ago

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",
    }
}

chartjs / chartjs-plugin-annotation

Cannot set properties of undefined (setting 'backgroundColor') #918