CanvasJS HTML5 JavaScript Charts

CanvasJS HTML5 JavaScript Charts

HTML

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

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

JavaScript

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer", {
  axisX: {
    valueFormatString: 'DD MMM',
    tickLength: 0,
  },
	axisY:{
		lineColor: "#C24642",
		tickColor: "#C24642",
		labelFontColor: "#C24642",
		titleFontColor: "#C24642"
	},
	data: [{
		type: "spline",
		name: "Test",
		color: "#369EAD",
		dataPoints: [
			{ x: new Date(2017, 0, 7), y: 8 }, 
			{ x: new Date(2017, 0, 8), y: 8 },
      { x: new Date(2017, 0, 9), y: 8 },
      { x: new Date(2017, 0, 10), y: 8 },
      { x: new Date(2017, 0, 11), y: 8 },
      { x: new Date(2017, 0, 12), y: 8 },
      { x: new Date(2017, 0, 13), y: 31 },
      { x: new Date(2017, 0, 14), y: 31 },
      { x: new Date(2017, 0, 15), y: 24 },
		]
	}]
});
chart.render();


}