<div id="wrapper" class="statcadre">
<canvas id="chart_percentperespace" class="charts" width="400" height="400"></canvas>
</div>
<script type="text/javascript">
(async function() {
    
    Chart.register(ChartDataLabels);
    const labels = <?php echo json_encode($tabEspNom); ?>;
    const data = {
      labels: labels,
      datasets: [{
            data: <?php echo json_encode($tabPercentPerEsp); ?>,
            backgroundColor: <?php echo json_encode($basicColors); ?>,
            borderColor: <?php echo json_encode($basicColors); ?>,
        }]
    };
new Chart(
    document.getElementById('chart_percentperespace'),
    {
    type: 'pie',
    data : data,
    options: {
        plugins: {
            title: {
                display: true,
                text: "<?php echo FDIR_STATS_INF16; ?>"
            },
            legend: {
                display:true
            },
            tooltip : {
                mode: 'point',
                intersect: false,
              }  ,    
            datalabels: {
              display: true, // Affiche les étiquettes de données
              formatter: function(value, context) {
                    return value + ' %'; // Ajoute le symbole "%" après la valeur
                },
              color: '#878787', // Couleur du texte
              align: 'center', // Alignement horizontal
              anchor: 'center', // Alignement vertical
              font: {
                weight: 'bold', // Style de police
              },
              display: function(context) {
                  return context.dataset.data[context.dataIndex] !== 0; // N'affiche pas si la valeur est égale à 0
                },
            },
        },
        responsive: true,
      }
    }
);
})();
</script>