Chart.js#3691

https://github.com/chartjs/Chart.js/issues/3691

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<div class="wrapper">
  <canvas id="chart"></canvas>
</div>

CSS

.wrapper {
  width: 512px
}

JavaScript

Chart.register(ChartDataLabels);

var labels = ['January', 'February', 'March', 'April'];
var data = [30, 50, 60, 40];

var chart = new Chart('chart', {
  type: 'pie',
  data: {
    labels: labels,
    datasets: [{
      backgroundColor: [
      	'#FF9900',
        '#FFB444',
        '#FFD088',
        '#FFEBCC'
      ],
      borderColor: 'white',
      data: data
    }]
  },
  options: {
            scales: null,
            borderWidth: 0,
            layout: {
                padding: 50
            },
            plugins: {
                datalabels: {
                    align: 'end',
                    anchor: 'end',
                    backgroundColor: null,
                    borderColor: null,
                    borderRadius: 4,
                    borderWidth: 1,
                    color: '#777',
                    font: {
                        size: 12
                    },
                    offset: 16,
                    padding: 0,
                    formatter: function(value, context)
                    {
                        return context.chart.data.labels[context.dataIndex] || null;
                    }
                }
            }
        }
});