Check the following DEMO and modify it according to your needs.
DEMO
See the Pen Polar Chart with Chart.js by Puneet Sharma (@webdevpuneet) on CodePen.
HTML
<div class="donutPieChart">
<canvas id="myChart"></canvas>
</div>
Vendors
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js
https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js
Scripts
var data = {
datasets: [
{
data: [400, 100],
backgroundColor: ["#EFCFE4", "transparent"],
borderWidth: 0,
cutout: 90,
rotation: 180,
weight: 0.325,
},
{
data: [300, 100],
backgroundColor: ["#D0E1EE", "transparent"],
borderWidth: 0,
cutout: 55,
rotation: 180,
weight: 0.21,
},
{
data: [170, 100],
backgroundColor: ["#55A55E", "transparent"],
borderWidth: 0,
cutout: 32,
rotation: 180,
weight: 0.15,
},
]
}
var options = {
scale: {
angleLines: {
display: true,
color: 'gray',
lineWidth: 1
},
ticks: {
display: false,
max: 100,
min: 0,
stepSize: 20
},
reverse: false
},
animation: {
animateRotate: true,
animateScale: true
}
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: options
});