Getting Started How to create a line graph using ChartJS How to create a bar graph using ChartJS How to create multi color bar graph using ChartJS How to create a pie chart using ChartJS How to create a doughnut chart using ChartJS ChartJS | How to create Line graph using data from MySQL (MariaDB) table and PHP ChartJS | How to create Doughnut Chart using data from MySQL (MariaDB) table and PHP ChartJS | How to draw Bar graph using data from MySQL table and PHP ChartJS | How to draw Line graph using data from MySQL table and PHP

How to create a doughnut chart using ChartJS

ChartJS

← Prev Next →

In this tutorial we will learn to draw doughnut chart using ChartJS and some static data.

Using ChartJS 2.x Download

Note! You can get the code of this tutorial from my GitHub repository.

Task

We will create a doughnut chart for two teams namely, TeamA and TeamB and their score for 5 matches - match1, match2, ... match5.

Project structure

We will start with the following project structure.

Inside the css folder we will create a default.css file. This will contain the default stylesheet.

And inside the js folder we will create doughnut.js file. In this file we will be writing the code to create the doughnut graphs.

And inside the project folder we will create a doughnut.html file.

Now the project structure will look like the following.

There are some other files shown in the above image from my other tutorials.

This tutorial is similar to Pie Chart tutorial.

doughnut.html

<!DOCTYPE html>
<html>
<head>
  <title>ChartJS - Doughnut</title>
  <link type="text/css" rel="stylesheet" href="css/default.css" />
</head>
<body>
  <div class="chart-container">
    <div class="doughnut-chart-container">
      <canvas id="doughnut-chartcanvas-1"></canvas>
    </div>

    <div class="doughnut-chart-container">
      <canvas id="doughnut-chartcanvas-2"></canvas>
    </div>
  </div>

  <!-- javascript -->
  <script src="js/jquery.min.js"></script>
  <script src="js/Chart.min.js"></script>
  <script src="js/doughnut.js"></script>
</body>
</html>

default.css

The default.css file will contain the following.

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container,
.doughnut-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

JavaScript

To draw the doughnut chart we will write some javascript.

Canvas

First we will get the two canvas using their respective ids doughnut-chartcanvas-1 and doughnut-chartcanvas-2 by writing the following code.

//get the doughnut chart canvas
var ctx1 = $("#doughnut-chartcanvas-1");
var ctx2 = $("#doughnut-chartcanvas-2");

Options

This is similar to Pie Chart options.

//options
var options = {
  responsive: true,
  title: {
    display: true,
    position: "top",
    text: "Doughnut Chart",
    fontSize: 18,
    fontColor: "#111"
  },
  legend: {
    display: true,
    position: "bottom",
    labels: {
      fontColor: "#333",
      fontSize: 16
    }
  }
};

Data

This is similar to Pie Chart data.

Instantiate the Chart class

We create two variables chart1 and chart2 and instantiate the Chart class. We pass ctx1 and ctx2 which holds the canvas and the data object.

Our final code for the doughnut.js file

$(function(){

  //get the doughnut chart canvas
  var ctx1 = $("#doughnut-chartcanvas-1");
  var ctx2 = $("#doughnut-chartcanvas-2");

  //doughnut chart data
  var data1 = {
    labels: ["match1", "match2", "match3", "match4", "match5"],
    datasets: [
      {
        label: "TeamA Score",
        data: [10, 50, 25, 70, 40],
        backgroundColor: [
          "#DEB887",
          "#A9A9A9",
          "#DC143C",
          "#F4A460",
          "#2E8B57"
        ],
        borderColor: [
          "#CDA776",
          "#989898",
          "#CB252B",
          "#E39371",
          "#1D7A46"
        ],
        borderWidth: [1, 1, 1, 1, 1]
      }
    ]
  };

  //doughnut chart data
  var data2 = {
    labels: ["match1", "match2", "match3", "match4", "match5"],
    datasets: [
      {
        label: "TeamB Score",
        data: [20, 35, 40, 60, 50],
        backgroundColor: [
          "#FAEBD7",
          "#DCDCDC",
          "#E9967A",
          "#F5DEB3",
          "#9ACD32"
        ],
        borderColor: [
          "#E9DAC6",
          "#CBCBCB",
          "#D88569",
          "#E4CDA2",
          "#89BC21"
        ],
        borderWidth: [1, 1, 1, 1, 1]
      }
    ]
  };

  //options
  var options = {
    responsive: true,
    title: {
      display: true,
      position: "top",
      text: "Doughnut Chart",
      fontSize: 18,
      fontColor: "#111"
    },
    legend: {
      display: true,
      position: "bottom",
      labels: {
        fontColor: "#333",
        fontSize: 16
      }
    }
  };

  //create Chart class object
  var chart1 = new Chart(ctx1, {
    type: "doughnut",
    data: data1,
    options: options
  });

  //create Chart class object
  var chart2 = new Chart(ctx2, {
    type: "doughnut",
    data: data2,
    options: options
  });
});

Output

← Prev Next →