CanvasJS HTML5 JavaScript Charts

CanvasJS HTML5 JavaScript Charts

by starbuck2511

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	theme: "light1", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "Simple Column Chart with Index Labels"
	},
  
	data: [{
		type: "line", //change type to bar, line, area, pie, etc
		//indexLabel: "{y}", //Shows y value on all Data Points
		indexLabelFontColor: "#5A5757",
      	indexLabelFontSize: 16,
		indexLabelPlacement: "outside",
		dataPoints: [
{x: 15, y: 0.007 },
{x: 16, y: -0.0064  },
{x: 17, y: 0.013 },
{x: 18, y: 0.001 },
{x: 19, y: 0.009 },
{x: 20, y: 0.017 },
{x: 21, y: -0.0018  },
{x: 22, y: 0.009 },
{x: 23, y: 0.008 },
{x: 24, y: 0.006 },
{x: 25, y: 0.002 },
{x: 26, y: 0.003 },
{x: 27, y: 0.003 },
{x: 28, y: 0.016 },
{x: 29, y: 0.007 },
{x: 30, y: -0.0032  },
{x: 31, y: -0.0062  },
{x: 32, y: -0.0109  },
{x: 33, y: 0.001 },
{x: 34, y: -0.0057  },
{x: 35, y: -0.0018  },
{x: 36, y: 0.006 },
{x: 37, y: 0.014 },
{x: 38, y: 0.006 },
{x: 39, y: 0.011 },
{x: 40, y: -0.0062  },
{x: 41, y: -0.0016  },
{x: 42, y: 0.005 },
{x: 43, y: -0.0062  },
{x: 44, y: -0.0033  },        
        ]
       		
	}]
});
chart.render();

}