jQuery Step Line Charts & Graphs

Step Line Chart is useful when comparing trends for events that changes value at discrete but non-uniform intervals of time. Unlike Line Chart, data points in step Line Graph are connected using horizontal and vertical lines. Given example shows simple Step Line Chart along with HTML / jQuery Source Code that you can edit in-browser or save to run it locally.

Try Editing The Code

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title:{
		text: "UK Unemployement Rate"
	},
	axisY:{ 
		title: "Percentage",
		includeZero: false, 
		interval: .2,
		suffix: "%",
		valueFormatString: "#.0"
	},
	data: [{
		type: "stepLine",
		yValueFormatString: "#0.0"%"",
		xValueFormatString: "MMM YYYY",
		markerSize: 5,
		dataPoints: [
			{ x: new Date(2016, 9), y: 4.8 },
			{ x: new Date(2016, 10), y: 4.8 },
			{ x: new Date(2016, 11), y: 4.8 },
			{ x: new Date(2017, 0), y: 4.7 },
			{ x: new Date(2017, 1), y: 4.7 },
			{ x: new Date(2017, 2), y: 4.6 },
			{ x: new Date(2017, 3), y: 4.6 },
			{ x: new Date(2017, 4), y: 4.5 },
			{ x: new Date(2017, 5), y: 4.4 },
			{ x: new Date(2017, 6), y: 4.3 },
			{ x: new Date(2017, 7), y: 4.3 },
			{ x: new Date(2017, 8), y: 4.3 }
		]
	}]
});
chart.render();

}

Related Customization

markerType, markerSize properties can be used to change the type and size of the markers. Other commonly used customization options include lineThickness, lineDashType, lineColor, etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial