Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

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: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{        
	"title": {},
  "axisX": {
    "reversed": true,
  },
  "axisY": {
    "reversed": false,
    "viewportMinimum": 0,
    "viewportMaximum": 786,
    "interval": 78,
    "labelFormatter": function(e) { return Math.round((e.value / 786) * 100) + "%"}
  },
  "data": [
    {
      "type": "stackedBar",
      "dataPoints": [
        {
          "x": 0,
          "y": 786,
          "label": "Loaded"
        },
        {
          "x": 1,
          "y": 565,
          "label": "Completed"
        },
        {
          "x": 2,
          "y": 628,
          "label": "Done",
        },
      ]
    }
    ,
    {
      "type": "stackedBar",
      "legendText": "HalfDone",
      "showInLegend": "true",
      "dataPoints": [
        {
          "x": 2,
          "y": 19,
          "label": "HalfDone",
        },
      ]
    }
  ]
});

chart.render();