Simple jQuery Plugin To Draw A SVG Pie Chart - Piechart

File Size: 11.2 KB
Views Total: 6256
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Plugin To Draw A SVG Pie Chart - Piechart

Piechart is a super tiny jQuery plugin used to create a SVG pie chart with a hover animation and percentage display.

How to use it:

1. Include the latest jQuery library and jQuery Piechart plugin in the html document.

<script src=""></script>
<script type="text/javascript" src="PieChart.js"></script>

2. Create an Html element where you want to render a pie chart.

<div id="target">

3. Create the data source using value attribute.

<table id="source">
<td class="pieChart" value="220">Red</td>
<td class="pieChart" value="550">Blue</td>
<td class="pieChart" value="105">Green</td>
<td class="pieChart" value="300">Yellow</td>

4. Call the plugin and done.

<script type="text/javascript">
$(function() {
$('#source').pieChart('#target', 'Pie Chart Title');

5. The sample CSS to style the pies.

.caption {
display: block;
text-align: center;
font-weight: bold;
height: 40px;
.legend {
background: #f0f0f0;
border-radius: 4px;
bottom: 0;
position: relative;
text-align: left;
width: 100%;
margin: 0;
.legend li {
display: block;
float: left;
height: 20px;
margin: 0;
padding: 10px 20px;
.legend span.icon {
background-position: 50% 0;
border-radius: 2px;
display: block;
float: left;
height: 16px;
margin: 2px 10px 0 0;
width: 16px;
.percentage {
fill: white;
stroke: none;
font-size: 20px;
z-index: 100;
.pieChart {
stroke: black;
stroke-width: 2;
.pie0 {
fill: red;
background-color: red;
.pie1 {
fill: blue;
background-color: blue;
.pie2 {
fill: green;
background-color: green;
.pie3 {
fill: yellow;
background-color: yellow;

This awesome jQuery plugin is developed by hnvcam. For more Advanced Usages, please check the demo page or visit the official website.