Step Area charts are drawn by connecting the data points using vertical and horizontal lines and shading the enclosed area. Given example shows simple Step Area Chart along with HTML / jQuery source code that you can edit in-browser or save to run locally.
Read More >>
window.onload = function () { var options = { animationEnabled: true, theme: "light2", title:{ text: "Customer Satisfaction Based on Reviews - 2017" }, axisX: { valueFormatString: "MMM" }, axisY: { title: "Satisfied Customers", includeZero: true, suffix: "%" }, data: [{ type: "stepArea", markerSize: 6, xValueFormatString: "MMM", yValueFormatString: "#,##0.##"%"", dataPoints: [ { x: new Date(2017, 0), y: 54 }, { x: new Date(2017, 1), y: 78 }, { x: new Date(2017, 2), y: 70 }, { x: new Date(2017, 3), y: 82 }, { x: new Date(2017, 4), y: 70 }, { x: new Date(2017, 5), y: 86 }, { x: new Date(2017, 6), y: 80 }, { x: new Date(2017, 7), y: 74 }, { x: new Date(2017, 8), y: 83 }, { x: new Date(2017, 9), y: 88 }, { x: new Date(2017, 10), y: 72 }, { x: new Date(2017, 11), y: 70 } ] }] }; $("#chartContainer").CanvasJSChart(options); }
color, lineColor can be used to make the chart visually more appealing. Other commonly used customizations include lineDashType, lineThickness, fillOpacity, etc.