Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by mujahid_102

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 id="chartContainer" style="height: 360px; width: 90%; margin-top:20px;"></div>
<div id="chart2" style="height: 360px; width: 90%; margin-top:20px; "></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",		
				{
					theme: "theme3",               
					animationEnabled: false,
					title:{
						text: "This is chart title",
						fontSize: 20
					},
					toolTip: {
						shared: true
					},			
					axisY: {
						title: "Scale",
						labelFontSize: 12,
						labelWrap: true,
						labelMaxWidth:200,
						interval: 1,
						maximum: 5,
						margin: 20
					},
					axisY2: {
						title: "Scale",
						interval: 1,
						maximum: 5
					},	
					axisX: {
						labelFontSize: 12,
						labelFontColor: "black",
						interval:1,
						labelWrap: true,						
						labelMaxWidth: 200,
						margin: 20
					},
					data: [ 
					{
						type: "bar",	
						bevelEnabled: false,
						dataPointWidth: 150,
						lineThickness: 150,
						name: "Self",
						legendText: "Individual",
						showInLegend: true, 
						indexLabel: "{y}",
						dataPoints:[
            	{ label: "This is a Lable 1", y: 5},
              { label: "This is a Lable 2", y: 4},
            ]
					},
					{
						type: "bar",
						bevelEnabled: false,
						dataPointWidth: 20,
						name: "Supervisor",
						legendText: "Reporting Supervisor",
						axisYType: "secondary",
						showInLegend: true,
						indexLabel: "{y}",
						dataPoints:[
            	{ label: "This is a Lable 1", y:3},
              { label: "This is a Lable 2", y: 4},
            ]

					}
					
					],
		          legend:{
		            cursor:"pointer",
		            itemclick: function(e){
		              if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		              	e.dataSeries.visible = false;
		              }
		              else {
		                e.dataSeries.visible = true;
		              }
		            	//chart.render();
		            }
		          },
		        });
	    chart.render();
      
 var chart2 = new CanvasJS.Chart("chart2",		
				{
					theme: "theme3",               
					animationEnabled:...