CanvasJS HTML5 JavaScript Charts

CanvasJS helps you create chart in the most simple and efficient way possible

HTML

<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

JavaScript

window.onload = function() {

  //Better to construct options first and then pass it as a parameter
  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title: {
      text: "Cost Of Pancake Ingredients"
    },
    axisY2: {
      prefix: "$",
      lineThickness: 0
    },
    toolTip: {
      shared: true
    },
    legend: {
      verticalAlign: "top",
      horizontalAlign: "center"
    },
    data: [{
      type: "stackedBar",
      showInLegend: true,
      name: "Butter (500gms)",
      axisYType: "secondary",
      color: "#7E8F74",
      dataPoints: [{
        y: 3,
        label: "India"
      }, {
        y: 5,
        label: "US"
      }, {
        y: 3,
        label: "Germany"
      }, {
        y: 6,
        label: "Brazil"
      }, {
        y: 7,
        label: "China"
      }, {
        y: 5,
        label: "Australia"
      }, {
        y: 5,
        label: "France"
      }, {
        y: 7,
        label: "Italy"
      }, {
        y: 9,
        label: "Singapore"
      }, {
        y: 8,
        label: "Switzerland"
      }, {
        y: 12,
        label: "Japan"
      }]
    }, {
      type: "stackedBar",
      showInLegend: true,
      name: "Flour (1kg)",
      axisYType: "secondary",
      color: "#F0D6A7",
      dataPoints: [{
        y: .5,
        label: "India"
      }, {
        y: 1.5,
        label: "US"
      }, {
        y: 1,
        label: "Germany"
      }, {
        y: 2,
        label: "Brazil"
      }, {
        y: 2,
        label: "China"
      }, {
        y: 2.5,
        label: "Australia"
      }, {
        y: 1.5,
        label: "France"
      }, {
        y: 1,
        label: "Italy"
      }, {
        y: 2,
        label: "Singapore"
      }, {
        y: 2,
        label: "Switzerland"
      }, {
        y: 3,
        label: "Japan"
      }]
    }, {
      type: "stackedBar",
      showInLegend: true,
      name: "Milk (2l)",
      axisYType: "secondary",
     ...