chartjs no rendering

[danardf]

Hi
I'm using ux-chartjs and there is no way to render any charts.
No error in the console.

I'm using Symfony 7.2.2 and PHP 8.3.
I followed the document and the examples. Noway.

The rendering is blank.

<?php

namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Model\Chart;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

final class ChartController extends AbstractController
{
    #[Route('/chart', name: 'app_chart')]
    public function index(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' => [
                'y' => [
                    'suggestedMin' => 0,
                    'suggestedMax' => 100,
                ],
            ],
        ]);

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

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

{% block body %}
    <div style="height: 300px;">
        {{ render_chart(chart) }}
    </div>
{% endblock %}

[Kocal]

Hi,

Your code looks valid, but I'm not really sure if the height must be configured on the parent or on render_chart() element (render_chart(chart, { style: 'height: 300px' })).

Also, when you say "rendering is blank", do you ensure there is no rendered DOM, or it's just visually?

[danardf]

I changed the value from 300 to 800, noway.

	<div style="height: 800px;">
        <canvas data-controller="symfony--ux-chartjs--chart" data-symfony--ux-chartjs--chart-view-value="{'type':'line','data':{'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]}]},'options':{'scales':{'y':{'suggestedMin':0,'suggestedMax':100}}}}"></canvas>
    </div>

[smnandre]

Do you see any error in the console ? Is Stmulus running as expected ?

[danardf]

@smnandre Hi.
Unfortunately nothing. No clue, no sound.

[danardf]

I'm following only some example from Symdony website, you Symfony UX. Nothing works as expected.
However, If I'm coding ChartJS without UX ChartJS, that works. But I just need to code as usual with javascript in a twig page.
Here that works.

[Kocal]

On a clean installation, I'm able to display the chart from your example:

Can you confirm us that you can see (or not) the following likes when opening the Console from DevTools:

It's probably an issue with Stimulus that is not loaded on your page. If necessary, please follow installation steps from https://symfony.com/bundles/StimulusBundle/current/index.html#manual-installation-details

Thanks!

[danardf]

Hmmm , well.
Whatever is set in stimulus controller, there is no rendering.

I installed webpack...etc.

In my template if I set ;
<div {{ stimulus_controller("hello') }} ></div>

I don't see anything.

In hello_controller.js

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    connect() {
        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
    }
}

In bootstrap.js

import { startStimulusApp } from '@symfony/stimulus-bundle';

const app = startStimulusApp();

It seems stimulus doesn't want to load.

[Kocal]

If you use Webpack Encore, your bootstrap.js must looks like this:

// assets/bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bridge';

// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.[jt]sx?$/
));

Then you must re-build your assets.

[danardf]

Well

With a new Symfony 7.2.2 project with webpack-encore. It doesn't work.
symfony new my_project --webpack
I wonder if there is something wrong.
If with a new base installation it is supposed to work but it doesn't. I wonder where the problem is.

Maybe it's my fault. I don't know.

I applied this :

import { startStimulusApp } from '@symfony/stimulus-bridge';

// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.[jt]sx?$/
));

Nothing.
Weird.