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


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);

View Demo

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 :-) [txt_ads]

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.

Post Comment

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


  1. Vaibhav 03/27/2015 11:23:44
    Nice Article .. Simple and Clear..
  2. Satinder singh 03/28/2015 13:47:19
    thanks for the feedback
  3. Jack 05/19/2015 11:35:01
    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..