Basic Column Chart - CanvasJS

Basic Column Chart

by willpickens

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="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var start = [
  "2015-06-11",
  "2015-09-11",
  "2016-03-05"
];

var end = [
  "2015-08-30",
  "2016-02-10",
  "2016-08-26"
];

var count = [
  20,
  45,
  56
];

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  exportEnabled: true,
  title: {
    text: "CO2 Bottles"
  },
  axisY: {
    includeZero: false,
    title: "Bottles filled",
  },
  axisX: {
    valueFormatString: "MMM YYYY"
  },
  legend: {
    cursor: "pointer",
    horizontalAlign: "right",

  },
  data: [

    {
      type: "rangeArea",
      showInLegend: true,
      name: start[0],
      xValueFormatString: 'MMM DD, YYYY',

      dataPoints: [{
          x: new Date(start[0]),
          y: [0, count[0]]
        },
        {
          x: new Date(end[0]),
          y: [0, count[0]]
        },

      ]
    },
    {
      type: "rangeArea",
      showInLegend: true,
      name: start[1],
      xValueFormatString: 'MMM DD, YYYY',

      dataPoints: [{
          x: new Date(start[1]),
          y: [0, count[1]]
        },
        {
          x: new Date(end[1]),
          y: [0, count[1]]
        },

      ]
    },
    {
      type: "rangeArea",
      showInLegend: true,
      name: start[2],
      xValueFormatString: 'MMM DD, YYYY',

      dataPoints: [{
          x: new Date(start[2]),
          y: [0, count[2]]
        },
        {
          x: new Date(end[2]),
          y: [0, count[2]]
        },

      ]
    }

  ]
});
chart.render();