Multiple Bar Charts in a Page - CanvasJS JavaScript Charts

Multiple Bar Charts in a Page - CanvasJS JavaScript Charts

by canvasjs

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 -->
<h2>Unparalleled access to top skills</h2>
<div id="chartContainer1" style="height: 300px; width: 33%; display: inline-block;"></div>
<div id="chartContainer2" style="height: 300px; width: 33%; display: inline-block;"></div>
<div id="chartContainer3" style="height: 300px; width: 33%; display: inline-block;"></div>

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {
  data: [{
    type: "bar",
    indexLabel : "{y}%",
    color: "#259DD8",
    indexLabelFontColor: "#259DD8",
    dataPoints: [
      { label: "C/C++/C#", y: 53 },
      { label: "SQL", y: 51 },
      { label: "Java/J2EE", y: 46 },
      { label: "Linux", y: 37 },
      { label: "Oracle", y: 36 },
      { label: "JavaScript", y: 33 },
      { label: "Unix", y: 32 }
    ]
  }]
});
chart1.render();

var chart2 = new CanvasJS.Chart("chartContainer2", {
  data: [{
    type: "bar",
    indexLabel : "{y}%",
    color: "#259DD8",
    indexLabelFontColor: "#259DD8",
    dataPoints: [
      { label: "Agile", y: 30 },
      { label: "VB / VB.net", y: 20 },
      { label: "Cloud", y: 21 },
      { label: ".net", y: 19 },
      { label: "Python", y: 17 },
      { label: "VMWare", y: 17 },
      { label: "ASP / ASP.net", y: 16 }
    ]
  }]
});
chart2.render();

var chart3 = new CanvasJS.Chart("chartContainer3", {
  data: [{
    type: "bar",    
    indexLabel : "{y}%",
    color: "#259DD8",
    indexLabelFontColor: "#259DD8",
    dataPoints: [
      { label: "PHP", y: 13 },
      { label: "Android", y: 12 },
      { label: "iOS", y: 11 },
      { label: "AWS", y: 9 },
      { label: "Salesforce", y: 7 },
      { label: "Ruby / Ruby on Rails", y: 5 },
      { label: "Hadoop", y: 5 }
    ]
  }]
});
chart3.render();