JavaScript Step Line Charts & Graphs

Download JavaScript Chart Samples

Step Line Charts are similar to Line Charts except that the data points are connected using horizontal and vertical lines. These Charts are useful in cases where you want to show data that changes value at discrete but non-uniform intervals of time. Charts are interactive and support features like animation, zooming, panning & dynamic updates. Given example shows JavaScript Step Line 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,
	exportEnabled: true,
	title:{
		text: "US Unemployement Rate"
	},
	axisY:{ 
		title: "Percentage",
		interval: .2,
		suffix: "%",
		valueFormatString: "#.0"
	},
	data: [{
		type: "stepLine",
		yValueFormatString: "#0.0\"%\"",
		xValueFormatString: "MMM YYYY",
		markerSize: 5,
		dataPoints: [
			{ x: new Date(2016, 0), y: 4.9 },
			{ x: new Date(2016, 1), y: 4.9 },
			{ x: new Date(2016, 2), y: 5.0 },
			{ x: new Date(2016, 3), y: 5.0, indexLabel: "Highest", indexLabelFontColor: "#C24642" },
			{ x: new Date(2016, 4), y: 4.7 },
			{ x: new Date(2016, 5), y: 4.9 },
			{ x: new Date(2016, 6), y: 4.9 },
			{ x: new Date(2016, 7), y: 4.9 },
			{ x: new Date(2016, 8), y: 4.9 },
			{ x: new Date(2016, 9), y: 4.8 },
			{ x: new Date(2016, 10), y: 4.6 },
			{ x: new Date(2016, 11), y: 4.7 },
			{ x: new Date(2017, 0), y: 4.8 },
			{ x: new Date(2017, 1), y: 4.7 },
			{ x: new Date(2017, 2), y: 4.5 },
			{ x: new Date(2017, 3), y:4.4 },
			{ x: new Date(2017, 4), y:4.3 },
			{ x: new Date(2017, 5), y:4.4 }
		]
	}]
});
chart.render();

}

Chart Customizations

You can easily change the type of marker using markerType or change its size using markerSize. Some other customizations include lineThickness, lineDashType, lineColor, etc.