How to create a doughnut chart using Chart.js

First of all you will need to include the canvas with a unique id and include chart.js cdn js file and then follow the steps below.

Include Chart.js file

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

HTML

Ass this canvas tag where you want doughnut chart to appear.

<canvas id="doughnut"></canvas>

CSS

you can control width and height of the donut chart with css as following:

#doughnut{
  max-width:300px;
  max-height:300px;
}

JavasScript

Include the following code after the HTML and Chart JS file include.

const data = {
        labels: [
          'Completed',
          'Progress'
        ],
        datasets: [{
          label: 'My First Dataset',
          data: [2180, 1586],
          backgroundColor: [
            'green',
            '#cecece'
          ],
          hoverOffset: 0
        }]
      };
    
      const config = {
        type: 'doughnut',
        data: data,
        options: {
          plugins: {
            legend: {
              display: false
            }
          },
          borderWidth: 0,
          cutout: '83%',
          rotation: 70
        }
      };
      const myChart = new Chart(
        document.getElementById('doughnut'),
        config
      );

Demo

In this demo, I have removed borders, removed all labels, and rotated it to 70 degrees.

See the Pen Donut chart using Chart.js by Puneet Sharma (@webdevpuneet) on CodePen.

This post is relevant to the following questions.

• How to create a Doughnut and Pie Charts chart with no labels?
• Chart.js code to create doghnut chart.
• How to remove border between doughnut in chart.js?
• How to create a responsive do doughnut chart?