Chart Js – Doughnut chart – Setting data circumference to less than 180 degrees renders the chart off center?

I’m not sure if i have a fundamental misunderstanding of doughnut charts.

I’m looking to render a doughnut chart with 1 data point (we’ll call this datapoint ‘completed_A).

The full circumference of the doughnut should be total_A.

if total_A == 360 and completed_A == 180, the chart should look similar to this:

we have completed half of the total amount

This works fine, the problem being that when completed_A is a smaller value such as 20, the chart appears to render off center and extremely zoomed in:

enter image description here

Is there a way to render this as if there is still a full 360 degrees?

import { Chart } from "chart.js/auto";

const DoughnutChart = {
  mounted() {
    const ctx = this.el;

    const data = {
      labels: ["Overall Yay", "Overall Nay"],
      datasets: [
        {
          backgroundColor: "#ffcd8c",
          data: [20],
          circumference: 20,
        },
      ],
    };

    const options = {
      maintainAspectRatio: false,
      cutout: "90%",
      plugins: {
        legend: {
          display: false,
        },
      },
    };

    new Chart(ctx, {
      type: "doughnut",
      data: data,
      options: options,
      plugins: [filterToolTips],
    });
  },
};

export default DoughnutChart;