jQuery Pie Chart

Pie charts are similar to bar charts in the aspect that pie charts tend to visualize individual, disconnected points, rather than trends, such as lines or area charts. With a pie chart, the focus is on showing a part-of-a-whole relationship.

Getting Started

In order to take advantage of the functionality offered by the chart component, you will need to:

1. Include references to all required scripts.
2. Add the control declaration along with the desired properties.

<!DOCTYPE html>
<title>Shield Chart</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/shieldui-all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>


<div id="container" style="width:600px; height:400px;"></div>

<script type="text/javascript">
$(document).ready(function () {
		dataSeries: [
				seriesType: 'pie',
				applyAnimation: false,
				data: [1, 3, 4, 5]


Since it is hard to precisely determine the exact value of a data point, just by looking at the pie, this vital information is usually conveyed via secondary means - for example tool-tips when hovering a pie section. This approach can be additionally modified by using the flexible customization options for the ShieldUI Chart - changing font-size and color for the text, or rendering whole html fragments as tool-tips for the items. One can also include conditional code, to style the tool-tips according to some custom logic.

For a complete set of chart features and other controls, visit our online demos section, which contains fully functional samples along with all the required code.