JavaScript Step Area Charts & Graphs

Download JavaScript Chart Samples

Step Area charts are drawn by connecting the data points using vertical and horizontal lines and shading the enclosed area. It is useful when the data changes are at discrete non-uniform intervals of time. Charts are interactive and support animation, zooming, panning & exporting as image. Given example shows JavaScript Step Area Chart along with HTML source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Customer Satisfaction Based on Reviews"
	},
	axisY: {
		title: "Satisfied Customers",
		includeZero: true,
		suffix: "%"
	},
	data: [{
		type: "stepArea",
		markerSize: 5,
		xValueFormatString: "YYYY",
		yValueFormatString: "#,##0.##\"%\"",
		dataPoints: [
			{ x: new Date(2010, 0), y: 34 },
			{ x: new Date(2011, 0), y: 73 },
			{ x: new Date(2012, 0), y: 78 },
			{ x: new Date(2013, 0), y: 82 },
			{ x: new Date(2014, 0), y: 70 },
			{ x: new Date(2015, 0), y: 86 },
			{ x: new Date(2016, 0), y: 80 }
		]
	}]
});
chart.render();

}

Chart Customizations

You can change the color of the chart using color property. Some other customizations include fillOpacity, lineThickness, lineColor, lineDashType etc.