Chartjs-ChartJs labels don't match with chart

by

2👍

✅

The pie/doughnut charts are the goal to show h*m*geneous datasets, with the same data structure and labels. In this way, the legend is showing all defined labels which are not present on all datasets.
But, normalizing the datasets (as in the sample) you could achieve your goal.

const ctx = document.getElementById("myChart");
Chart.plugins.register(ChartDataLabels);
const data = {
    labels: ['Summe', 'Noch um Ziel zu erreichen', 'Vergangene Tage', 'Verbleibende Tage'],
    datasets: [{
      backgroundColor: ['#ffff00', '#d8d800','#666666', '#444444'],
      data: [870, 229, null, null]
    },
    {
      backgroundColor: ['#ffff00', '#d8d800','#666666', '#444444'],
      borderColor: ['#000000'],
      data: [null, null, 21, 2]
    },
    ]
  };
const myChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
      responsive: true,
      plugins: {
        datalabels: {
          font: {
            family: "'PT Sans', sans-serif",
            weight: 'bold',
            size: 20
          },
          color: '#1e1e1e',
        },
        legend: {
          labels: {
            color: '#333',
            font: {
              size: 14,
              family: "'PT Sans', sans-serif",
              weight: 'bold'
            },
          },
        },
      }
    }
  });
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment