Chartjs-Trying to refresh label when click on it. Cannot read property '_meta' of undefined"

by

0👍

✅

In order to obtain the expected result, you should define plugins.datalabels.formatter as follows:

formatter: (value, context) => {   
  return (value * 100 / context.dataset._meta[0].total).toFixed(1) + "%";
}

new Chart(document.getElementById("myChart"), {
  type: "pie",
  data: {
    labels: ['Savings', 'House'],
    datasets: [{
      label: "Data One",
      backgroundColor: ['#4e9258', '#64e986'],
      data: [9, 7],
      hoverBackgroundColor: "#f78733"
    }]
  },
  options: {
    plugins: {
      datalabels: {
        formatter: (value, context) => {   
          return (value * 100 / context.dataset._meta[0].total).toFixed(1) + "%";
        },
        color: '#fff'
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="myChart" height="100"></canvas>

Leave a comment