symfony ux not displaying chart

[MiroYld]

hello,

I have a problem with my chart, I don't know why he is not displayed in my branch view while in inspect an element I can see my chart. I have no code errors a priori and I downloaded the necessary bundles.

In my controller :

` public function index(CallApiService $callApiService, ChartBuilderInterface $chartBuilder): Response { $total = $callApiService->getTotalByCountry(); $totalByStatus = []; foreach ($total as $dailyTotal) { $totalByStatus['confirmed'][] = $dailyTotal['Confirmed']; $totalByStatus['deaths'][] = $dailyTotal['Deaths']; $totalByStatus['recovered'][] = $dailyTotal['Recovered']; $totalByStatus['active'][] = $dailyTotal['Active']; }

    $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
    $chart
        ->setData([
            'labels' => array_keys($total),
            'datasets' => [
                [
                    'label' => 'Confirmed',
                    'backgroundColor' => 'rgb(120, 161, 187, 0.5)',
                    'data' => $totalByStatus['confirmed']
                ],
                [
                    'label' => 'Death',
                    'backgroundColor' => 'rgb(219, 80, 74, 0.5)',
                    'data' => $totalByStatus['deaths']
                ],
                [
                    'label' => 'Recovered',
                    'backgroundColor' => 'rgb(147, 196, 139, 0.5)',
                    'data' => $totalByStatus['recovered']
                ],
                [
                    'label' => 'Active',
                    'backgroundColor' => 'rgb(252, 191, 73, 0.5)',
                    'data' => $totalByStatus['active']
                ]
            ]
        ]);

    return $this->render('home/index.html.twig', [
        'data' => $callApiService->getFranceData(),
        'chart' => $chart,
    ]);
}

}`

and in my twig i just have <div class="card shadow-lg"> <div class="card-body"> {{ render_chart(chart) }} </div> </div>

If I inspect element i can show my chart data

[weaverryan]

Hey @MiroYld!

What version of symfony/ux-chartjs are you using? And what version of @symfony/stimulus-bridge (the Node package)? I just want to make sure that you don't have some new, unreleased code that is still being finalized.

Assuming you're using stable code, the most likely cause is that the chartjs Stimulus controller wasn't properly initialized. What does your controllers.json file look like? And do you have enableStimulusBridge() in webpack.config.js? And what does your assets/bootstrap.js file look like? And are you importing it from assets/app.js? Sorry for the many questions - trying to see where the disconnect is.

Cheers!

[MiroYld]

Hey @weaverryan Thank you for your answer.

I am a junior developer on symfony. I wouldn't be able to answer all of your questions, im sorry. However my project is available on github at the following address: https://github.com/MiroYld/TrackerCovid19.git I think you will find the problem more easily with my code.

thank you for your comeback.

[eraelpeha]

Hello, I wonder if there is a solution to this? Because I'm expiriencing the same behaviour here. I can see the canvas in the dev-tools, but it looks like a white canvas.

To answer your questions @weaverryan , I'm using v2.2 of symfony/ux-chartjs, v3.2.1 of @symfony/stimulus-bridge. Furthermore, my controllers.json looks like this:

{
    "controllers": {
        "@symfony/ux-chartjs": {
            "chart": {
                "enabled": true,
                "fetch": "eager"
            }
        }
    },
    "entrypoints": []
}

My webpack.config.js includes .enableStimulusBridge('./assets/controllers.json'), and assets/bootstrap.js looks like

import { startStimulusApp } from '@symfony/stimulus-bridge';
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.(j|t)sx?$/
));

Finally, app.js includes a require('bootstrap'); directive.

As mentioned by @MiroYld , there are no errors on the devtools page.

[frekel]

I have the same configuration and problems as @eraelpeha

Is there any suggestion or pointer to fix this?

[alzee]

I have the same issue too and have the same configuration files as @eraelpeha. And my versions: "symfony/ux-chartjs": "v2.4.0" "symfony/webpack-encore-bundle": "v1.15.1" "@symfony/stimulus-bridge": "3.2.1" "@symfony/webpack-encore": "3.1.0"

Hope it got fixed soon. Before that, I'm gonna use chartjs the frontend way.

[weaverryan]

Hi everyone!

If someone can publish a reproducer library on GitHub, I can take a look.

The original poster @MiroYld did post a reproducer, but it turned out the issue was that {{ encore_entry_script_tags('app') }} was never called, so the built JavaScript files were never rendered onto the page. In this situation, the <canvas element WILL render onto the page (this is rendered on the server), but then there's no JavaScript to actually see this and initialize chart.js.

Cheers!

[eraelpeha]

Hi everyone,

in the meantime I've solved my problem. I've required bootstrap as mentioned above, but indeed that was the css-Framework that got included. I made a separate import './bootstrap.js' (note the .js as the only difference...) in my app.js file and it worked like a charme.

Hope this helps!

[weaverryan]

I'm going to close this - I think the issue is just various mis-configurations of UX itself (e.g. not having the encore_entry_script_tags() or not importing ./bootstrap.js. Hopefully this issue can help people who have related problems in the future :)