ChartJS "half donut" chart not displaying properly

Question

My chart is not displaying properly, here is how it displays and how it is suppose to display:

How it displays:

How it is suppose to look like:

My html code:

<div style="display:block; width: 400px; height: 400px">
    <canvas id="dashboardChart" width="400" height="400"></canvas>
</div>

My typescript component code:

var data = {
      datasets: [{
        data: [10, 20, 30]
      }],
      labels: [
        'Red',
        'Yellow',
        'Blue'
      ]
    };

    var ctx = document.getElementById("dashboardChart") as HTMLCanvasElement;
    var myDoughnutChart = new Chart(ctx, {
      type: 'doughnut',
      data: data,
      options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI
      }
    });

If anyone can assist, it would get greatly appreciated.

Answer 1

Doughnut rotation option is now in degrees

Try these changes:

circumference: 180,
rotation: -90,

Migration docs