Chartjs-How to rotate to center of a dataset using Chart.js (Doughnut chart)

by

4👍

✅

You need to set up the rotation parameter:

 const data = {
  datasets: [
    {
      label: 'My First Dataset',
      data: [300, 50, 100],
      backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
      hoverOffset: 4,
      rotation: -90,
    },
  ],
};

If you want to have a center of the biggest pie at the top then you need to perform this formula: -(choosenData/2)/(sumOfData)*360. In your case -300/2/450*360.

If you want to apply for each pie, then you need to change the order of the data (data element, backougrndColor, etc.) and as the first value set the centered one.

Example for data element 50:

 const data = {
  datasets: [
    {
      label: 'My First Dataset',
      data: [50, 100, 300],
      backgroundColor: ['rgb(54, 162, 235)', 'rgb(255, 205, 86)', 'rgb(255, 99, 132)'],
      hoverOffset: 4,
      rotation: -25/450*360,
    },
  ],
};

Documentation: Doughnut and Pie Charts, General

Leave a comment