jQuery Area Chart

Area charts are similar to line charts in that they are used to track performance over a period of time. Line charts and area charts are very closely related. They are both good for time series data. They both show continuity and connectivity across a given dataset. They are both good for underlining trends rather than individual values.

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


When to use area chart types

Using a chart with area layout should be for the cases, when there is a limited set of series. This is mainly because by default area series overlap each other. This limitation can be partly overcome by using transparency, but when there are more that four series, it is better to use a line presentation.

Area charts are very powerful when used in a stacking scenario. Due to the area, which they fill, it makes it easier to distinguish the regions, which belong to a given series. This applies to both standard and 100% stacking modes.

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.