Chart Area III
Chart Area III
View Demo

Insert it in <head>

<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />

<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>

Use Components

<body>
	<div id="chart"></div>
	<script type="text/javascript">
		$(document).ready(function () {
			var internetUsersPercent = [
				{ x: "1994", y: 4.9 },
				{ x: "1995", y: 9.2 },
				{ x: "1996", y: 16.4 },
				{ x: "1997", y: 21.6 },
				{ x: "1998", y: 30.1 },
				{ x: "1999", y: 35.9 },
				{ x: "2000", y: 43.1 },
				{ x: "2001", y: 49.2 },
				{ x: "2002", y: 59.0 },
				{ x: "2003", y: 61.9 },
				{ x: "2004", y: 65 },
				{ x: "2005", y: 68.3 },
				{ x: "2006", y: 69.2 },
				{ x: "2007", y: 75.3 },
				{ x: "2008", y: 74.2 },
				{ x: "2009", y: 71.2 },
				{ x: "2010", y: 74.2 },
				{ x: "2011", y: 78.2 }
			];

			$("#chart").devuiChart({
				theme: "light",
				axisY: {
					title: {
						text: "Internet users in the United States"
					}
				},
				dataSeries: [{
					seriesType: "area",
					data: internetUsersPercent
				}]
			});
		});
	</script>
</body>