Chartjs-How write the labels of the data inside a Doughnut Chart made with Chart.js?

by

1👍

✅

You were almost close to achieve it but you need register the ChartDataLabels and to show your labels use the `formatter as function and show your labels as done below:

Chart.register(ChartDataLabels);

var chartInstance = new Chart(document.getElementById("chartJSContainer"), {
  type: 'doughnut',
  data: {
    labels: ["Alfabetización", "Traducción"],
    datasets: [{
      data: [40, 60],
      backgroundColor: ["blue", "orange"],
    }, ],

  },
  options: {
    plugins: {

      labels: {
        render: 'label',
        fontStyle: 'normal',
        fontSize: 12,
        fontColor: '#fff',
        fontFamily: 'Arial',
        arc: true,
      },
      legend: {
        display: false,

      },
      datalabels: {
        formatter: function(value, context) {
          return context.chart.data.labels[context.dataIndex];
        },
        color: 'white',
        font: {
          weight: 'bold',
          size: 18
        },
        padding: 4,
      }

    }
  }
});
<body>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.1/dist/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>

  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

There are samples available to render different labels or custom labels you can refer to them and make necessary changes.

Leave a comment