Site icon Puneet Sharma – Freelance Web Developer

Concentric Doughnut Chart with Chart.js

Concentric Doughnut Chart with Chart.js

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
});
Exit mobile version