Concentric Doughnut Chart with Chart.js

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
});