Chart Js Pie chart – With Best 3 Examples

Learn to Create Chart Js Pie chart, With the below example, you will learn how you can create charts using JavaScript.

Hello, Thank you for coming again to this blog. Many times you have to create charts on your website or web application, in this article I will show you how you can create charts using the library Chart Js.

I will give many examples of Chart Js pie chart, which will make it easy for you to learn the Chart Js functionality.

In Today’s article, I will show you how you can create a pie chart using chart js.

Chart Js Pie chart

How to add a chart using JS to an HTML page.

There are two ways to install chart js on an HTML page, and both are quite simple to do.

The first is the simplest technique, which involves calling the chart js CDN, to install it on an HTML website.

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

I’ll use the first approach in this article, which involves accessing the chart js library via a CDN.

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

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

After adding the aforementioned code, chart js’ functions are ready for use.

Chart Js Pie chart Example

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

<h1>Example of Pie chart using Chart JS </h1>
<h2>Below chart shows Sales of current week.</h2>

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


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

  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['Shirt', 'Cap', 'Perfume'],
      datasets: [{
        label: 'Sales',
        data: [10000, 20000, 50000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(245, 95, 136)',
      'rgb(55, 152, 237)',
      'rgb(235, 206, 99)'
    ]
      }]

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

Enjoyed the chart? You can construct a pie chart similar to the one in the above image using the code I have provided. Use the code above in your website or web application. The chart will appear as in the previous image.

I will now explain the code. Here, I have called the CDN for the chart Js file that I had previously placed in the HTML page’s head area.

The labels property in the chart code is where you add all the labels that you want to see in the pie chart. This brings us to the script tag.

The data that you wish to display on the pie chart will then be added to the “data” attribute.

Now, if you want to alter the color, you can do it easily by adding a color combination to the “backgroundColor” attribute in the RGB format.

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

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

The size of the pie chart will be quite small if you use the default setting; nevertheless, you can minimize the size of the chart JavaScript by utilizing the techniques listed below.

As you can see, I added a style attribute to the canvas tag’s outside div in the code below. I’ve set the size to “15%” of the screen; if you want to raise it, you may do so by changing the size to 20% or 50%, depending on your needs.

You can use the code below to reduce the pie chart’s size.

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

You can find the whole code for the smaller pie chart 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 Pie chart using Chart JS </h1>
<h2>Change size of pie chart</h2>

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


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

  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['Shirt', 'Cap', 'Perfume'],
      datasets: [{
        label: 'Sales',
        data: [10000, 20000, 50000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(245, 95, 136)',
      'rgb(55, 152, 237)',
      'rgb(235, 206, 99)'
    ]
      }]

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

Multi Level Pie chart using Chart JS

Multi Level Pie chart using Chart JS

In the example that follows, I’ll demonstrate how to use chart Js to create a multi-level pie chart that has a pie chart within it.

The pie chart inside the other pie chart is seen in the image up top.

You must tinker with the data set to obtain the same outcomes as those displayed in the top graphic. Two data sets are required to construct a multi-level pie chart. As you can see, I have developed code for two data sets in the code below. If you want the same color, you can use that color; if not, you can use a different color. I have added code in a variety of colors.

datasets: [{
        label: 'Weekly Sales',
        data: [10000, 20000, 50000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(245, 95, 136)',
      'rgb(55, 152, 237)',
      'rgb(235, 206, 99)'
    ]
      },
      {
        label: 'Monthly Sales',
        data: [250000, 190000, 570000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(86, 75, 25)',
      'rgb(36, 46, 99)',
      'rgb(76, 66, 99)'
    ]
      },
      ]

For a complete example of a multi-level pie chart using chart js, please see the code below.

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

<h1>Example of Pie chart using Chart JS </h1>
<h2>Multi level pie chart js</h2>

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


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

  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['Shirt', 'Cap', 'Perfume'],
      datasets: [{
        label: 'Weekly Sales',
        data: [10000, 20000, 50000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(245, 95, 136)',
      'rgb(55, 152, 237)',
      'rgb(235, 206, 99)'
    ]
      },
      {
        label: 'Monthly Sales',
        data: [250000, 190000, 570000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(86, 75, 25)',
      'rgb(36, 46, 99)',
      'rgb(76, 66, 99)'
    ]
      },
      ]

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

Please leave a comment if you would like more pie chart examples using chart js; I would be happy to do so.

Chart Js With More Articles

*** Line Chart

*** Pie chart

*** Bar chart

*** Doughnut chart

***  Horizontal Bar chart

*** Stacked Bar chart

*** Chart Js Website

Important Links.

*** Remove square brackets from string JavaScript

*** How to check radio button in jQuery by name.

*** How to add and remove class in JavaScript on click

*** Hosted Libraries By google

Leave a Comment

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