I've been trying to create a half doughnut chart using Chart.js, similar to the image linked below. However, I'm having trouble adjusting the thickness of the pie chart. Despite using the innerRadius property, it's not producing the desired effect.
https://i.sstatic.net/9W34o.jpg
Below is the code I am currently using:
public getHalfDoughnutChart(records) {
let data = {
labels: ["Worked Hours","Remaining Hours"],
datasets: [{
label: 'Today\'s Worked Hours',
data: [records.length ? records[0].duration.hour : 0, 9],
backgroundColor: [
'rgba(75, 174, 79, 1)',
'rgba(255, 255, 255, 0)'
]
}]
};
let options = {
circumference: Math.PI,
rotation: 1.0 * Math.PI,
innerRadius: "10%",
legend: {
display: false
},
layout:{
padding:40
},
}
return this.getChart(this.halfDoughnutCanvas.nativeElement, "doughnut", data, options);
}
getChart(context, chartType, data, options?) {
return new Chart(context, {
type: chartType,
data: data,
options: options
});
}