I am developing my site with Symfony 7.1. Following the instructions on: https://symfony.com/bundles/ux-chartjs/current/index.html. I did the following:
- Installed
symfony/ux-chartjs
. Mycomposer.json
has this line. - In my controller I copy the code shown in the official doc.
#[Route('/books/status', name: 'book_status')]
public function status(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('admin/dashboard.html.twig', [
'chart'=>$chart,
]);
}
- And finally, in my twig template:
<script src="/assets/js/chart.js"></script>
<div>
{{ render_chart(chart)}}
</div>
(I have omitted a lot of CSS related codes and template inclusion)
In the browser, I can see that the “canvas” element is inserted by twig:
<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>
But the chart is not displaying, nothing at all. Am I missing something?