CODEWITHSUNDEEP
javascriptangulartypescriptionic2chart.js
user7832762
user7832762

Reputation:

Custom data position on the doughnut chart in chart.js

Is there any way to customize position of data I want to display in doughnut chart? The default is that the first item in data array is placed at 0 deegres. I want it to be placed in my custom position, because I am trying to make a clock-related app.Custom-default chart

this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {

      type: 'doughnut',
      data: {
        labels: this.titles,
        datasets: [{
          label: '# of Votes',
          data: this.times,
          backgroundColor: [
            'rgba(255, 99, 132, 0.5)',
            'rgba(54, 162, 235, 0.5)'
          ],
          hoverBackgroundColor: [
            "#FF6384",
            "#36A2EB"
          ]
        }]
      },
      options: {
        legend: {
          display: false
        }
      }
    });

Upvotes: 3

Views: 1298

Answers (1)

xnakos
xnakos

Reputation: 10196

Experiment with the rotation option:

options: {
    rotation: -0.5 * Math.PI
}

The value used above (-0.5 * Math.PI) is the default value. A value of 0 will rotate the doughnut 90° clockwise. You need a value between 0.5 * Math.PI and 1.0 * Math.PI in your case. More at the docs.

Upvotes: 2

Related Questions