jQuery Bar Chart

Bar charts are useful for displaying data that is classified into nominal or ordinal categories. Nominal data is categorised according to descriptive or qualitative information such as county of birth, or subject studied at university. Ordinal data are similar but the different categories can also be ranked, for example in a survey people may be asked to say whether they thought something was very poor, poor, fair, good or very good.

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: 'bar',
				applyAnimation: false,
				data: [1, 3, 4, 5]


Types of bar charts

There are horizontal and vertical bar charts. As a general rule, horizontal bar charts are used when there is a "values vs target" scenario - for example the data of four quarterly performance values, vs a predetermined target - for example number of sales. The vertical bar charts are usually used for displaying disconnected points of data, where each individual entry is important, rather than tracking a trend.

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.