Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Basic Column Chart"
  },
  axisX: {
		interval: 1,
		gridThickness: 1,
		interlacedColor: "#F0F8FF"
	},
	axisY: {
		title: "kWh",
		interval: 1
	},
  data: [{
  	color: "#e6e600",
    dataPoints: [
{ label: "12a", x: 0, y: 0.01},
{ label: "1a", x: 1, y: 0.01},
{ label: "2a", x: 2, y: 0.01},
{ label: "3a", x: 3, y: 0.01},
{ label: "4a", x: 4, y: 0.01},
{ label: "5a", x: 5, y: 0.01},
{ label: "6a", x: 6, y: -0.01},
{ label: "7a", x: 7, y: -0.09},
{ label: "8a", x: 8, y: -0.38},
{ label: "9a", x: 9, y: -0.33},
{ label: "10a", x: 10, y: -0.47},
{ label: "11a", x: 11, y: -0.55},
{ label: "12p", x: 12, y: -0.9},
{ label: "1p", x: 13, y: -2.85},
{ label: "2p", x: 14, y: -1.76},
{ label: "3p", x: 15, y: -0.51},
{ label: "4p", x: 16, y: -0.3},
{ label: "5p", x: 17, y: 0.02},
{ label: "6p", x: 18, y: 0.01},
{ label: "7p", x: 19, y: 0.01},
{ label: "8p", x: 20, y: 0.03},
{ label: "9p", x: 21, y: 0.03},
{ label: "10p", x: 22, y: 0.02},
{ label: "11p", x: 23, y: 0.02}
         ]},
	  {
		color: "#ff0000",
		type: "column",
		showInLegend: true,
		legendText: "Main",
		dataPoints: [
{ label: "12a", x: 0, y: 0.47},
{ label: "1a", x: 1, y: 0.43},
{ label: "2a", x: 2, y: 0.48},
{ label: "3a", x: 3, y: 0.47},
{ label: "4a", x: 4, y: 0.47},
{ label: "5a", x: 5, y: 0.73},
{ label: "6a", x: 6, y: 0.83},
{ label: "7a", x: 7, y: 0.95},
{ label: "8a", x: 8, y: 1.06},
{ label: "9a", x: 9, y: 0.71},
{ label: "10a", x: 10, y: 2.38},
{ label: "11a", x: 11, y: 1.13},
{ label: "12p", x: 12, y: 0.76},
{ label: "1p", x: 13, y: -1.05},
{ label: "2p", x: 14, y: -0.29},
{ label: "3p", x: 15, y: 1.3},
{ label: "4p", x: 16, y: 0.49},
{ label: "5p", x: 17, y: 0.9},
{ label: "6p", x: 18, y: 1.09},
{ label: "7p", x: 19, y: 1.14},
{ label: "8p", x: 20, y: 0.88},
{ label: "9p", x: 21, y: 1.05},
{ label: "10p", x: 22, y: 1.07},
{ label: "11p", x: 23, y: 0.66}
	  ]},
	  {
		color: "#009900",
		type: "column",
		showInLegend:...