Simple Example of PIE chart using Chartjs and HTML5 Canvas

Chartjs is a very popular html5 charting library. You can create awesome charts, Animate charts and mix charts using static data or dynamic data. You can pass dynamic data and parameters with the help of any web programming language. Chart js is written in pure JavaScript and html5 using canvas.

You can download the latest version of Chart.js on GitHub or just use these Chart.js CDN links.

Why do we use PIE chart

A PIE chart is a popular data visualization tool that helps represent data in a circular format. It is widely used in various fields, including business, finance, marketing, and research. With the help of JavaScript libraries like Chart.js, creating PIE charts has become much easier.

What’s Chart.js

Chart.js is an open-source JavaScript library that allows developers to create various types of charts, including PIE charts, line charts, bar charts, and more.

You can add interactive charts to your website or web application using chart.js. In this article, we will explore how to create a simple PIE chart using Chart.js and HTML5 Canvas.

It works in all modern mobile and desktop browsers including the iPhone/iPad and Internet Explorer from version 6.

Here, We will learn how to create PIE charts using chart.js library. The Chartjs takes JSON objects as an argument to render the PIE chart. There are the following steps need to follow to create PIE charts with help of Chartjs.

Simple Example of PIE Chart using Chartjs

We will create a new index.html file and write all code into this file.

Step 1: Includes jQuery and Chartjs library files into head section of index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

Step 3: Created a div HTML element in index.html, which is used as a container for the pie chart.

<div class="container">
<h2 class="text-center">PIE chart using Chartjs,jQuery and Bootstrap</h2>
<canvas id="barChart" width="400" height="400"></canvas></div>

The container chart div has a canvas element, The canvas id is #barChart.

Step 4: Initializing Chartjs library by calling method Chart on the target container(#barChart).

jQuery(document).ready(function() {
var chartDiv = $("#barChart");
var myChart = new Chart(chartDiv, {
    type: 'pie',
    data: {
        labels: ["Pending", "InProgress", "OnHold", "Complete", "Cancelled"],
        datasets: [
        {
            data: [21,39, 10, 14,16],
            backgroundColor: [
               "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
            ]
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Pie Chart'
        },
		responsive: true,
maintainAspectRatio: false,
    }
});
    });

Whereas main parameters are:

1. type: Types of charts like pie, bar, line, etc.
2. data: In the data object, we have provided the labels and corresponding data values for each slice of the PIE chart. We have also defined the background color for each slice using an array of colors.
3. options: This parameter contains other options like title, y-axis, padding, etc.

Customizing the PIE Chart

We can also customize the appearance of the PIE chart by modifying its options. For example, we can change the title, font size, font family, and legend position.

var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: data,
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Mobile Operating System Market Share',
      fontSize: 20,
      fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
    },
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        fontColor: 'black',
        fontSize: 14,
        fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
      }
    },
  },
});

In the options object, we have provided various options for the PIE chart. We have set the responsive option to true to make the chart responsive to different screen sizes. We have also added a title and legend.

Demo and Download source Code Of Chartjs