Formatting axisX and axisY labels - CanvasJS JavaScript Charts

Formatting axisX and axisY 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 dataPoints1 = [];
var dataPoints2 = [];
var dataPoints3 = [];
var dataPoints4 = [];
var yLabels = ["Bad", "Average", "Good"];
var yLabelCounter = 0;
var chart = new CanvasJS.Chart("chartContainer", {
  title:
  {
    text: "Code Quality",
    fontSize: 12,
    fontFamily: "tahoma",
  },
  tooltip: {
    enabled: true,
  },
  zoomEnabled: true,
  dataPointWidth: 10,
  axisX:
  {
    title: "Commit Time",
    titleFontSize: 10,
    titleFontColor: "Brown",
    interval: 1,
    intervalType: "HH",
    valueFormatString: "HH:DD",
    labelAngle: -20,
    includeZero: false,
    labelFontFamily: "Verdana",
    labelFontColor: "Black",
    labelFormatter: function (e) {
      return CanvasJS.formatDate(e.label, "HH");
    }

  },
  axisY:
  {
    title: "Quality",
    titleFontSize: 10,
    titleFontColor: "Brown",
    labelAngle: -20,
    labelFontFamily: "Verdana",
    labelFontColor: "Black",
    interval: 50,
    labelFormatter: function (e) {
      var yCats = yLabels[e.value / 50];
      return yCats;
    }
  },
  data: [
    {
      type: "column",
      cursor: "pointer",
      toolTipContent: "Coverage:{y}%,<br/>Task_id:1001,<br/> no. of lines:{lines}, <br/> start_line:101 , <br/> end_line:500",
      xValueType: "date",
      y: "{y}",
      showInLegend: true,
      name: "Code Coverage",
      dataPoints: dataPoints1
    },
    {
      type: "column",
      cursor: "pointer",
      toolTipContent: "Smell:{y}%,<br/> Task_id:1001,<br>no. of lines:{lines}, <br/> start_line:101 , <br/> end_line:500",
      xValueType: "date",
      showInLegend: true,
      name: "Code Smell",
      y: "{y}",
      dataPoints: dataPoints2
    },
    {
      type: "column",
      cursor: "pointer",
      toolTipContent: "Vulnerability:{y}%,<br/> Task_id:1001,<br> no. of lines:{lines}, <br/> start_line:101 , <br/> end_line:500",
      xValueType: "date",
      showInLegend: true,
      name: "Vulnerability",
      y: "{y}",
      dataPoints: dataPoints3
    },
    {
     ...