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.