Step Line with CanvasJS

by katsukino

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js" type="text/javascript"></script>
<div id="chart_div"></div>

JavaScript

$(function () {
    var chart = new CanvasJS.Chart("chart_div", {
        width: 500, height: 300,
      	animationEnabled: false, // remove this and it works!
    		data: [{
          type: "stepLine",
          lineThickness: 15,
					dataPoints: [
          	{label: "2000", y: 44},
            {label: "2001", y: 88}, 
            {label: "2001", y: null}, 
            {label: "2002", y: 15},
            {label: "2003", y: 33},
            {label: "2004", y: 50}
          ]}
    	]
    });
        
		chart.ctx.lineCap = "round";
    chart.ctx.lineJoin = "round";
    
    chart.render();
});