Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

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="chartContainer1" style="height: 200px; width: 100%;"></div>
<div>
  <div style="margin-left: 33px;">
    <div style="background: pink; width: 60px;">^</div>
    BIG horizontal margin
  </div>
</div>
<div id="chartContainer2" style="height: 200px; width: 100%;"></div>
<div>
  <div style="margin-left: 33px;">
    <div style="background: lightblue; width: 15px;">^</div>
    SMALL horizontal margin
  </div>
</div>

JavaScript

var dataset1 = [{
		type: "line",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}]					

var dataset2 = [{
		type: "line",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 12, y: 55 },
			{ x: 14, y: 50 },
			{ x: 16, y: 65 },
			{ x: 18, y: 95 },
			{ x: 20, y: 68 },
			{ x: 22, y: 28 },
			{ x: 24, y: 34 },
			{ x: 26, y: 14 },
			{ x: 28, y: 71 },
			{ x: 30, y: 55 },
			{ x: 32, y: 50 },
			{ x: 34, y: 65 },
			{ x: 36, y: 95 },
			{ x: 38, y: 68 },
			{ x: 40, y: 55 },
			{ x: 42, y: 50 },
			{ x: 44, y: 65 },
			{ x: 46, y: 95 },
			{ x: 48, y: 68 },
			{ x: 50, y: 55 },
			{ x: 52, y: 50 },
			{ x: 54, y: 65 },
			{ x: 56, y: 95 },
			{ x: 58, y: 68 },
			{ x: 60, y: 55 },
			{ x: 62, y: 50 },
			{ x: 64, y: 65 },
			{ x: 66, y: 95 },
			{ x: 68, y: 68 },
			{ x: 70, y: 55 },
			{ x: 72, y: 50 },
			{ x: 74, y: 65 },
			{ x: 76, y: 95 },
			{ x: 78, y: 68 },
			{ x: 80, y: 55 },
			{ x: 82, y: 50 },
			{ x: 84, y: 65 },
			{ x: 86, y: 95 },
			{ x: 88, y: 68 },
			{ x: 90, y: 55 }
		]
	}]					

var chartOptions1 = {        
// Uncomment to set horizontal margin around plotted points
//	axisX: {
//  	viewportMinimum: 8,
//  	viewportMaximum: 92
//  },  
  data: dataset1
}
var chartOptions2 = {        
 	
// Uncomment to set horizontal margin around plotted points
//	axisX: {
//	    viewportMinimum: 8,
//	    viewportMaximum: 92
//	  },
   data: dataset2
}


var chart = new CanvasJS.Chart("chartContainer1", chartOptions1);
var chart = new CanvasJS.Chart("chartContainer2", chartOptions2);

chart.render();