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.
Read More >>
window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, exportEnabled: true, title:{ text: "UK 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, 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.