Chart Js Doughnut chart – With Best 3 Examples

Find out how to make a Chart Js Doughnut chart. You may learn how to build charts with JavaScript by using the example below.

Hello, I appreciate you visiting this blog once more. In this tutorial, I’ll show you how to generate charts using the Chart Js library for your website or web application, which you’ll need to do frequently.

You will find it simple to understand how to use Chart Js once I provide several examples of its Doughnut chart.

In today’s tutorial, I’ll show you how to create a Doughnut chart using chart js.

Chart Js Doughnut chart

How to incorporate a chart into an HTML page using Chart JS.

Chart Js can be added to an HTML page using two simple approaches.

The first approach is the simplest; it entails calling the chart js CDN and installing it on an HTML page.

The second step is to download the chart js library, save it, and use it on your HTML page.

I’ll use the first approach in this article, which requires using a CDN to get the chart js library.

Simply copy the code below and paste it above the script element or in the head section of your HTML page to utilize the chart js Cdn.

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

Once the aforementioned code has been implemented, the chart js functions are accessible for use.

Chart Js Doughnut chart Example

Chart Js Doughnut chart Example
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<h1>Example of Doughnut chart using Chart JS </h1>
<h2>Below Doughnut Chart shows daily sales of Chair</h2>

<div style="width: 40%;">
  <canvas id="myChart"></canvas>
</div>


<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['Monday', 'Tuesday', 'Wednesday'],
      datasets: [{
        label: 'Chair Daily Sales',
        data: [4000, 2000, 8000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 10, 0, 0.3)',
        'rgb(120, 100, 40, 0.3)',
         'rgb(90, 10, 100, 0.3)',
    ],
      borderColor: [
     'rgb(200, 10, 0)',
     'rgb(120, 100, 40)',
      'rgb(90, 10, 100)',
     
    ]
      },
      ]

    },
    
  });
</script>
	
</body>
</html>

How do you find the Doughnut graph? Using the code I’ve provided, you can create a Doughnut chart that looks much like the one in the top image. Include the aforementioned code in your web application or website. The Doughnut chart will appear as seen in the previous image.

Now let me review the code. I have contacted the CDN here for the chart Js file that I had previously added to the HTML page’s head section.

The labels property in the chart code is where you add all the labels you want to appear in the Doughnut chart. Finally, we reach the script tag.

The information you want to display on the Doughnut chart will then be updated in the “data” property.

Simply add a set of colors to the “backgroundColor” element in the RGB format now that the Color may be altered easily.

BorderColor, which enables you to apply border color in RGB format, is used to color the borders of the Doughnut chart.

How to set size in the Doughnut chart in chart js.

set size in the Doughnut chart in chart js

The Doughnut chart will be very huge if you use the default setting, but you can make it smaller by using the techniques listed below.

As you can see in the code below, I gave the outside div of the canvas tag a style attribute. By changing the size from where it is currently set at “20%” of the screen to 20% or 50%, you can raise or decrease it in accordance with your needs.

<div style="width: 20%;">
  <canvas id="myChart"></canvas>
</div>

The complete code for the smaller Doughnut chart is contained in the code below.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<h1>Example of Doughnut chart using Chart JS </h1>
<h2>Below Doughnut Chart shows daily sales of Chair</h2>

<div style="width: 20%;">
  <canvas id="myChart"></canvas>
</div>


<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['Monday', 'Tuesday', 'Wednesday'],
      datasets: [{
        label: 'Chair Daily Sales',
        data: [4000, 2000, 8000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 10, 0, 0.3)',
        'rgb(120, 100, 40, 0.3)',
         'rgb(90, 10, 100, 0.3)',
    ],
      borderColor: [
     'rgb(200, 10, 0)',
     'rgb(120, 100, 40)',
      'rgb(90, 10, 100)',
     
    ]
      },
      ]

    },
    
  });
</script>
	
</body>
</html>

Multi Level Doughnut chart using Chart JS

Multi Level Doughnut chart using Chart JS

I’ll show you how to utilize chart Js to make a multi-level Doughnut chart with a pie chart inside it in the example that follows.

To Create a multi-level Doughnut chart, you will need to use multiple datasets.

The image up top shows the Doughnut chart inside the other Doughnut chart.

To get the same results as those shown in the top graphic, you must fiddle with the data set. To create a multi-level pie chart, two data sets are necessary. As you can see from the code below, I created programs for two different data sets. You can use that color if you want the same shade; if not, you can use a different shade. I inserted code in several different colors.

datasets: [{
        label: 'Weekly Sales',
        data: [4000, 2000, 8000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 10, 0, 0.3)',
        'rgb(120, 100, 40, 0.3)',
         'rgb(90, 10, 100, 0.3)',
    ]      
      },
      {
        label: 'Monthly Sales',
        data: [55000, 25000, 50000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 10, 0, 0.3)',
        'rgb(120, 100, 40, 0.3)',
         'rgb(90, 10, 100, 0.3)',
    ]
      }
      ]

Please see the code below for a comprehensive example of a multi-level Doughnut chart using chart js.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<h1>Example of Multiple Doughnut chart using Chart JS </h1>
<h2>Below Multiple Doughnut Chart shows daily and Weekly sales of Chair, Lamp and Table</h2>

<div style="width: 40%;">
  <canvas id="myChart"></canvas>
</div>


<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['Chair', 'Lamp', 'Table'],
      datasets: [{
        label: 'Weekly Sales',
        data: [4000, 2000, 8000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 10, 0, 0.3)',
        'rgb(120, 100, 40, 0.3)',
         'rgb(90, 10, 100, 0.3)',
    ]      
      },
      {
        label: 'Monthly Sales',
        data: [55000, 25000, 50000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 10, 0, 0.3)',
        'rgb(120, 100, 40, 0.3)',
         'rgb(90, 10, 100, 0.3)',
    ]
      }
      ]

    },
    
  });
</script>
	
</body>
</html>

If you would want more Doughnut chart examples utilising chart js, kindly leave a comment; I would be pleased to provide them.

Chart Js With More Articles

*** Line Chart

*** Pie chart

*** Bar chart

*** Doughnut chart

***  Horizontal Bar chart

*** Stacked Bar chart

*** Chart Js Website

Leave a Comment

Your email address will not be published. Required fields are marked *