jQuery Step Area Charts & Graphs

Step Area charts are drawn by connecting the data points using vertical and horizontal lines and shading the enclosed area. Given example shows simple Step Area Chart along with HTML / jQuery source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function () {

var options = {
	animationEnabled: true,
	theme: "light2",
	title:{
		text: "Customer Satisfaction Based on Reviews - 2017"
	},
	axisX: {
		valueFormatString: "MMM"
	},
	axisY: {
		title: "Satisfied Customers",
		suffix: "%"
	},
	data: [{
		type: "stepArea",
		markerSize: 6,
		xValueFormatString: "MMM",
		yValueFormatString: "#,##0.##"%"",
		dataPoints: [
			{ x: new Date(2017, 0), y: 54 },
			{ x: new Date(2017, 1), y: 78 },
			{ x: new Date(2017, 2), y: 70 },
			{ x: new Date(2017, 3), y: 82 },
			{ x: new Date(2017, 4), y: 70 },
			{ x: new Date(2017, 5), y: 86 },
			{ x: new Date(2017, 6), y: 80 },
			{ x: new Date(2017, 7), y: 74 },
			{ x: new Date(2017, 8), y: 83 },
			{ x: new Date(2017, 9), y: 88 },
			{ x: new Date(2017, 10), y: 72 },
			{ x: new Date(2017, 11), y: 70 }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Related Customization

color, lineColor can be used to make the chart visually more appealing. Other commonly used customizations include lineDashType, lineThickness, fillOpacity, etc.