Chartjs-ChartJs place values outside of the pie chart

by

1👍

✅

After sharing in the comments, here a sample how to add labels (by datalabels plugin) to you pie/doughnut chart.

Chart.register(ChartDataLabels);
const options = {
  responsive: true,
  maintainAspectRatio: false,
};

const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['Data1', 'Data2', 'Data3', 'Data4'],
    datasets: [ {
      data: [102, 200, 80, 55],
      backgroundColor: ['green', 'yellow', 'red', 'cyan'],
      datalabels: {
        font: {
          size: 16
        },
        color: 'black'
      }
    }],
  },
  options
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.1.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