[Chartjs]-How to change position of labels in Doughnut chart?

5👍

✅

To get your expected result …

ꜰɪʀꜱᴛ

set position: 'right' for legend in your chart options :

options: {
   legend: {
      position: 'right'
   }
}

ꜱᴇᴄᴏɴᴅ

wrap the canvas with a div element (.chart-container) and set it‘s width and height, instead of setting it for the canvas element itself :

.chart-container {
   width: 280px;
   height: 280px;
}

also, you should use the latest version of Chart.js, which is 2.7.1 atm.

5👍

The latest version of chart.js has slightly different syntax and needs to be wrapped in plugins

options: {
   plugins: {
      legend: {
         position: 'right'
      }
   }
}