CanvasJS HTML5 JavaScript Charts

CanvasJS helps you create chart in the most simple and efficient way possible

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 () {

  CanvasJS.addColorSet("greenShades",
                       [//colorSet Array
    "#2F4F4F",
    "#008080",
    "#2E8B57",
    "#3CB371",
    "#90EE90"                
  ]);

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
  colorSet: "greenShades",
	title:{
		text: "Simple Line Chart"
	},
  legend : {
    fontSize: 18,
    horizontalAlign : "right",
    verticalAlign : "center",
    cursor : "pointer"
  },
	axisY:{
		includeZero: false
	},
	data: [{        
		type: "line",
    name: "line1",
    showInLegend: true,
    markerType: 'none',
    legendMarkerType: 'none',
    lineColor: '#ff0000',
		dataPoints: [
			{ x: 1, y: 450 },
			{ x: 2, y: 414},
			{ x: 3, y: 460 },
			{ x: 4, y: 450 },
			{ x: 5, y: 500 }
		]
	},{        
		type: "line",
    name: "line2",
    showInLegend: true,
		dataPoints: [
			{ x: 1, y: 200 },
			{ x: 2, y: 300 },
			{ x: 3, y: 400 },
			{ x: 4, y: 500 },
			{ x: 5, y: 600 }
		]
	}
  ]
});
chart.render();

}