I am using Chart.js I want a half doughnut chart just like the image below. But I am failed to change the thickness of the pie. I tried the property innerRadius but still it's not working
Here is my code
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
});
}
You should use percentageInnerCutout
property in options
object
let options = {
circumference: Math.PI,
rotation: 1.0 * Math.PI,
percentageInnerCutout: 10,
legend: {
display: false
},
layout:{
padding:40
},
}
You can also check this question How to vary the thickness of doughnut chart, using ChartJs.?
P.S. As I understand it depends of version, so
If Chart.js version > 2.0 use cutoutPercentage
Otherwise use percentageInnerCutout