Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by canvasjs

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,
  dataPointWidth: 20,
  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,
      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,
      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: false,
  dataPointWidth: 20,
  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:...