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.
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();
}
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.