Bar chart with labels on axisY and axisX - CanvasJS JavaScript Charts

Bar chart with labels on axisY and axisX - 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 yValueMapper = {
  "10": "Train1",
  "20": "Train2",
  "30": "Train3",
  "40": "Train4",
  "50": "Train"
};

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  theme: "dark1", // "light1", "light2", "dark1", "dark2"
  title: {
    text: "PLE WU Flighting Stats"
  },
  axisY: {
    title: "Flighting Rings",
    labelFormatter: function (e) {
      return yValueMapper[e.value] || "";
    },
    includeZero: false
  },
  axisX: {
    title: "Flighting Trains",
    interval: 5
  },
  data: [
    {
      type: "bar",
      toolTipContent: "{label} : {yLabel}",
      dataPoints: [
        { y: 10, yLabel: "Train1", x: 5, label: "Canary" },
        { y: 20, yLabel: "Train2", x: 10, label: "I-WIP" },
        { y: 30, yLabel: "Train3", x: 15, label: "E-WIP" },
        { y: 40, yLabel: "Train4", x: 20, label: "WSD-Servicing" },
        { y: 50, yLabel: "Train5", x: 25, label: "Live" }
      ]
    }
  ]
});

chart.render();