Chartjs-Customization of Data Labels in doughnut chart ng2-charts

by

0👍

✅

Add backgroundColor and borderRadius to datalabels.

Check the below snippet to achieve that.

Chart.register(ChartDataLabels);

var doughnutCtx = document.getElementById("doughnutChart").getContext('2d');

var myChart = new Chart(doughnutCtx, {
  type: 'doughnut',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      data: [50, 60, 70, 180, 190],
       backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', ],
    }]
  },
  options: {
    plugins: {
      datalabels: {
       display: true,
        formatter: (value) => {
          return value + '%';
        },
        align: 'center',
        backgroundColor: 'white',
        borderRadius: 100,
        padding:10,
        font: {
          size: 18,
        }
      }
    }
  }
});
canvas{
  max-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<div>
  <canvas id="doughnutChart"></canvas>
</div>

Leave a comment