Bar chart with axis Labels - CanvasJS JavaScript Charts

Bar chart with axis Labels - 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 -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var xLabelMap = {
  "0": "Loaded",
  "1": "Completed",
  "2": "Done"
};

var chart = new CanvasJS.Chart("chartContainer", {
  "title": {},
  "axisX": {
    "reversed": true,
    "labelFormatter": function(e) {
      return xLabelMap[e.value] || e.value;
    }
  },

  "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();