[FIXED] ChartJs labels don't match with chart

Issue

Note: I am using ChartJs 2.9.4 as the newest versions are not compatible with the TV where these charts are displayed

Hello,

I was trying to add labels at the top of my chart but they don’t match the chart. The first 2 match the outter circle but the last 2 don’t match the inner circle as I expected them to. What am I doing wrong? Thanks in advance!

const chart = document.getElementById("multie-pie-chart") as HTMLCanvasElement;

function renderChart(data) {
  outterChart = new Chart(chart, {
    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'
            },
          },
        },
      }
    }
  });

  return outterChart
}

  const data = {
    labels: ['Summe', 'Noch um Ziel zu erreichen', 'Vergangene Tage', 'Verbleibende Tage'],
    datasets: [{
      backgroundColor: ['#ffff00', '#d8d800'],
      // @ts-ignore
      data: [stundenGesamt.toFixed(2), ((Number(ziel) - stundenGesamt)).toFixed(2)]
    },
    {
      backgroundColor: ['#666666', '#444444'],
      borderColor: ['#000000'],
      data: [workdaysCount(), (monatInputValidation() - workdaysCount())]
    },
    ]
  };

<div id="container">
    <canvas id="multie-pie-chart" height="200" width="200"></canvas>
</div>

Picture to showcase the problem:

enter image description here

Solution

The pie/doughnut charts are the goal to show homogeneous 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>

Answered By – user2057925

Answer Checked By – Cary Denson (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published