ChartJS with Symfony UX - Error: Canvas is already in use - symfony

Question

I have error messages in my console when I render charts in my project Symfony 6.1.
Context :
I have a page with 4 charts displayed.
I make these with Symfony UX and ChartJS in my Controller Symfony.
The charts are displaying but errors in console.
Precision :
The number of charts is not important. I have same error with just one.
Error :
My function in controller :
public function homeCharts(
Request $request,
DueCaseRepository $dueCaseRepository,
EntityManagerInterface $entityManager,
ChartBuilderInterface $chartBuilder
): Response {
$this->denyAccessUnlessGranted('ROLE_ADMIN', null, 'Unable to access this page!');
/**
* en fonction du role => afficher le bon dashboard
*/
$user = $this->getUser();
$view = 'home/index_charts.html.twig';
/**
* Répartition du nombre de cases par Scope par défaut
*/
$chartNbCaseByScopeDefault = $dueCaseRepository->chartNbCaseByScopeDefault();
$labels = [];
$data = [];
foreach ($chartNbCaseByScopeDefault as $line) {
$labels[] = ($line["scope"] != null) ? $line["scope"] : "Undefined";
$data[] = $line["nb"];
}
$chart = $chartBuilder->createChart(Chart::TYPE_PIE);
if (!empty($data)) {
$maxValue = max($data);
} else {
$maxValue = 5;
}
$chart->setData([
'labels' => $labels,
'datasets' => [
[
'label' => 'Number of cases by Scope Default',
'hoverOffset' => 4,
'backgroundColor' => [
'rgba(255, 99, 132)',
'rgba(54, 162, 235)',
'rgba(255, 206, 86)',
'rgba(75, 192, 192)',
'rgba(153, 102, 255)',
'rgba(255, 159, 64)'
],
'data' => $data,
],
],
]);
$chart->setOptions([
'responsive' => true,
'maintainAspectRatio' => false,
'legend' => [
'labels' => [
'fontColor' => "#9ba6b5"
],
],
]);
/**
* Répartition du nombre de cases par Scope personnalisés
*/
$chartNbCaseByScopePerso = $dueCaseRepository->chartNbCaseByScopePerso();
$labels = [];
$data = [];
foreach ($chartNbCaseByScopePerso as $line) {
$labels[] = ($line["scope"] != null) ? $line["scope"] : "Undefined";
$data[] = $line["nb"];
}
$chart2 = $chartBuilder->createChart(Chart::TYPE_PIE);
if (!empty($data)) {
$maxValue = max($data);
} else {
$maxValue = 5;
}
$chart2->setData([
'labels' => $labels,
'datasets' => [
[
'label' => 'Number of cases by Scope perso',
'hoverOffset' => 4,
'backgroundColor' => [
'rgba(255, 99, 132)',
'rgba(54, 162, 235)',
'rgba(255, 206, 86)',
'rgba(75, 192, 192)',
'rgba(153, 102, 255)',
'rgba(255, 159, 64)'
],
'data' => $data,
],
],
]);
$chart2->setOptions([
'responsive' => true,
'maintainAspectRatio' => false,
'legend' => [
'labels' => [
'fontColor' => "#9ba6b5"
],
],
]);
/**
* Répartition du nombre de cases demandées/validées par mois
*/
$chartNbCaseRequested = $dueCaseRepository->chartNbCaseRequested();
$chartNbCaseValidated = $dueCaseRepository->chartNbCaseValidated();
$labels = [];
$data = [];
$data2 = [];
foreach ($chartNbCaseRequested as $line) {
if ($line["month"] !== null) {
$labels[] = $line["month"];
$data[] = $line["nb"];
foreach ($chartNbCaseValidated as $line2) {
if ($line["month"] == $line2["month"]) {
$data2[] = $line2["nb"];
}
}
}
}
$chart3 = $chartBuilder->createChart(Chart::TYPE_BAR);
if (!empty($data)) {
$maxValue = max($data);
} else {
$maxValue = 5;
}
$chart3->setData([
'labels' => $labels,
'datasets' => [
[
'label' => "Due cases requested",
'data' => $data,
'borderColor' => "#6c5ffc",
'borderWidth' => "0",
'backgroundColor' => "#6c5ffc"
], [
'label' => "Due cases validated",
'data' => $data2,
'borderColor' => "#05c3fb",
'borderWidth' => "0",
'backgroundColor' => "#05c3fb"
]
],
]);
$chart3->setOptions([
'scales' => [
'y' => [
'suggestedMin' => 0,
'suggestedMax' => $maxValue * 1.5,
],
],
'responsive' => true,
'maintainAspectRatio' => false,
'legend' => [
'labels' => [
'fontColor' => "#9ba6b5"
],
],
]);
/**
* Répartition du nombre de cases par country
*/
$chartNbCaseByCountry = $dueCaseRepository->chartNbCaseByCountry();
$labels = [];
$data = [];
foreach ($chartNbCaseByCountry as $line) {
$labels[] = ($line["country"] != null) ? $line["country"] : "Undefined";
$data[] = $line["nb"];
}
$chart4 = $chartBuilder->createChart(Chart::TYPE_POLAR_AREA);
if (!empty($data)) {
$maxValue = max($data);
} else {
$maxValue = 5;
}
$chart4->setData([
'labels' => $labels,
'datasets' => [
[
'label' => 'Number of cases by country',
'backgroundColor' => ['#6c5ffc', '#05c3fb', '#09ad95', '#1170e4', '#e82646'],
'hoverBackgroundColor' => ['#6c5ffc', '#05c3fb', '#09ad95', '#1170e4', '#e82646'],
'borderColor' => 'transparent',
'data' => $data,
],
],
]);
$chart4->setOptions([
'responsive' => true,
'maintainAspectRatio' => false,
'legend' => [
'labels' => [
'fontColor' => "#9ba6b5"
],
],
]);
return $this->render($view, [
'controller_name' => 'HomeController',
'user' => $user,
'chart' => $chart,
'chart2' => $chart2,
'chart3' => $chart3,
'chart4' => $chart4,
]);
}
My Twig file :
<div class="main-content mt-0 hor-content">
<div
class="side-app">
<!-- CONTAINER -->
<div
class="main-container container">
<!-- PAGE-HEADER -->
<div class="page-header">
<h1 class="page-title">
Dashboard charts
</h1>
</div>
<!-- PAGE-HEADER END -->
<div class="row">
<div class="col-12 col-sm-12">
<div class="card">
<div class="card-header">
<h3 class="card-title mb-0">Number of cases requested and validated by months</h3>
</div>
<div class="card-body">
{{ render_chart(chart3, {'data-controller': 'admin-chartjs-casesByMonth', 'id': 'casesByMonth'}) }}
</div>
</div>
</div>
<div class="col-6 col-sm-6">
<div class="card">
<div class="card-header">
<h3 class="card-title mb-0">Number of cases by prestation default</h3>
</div>
<div class="card-body">
{{ render_chart(chart, {'data-controller': 'admin-chartjs-casesByPresta', 'id': 'casesByPresta'}) }}
</div>
</div>
</div>
<div class="col-6 col-sm-6">
<div class="card">
<div class="card-header">
<h3 class="card-title mb-0">Number of cases by prestation client</h3>
</div>
<div class="card-body">
{{ render_chart(chart2, {'data-controller': 'admin-chartjs-casesByPrestaClient', 'id': 'casesByPrestaClient'}) }}
</div>
</div>
</div>
<div class="col-6 col-sm-6">
<div class="card">
<div class="card-header">
<h3 class="card-title mb-0">Number of cases by country</h3>
</div>
<div class="card-body">
{{ render_chart(chart4, {'data-controller': 'admin-chartjs-casesByCountries', 'id': 'casesByCountries'}) }}
</div>
</div>
</div>
</div>
</div>
<!-- CONTAINER END -->
</div>
</div>
I need your help please 😅
Thanks !
🙏🏻