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:
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:
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;