Basic HTML5 Chart Example - CanvasJS JavaScript Charts

Basic HTML5 Chart Example - CanvasJS JavaScript Charts

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div class="chartBox"><div class="chart" id="chartContainer1" ></div></div>

CSS

div.chartBox {
	border: 1px solid lightgray;
	padding: 40px 0px 10px 30px;
	width: 80%;
}

div.chart {
	height: 280px; 
	width: 98%;
	border: 1px solid lightgray;	
}

JavaScript

CanvasJS.addColorSet("greenShades1",
                [//colorSet Array

                "#aac9b0",
                "#aac9b0",
                "#aac9b0",
				"#aac9b0",
                "#aac9b0",
                "#aac9b0",
				"#aac9b0",
                "#aac9b0",
                "#aac9b0",
				"#aac9b0",
                "#aac9b0",
                "#aac9b0",
				"#aac9b0",
                "#aac9b0",
                "#aac9b0",
				"#aac9b0",
                "#aac9b0",
                "#aac9b0",
				"#aac9b0",
                "#aac9b0",
                "#aac9b0",
				"#aac9b0",
                "#aac9b0",
                "#aac9b0",
				"#aac9b0",
				"#aac9b0",
                "#aac9b0",
				"#fa723c",
                "#fa723c",           
                "#fa723c",
                "#fa723c", 
				             
                ]);
	
	
	
	var chart = new CanvasJS.Chart("chartContainer1",
    {
      
	  interactivityEnabled: true,
	  colorSet: "greenShades1",
	
	  title:{
        text: "",
		horizontalAlign: "left",
      },
		
	 dataPointMaxWidth: 12,
	  
	 toolTip: {
			cornerRadius: 0,
			contentFormatter: function(e) {
				var curMonth = "";
				// index array 0 thru 23 = May
				// index array 24 thru 30 = Jun
	
				
				var curArrayIndex = e.entries[0].dataPoint.x;
				
				if (curArrayIndex < 27) {
					curMonth = "May";
				} else {
					curMonth = "Jun";
				}
				
				var curDay = e.entries[0].dataPoint.label;
				var curDate = new Date();
				curDay = curDate.getDay();
				
				
				if ( e.entries[0].dataPoint.y < 150) {	
					return ("<span style='color: red;'>Column is BAD </span>")
				} else {
					return ( curMonth + " " + e.entries[0].dataPoint.x + "<br /> Requests: " + e.entries[0].dataPoint.y + "<br /> <br /> More content if needed. ");
				}
			},
			borderColor: "#7e9e84",
			fontSize: 11,
		},
	  
      axisX:{
        labelFontFamily: "Segoe UI",
		labelFontSize: 9,
		lineThickness: 1,
		lineColor: "gray",
		tickColor: "lightgray",
       ...