I'm trying to get the output of a doughnut chart from 0 degrees to 180 degrees (Half of the circle) for practice, So I have tried the rotation option, but it didn't give me any desired result. And when tried to make a circle through circumference it is making a weird error by changing the chart how it looks. To get the half doughnut I need to use circumference: 60*Math.PI. here is the code below I've tried. I'm attaching the sandbox link that I've created.

https://codesandbox.io/s/friendly-mccarthy-d443i?file=/src/App.js

`

import React from 'react';
import { Doughnut } from 'react-chartjs-2';

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
      ],
      borderWidth: 1,
    },
  ],
};

const DoughnutChart = () => (
  <>
    <div className='header'>
      <h1 className='title'>Doughnut Chart</h1>
      <div className='links'>
        <a
          className='btn btn-gh'
          href='https://github.com/reactchartjs/react-chartjs-2/blob/master/example/src/charts/Doughnut.js'
        >
          Github Source
        </a>
      </div>
    </div>
    <Doughnut data={data} options={{rotation: 1*Math.PI, circumference: 1*Math.PI}} />
  </>
);

export default DoughnutChart;

CodePudding user response：

<Doughnut data={data} options={{ rotation: 0, circumference: 180 }} />