Problems with Symfony + ux-chartjs.

1- Problems with Symfony + ux-chartjs.

Thank you very much for your quick response! I tell you that I installed the necessary packages as shown in the article, but the result I get is a blank canva. However when inspecting the page I see that the data does indeed come into view. Greetings

2- In my Controller

/**
     * @Route("/{idDataset}", name="dataset_show", methods={"GET"})
     */
    public function show(Dataset $dataset, ChartBuilderInterface $chartBuilder): Response
    {
        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
        $chart->setData([
            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            'datasets' => [
                [
                    'label' => 'My First dataset',
                    'backgroundColor' => 'rgb(255, 99, 132)',
                    'borderColor' => 'rgb(255, 99, 132)',
                    'data' => [0, 10, 5, 2, 20, 30, 45],
                ],
            ],
        ]);

        $chart->setOptions([
            'scales' => [
                'yAxes' => [
                    ['ticks' => ['min' => 0, 'max' => 100]],
                ],
            ],
        ]);

        return $this->render('dataset/show.html.twig', [
            'dataset' => $dataset,
            'chart' => $chart,
        ]);
    }

3- The template

{% extends 'base.html.twig' %}

{% block title %}Dataset{% endblock %}

{% block body %}
    <h1>Dataset</h1>

    <table class="table">
        <tbody>
            <tr>
                <th>IdDataset</th>
                <td>{{ dataset.idDataset }}</td>
            </tr>
            <tr>
                <th>NameDataset</th>
                <td>{{ dataset.nameDataset }}</td>
            </tr>
            <tr>
                <th>DescDataset</th>
                <td>{{ dataset.descDataset }}</td>
            </tr>
        </tbody>
    </table>

    <a href="{{ path('dataset_index') }}">back to list</a>

    <a href="{{ path('dataset_edit', {'idDataset': dataset.idDataset}) }}">edit</a>

    {{ include('dataset/_delete_form.html.twig') }}

    {{ render_chart(chart) }}

{% endblock %}

4- My composer.json

{   "name": "symfony-app/ml_alphalabs_webapp",
    "description": "Machine Learning Alphalabs Web App.",
    "type": "project",
    "license": "proprietary",
    "require": {
        "php": ">=7.1.3",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.4",
        "doctrine/annotations": "^1.0",
        "doctrine/doctrine-bundle": "^2.4",
        "doctrine/doctrine-migrations-bundle": "^3.1",
        "doctrine/orm": "^2.9",
        "google/cloud": "^0.166.0",
        "phpdocumentor/reflection-docblock": "^5.2",
        "sensio/framework-extra-bundle": "^5.1",
        "symfony/asset": "4.4.*",
        "symfony/console": "4.4.*",
        "symfony/dotenv": "4.4.*",
        "symfony/expression-language": "4.4.*",
        "symfony/filesystem": "4.4.*",
        "symfony/flex": "^1.3.1",
        "symfony/form": "4.4.*",
        "symfony/framework-bundle": "4.4.*",
        "symfony/http-client": "4.4.*",
        "symfony/intl": "4.4.*",
        "symfony/mailer": "4.4.*",
        "symfony/monolog-bundle": "^3.1",
        "symfony/process": "4.4.*",
        "symfony/property-access": "4.4.*",
        "symfony/property-info": "4.4.*",
        "symfony/proxy-manager-bridge": "4.4.*",
        "symfony/security-bundle": "4.4.*",
        "symfony/serializer": "4.4.*",
        "symfony/translation": "4.4.*",
        "symfony/twig-bundle": "4.4.*",
        "symfony/ux-chartjs": "^1.3",
        "symfony/validator": "4.4.*",
        "symfony/web-link": "4.4.*",
        "symfony/webpack-encore-bundle": "^1.12",
        "symfony/yaml": "4.4.*",
        "twig/extra-bundle": "^2.12|^3.0",
        "twig/string-extra": "^3.3",
        "twig/twig": "^2.12|^3.0"
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4",
        "phpunit/phpunit": "^9.5",
        "symfony/browser-kit": "4.4.*",
        "symfony/css-selector": "4.4.*",
        "symfony/debug-bundle": "4.4.*",
        "symfony/maker-bundle": "^1.0",
        "symfony/phpunit-bridge": "^5.3",
        "symfony/stopwatch": "4.4.*",
        "symfony/var-dumper": "4.4.*",
        "symfony/web-profiler-bundle": "4.4.*"
    },
    "config": {
        "preferred-install": {
            "*": "dist"
        },
        "sort-packages": true
    },
    "autoload": {
        "psr-4": {
            "App\\": "src/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "App\\Tests\\": "tests/"
        }
    },
    "replace": {
        "paragonie/random_compat": "2.*",
        "symfony/polyfill-ctype": "*",
        "symfony/polyfill-iconv": "*",
        "symfony/polyfill-php71": "*",
        "symfony/polyfill-php70": "*",
        "symfony/polyfill-php56": "*"
    },
    "scripts": {
        "auto-scripts": {
            "cache:clear": "symfony-cmd",
            "assets:install %PUBLIC_DIR%": "symfony-cmd"
        },
        "post-install-cmd": [
            "@auto-scripts"
        ],
        "post-update-cmd": [
            "@auto-scripts"
        ]
    },
    "conflict": {
        "symfony/symfony": "*"
    },
    "extra": {
        "symfony": {
            "allow-contrib": false,
            "require": "4.4.*"
        }
    }
}

5- My package.json

{
    "devDependencies": {
        "@popperjs/core": "^2.10.1",
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets",
        "@symfony/webpack-encore": "^1.0.0",
        "bootstrap": "^5.1.1",
        "bootstrap-icons": "^1.5.0",
        "chart.js": "^2.9.4",
        "core-js": "^3.0.0",
        "jquery": "^3.6.0",
        "node-sass": "^6.0.1",
        "regenerator-runtime": "^0.13.2",
        "sass-loader": "^12.1.0",
        "stimulus": "^2.0.0",
        "webpack": "^5.54.0",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}