Chartjs-How to display name on multi series pie chart in chartjs

by

0👍

You can use the datalabels plugin for this.

Chart.register(ChartDataLabels)

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Day 1", "Day 2", "Day 3"],
    datasets: [{
        label: 'working',
        data: [10, 5, 6],
        backgroundColor: ["red", "blue", "pink"],
        renderText: [null, "Hello", null]
      },
      {
        label: 'sleeping',
        data: [4, 2, 7],
        backgroundColor: ["red", "blue", "pink"],
        renderText: ["No", "Hello", null]
      },
    ]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'white',
        formatter: (val, ctx) => (ctx.dataset.renderText[ctx.dataIndex])
      }
    }
  }
});
<div class="chart-view">
  <canvas id="chart" width="600" height="200" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
</div>

Leave a comment