I'm using a lot of pie and doughnut charts with two data values in a project. It really annoys me that since the chart slices starts from the top going clockwise, the labels end up looking reversed: on the opposite side of the data it represents.

Is there an easy way to reverse the label order, or reverse the chart to run counter-clockwise?

new Chart(context, {
  type: 'doughnut',
  data: {
    labels: [ 'Blue', 'Red' ],
    datasets: [
      {
        data: [7, 3],
        backgroundColor: [
          'rgba(54, 162, 235, 0.7)',
          'rgba(208, 54, 100, 0.7)',
        ],
      },
    ]
  }
});

I'm using a lot of pie and doughnut charts with two data values in a project. It really annoys me that since the chart slices starts from the top going clockwise, the labels end up looking reversed: on the opposite side of the data it represents.

Is there an easy way to reverse the label order, or reverse the chart to run counter-clockwise?

new Chart(context, {
  type: 'doughnut',
  data: {
    labels: [ 'Blue', 'Red' ],
    datasets: [
      {
        data: [7, 3],
        backgroundColor: [
          'rgba(54, 162, 235, 0.7)',
          'rgba(208, 54, 100, 0.7)',
        ],
      },
    ]
  }
});

• javascript
• charts
• chart.js

• Maybe this helps? stackoverflow./questions/27992044/… – Matt Commented Jul 6, 2017 at 14:58
• Thanks @mkaatman it does help. But apparently the exact option I was looking for exists, check the answer below. – sidyll Commented Jul 6, 2017 at 15:23

2 Answers 2

I think what you are looking for is the reverse option under legend which will show datasets in reverse order

http://www.chartjs/docs/latest/configuration/legend.html?h=reverse

Try giving it rotation via options in the Chart object.

new Chart(context, {
type: 'doughnut',
data: {
labels: [ 'Blue', 'Red' ],
datasets: [{
          data: [7, 3],
          backgroundColor: [
          'rgba(54, 162, 235, 0.7)',
          'rgba(208, 54, 100, 0.7)',
          ],
      }]
     },
  options: {rotation: (0.5 * Math.PI)}
});

Fiddle: https://jsfiddle/zdh7591r/