Chart.js : Create pie chart using HTML5 canvas in Jquery [Example]

satinder singh / Updated : / 4 Comments

Pie chart: In this article will create a pie chart using chart.js library with HTML5 canvas. Chart.js uses the HTML5 canvas element. It’s supported in all modern browsers, and polyfills support for IE7/8. Chart.js has many more feature do visit their official website.

Download: First download chart.js library from Github or from the official website.

After downloading files, you will get the chart.js and chart.min.js file includes it in your project .i.e web page HTML page.

<head runat="server">
    <title>Pie Chart</title>
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="Scripts/Chart.js" type="text/javascript"></script>

# Html Markup: Where you want to display your pie chart.

Now let’s add html5 canvas tag in your page and specify width, height respectively. Your HTML markup looks like below

<div id=”wrapper”>
   <canvas id="myChart" width="200" height="200"></canvas>

 # jQuery: Code Implement chart.js on html5 canvas tag.

 var data = [{
     value: 300,
     color: "#F7464A",
     highlight: "#FF5A5E",
     label: "Red"
 }, {
     value: 50,
     color: "#46BFBD",
     highlight: "#5AD3D1",
     label: "Green"
 }, {
     value: 100,
     color: "#FDB45C",
     highlight: "#FFC870",
     label: "Yellow"
// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var myPieChart = new Chart(ctx).Pie(data);
Try it Yourself ⇒

You can also check these articles:

  1. Chart.js : Create Pie chart with database Jquery Ajax C#.
  2. Chart.js Create Line chart with database Jquery Ajax C#.
  3. Generic Handler ashx file : Post send JSON data in C#.
  4. jQuery Ajax JSON Example in with sql database.

Yeah, you are done with it, Keep visiting us for more article 🙂

4 comments on “Chart.js : Create pie chart using HTML5 canvas in Jquery [Example]”

  1. Jack

    Hi Satinder, Can u share how can i do with the dynamic data coming from database ? I am using chart.js 1.0.2 version..

Post Comment

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