Chart Area I
Chart Area I
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 () {
			$("#chart").devuiChart({
				theme: "light", // change "dark" to use dark mode
				primaryHeader: {
					text: "Budget overview"
				},
				exportOptions: {
					image: false,
					print: false
				},
				axisX: {
					categoricalValues: ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"]
				},
				tooltipSettings: {
					chartBound: true,
					axisMarkers: {
						enabled: true,
						mode: 'xy'
					}                    
				},
				dataSeries: [{
					seriesType: 'area',
					collectionAlias: "Budget in Thousands",
					data: [100, 320, 453, 234, 553, 665, 345, 123, 432, 545, 654, 345, 332, 456, 234]
				}]
			});
		});
	</script>
</body>