Bubble Chart with axisY labels - CanvasJS | JavaScript charts

Bubble Chart with 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 chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Bubble Chart with dateTime axis and Label over Y axis"
  },
  axisX: {
  	interval: 1,
    intervalType: "hour",
    minimum: new Date(2017, 04, 2, 0, 0),
    maximum: new Date(2017, 04, 2, 24, 0),
    labelFontColor: "grey",
    tickLength: 0,
    lineThickness: 0
  },
  axisY: {
  	interval: 1,
    gridThickness: 0,
    labelFontColor: "grey",
    tickLength: 0,
    lineThickness: 0
  },
  data: [
    {
      type: "bubble",
      xValueFormatString: "hh:mm TT",
      toolTipContent: "{day} : {x}",
      dataPoints: [
        		{ x: new Date(2017, 04, 2, 2, 10), y: 10, z: 5, day:"Sun" },
            { x: new Date(2017, 04, 2, 5, 15), y: 20, z: 7, day:"Sat" },
            { x: new Date(2017, 04, 2, 10, 20), y: 30, z: 4, day:"Fri" },
            { x: new Date(2017, 04, 2, 12, 25), y: 40, z: 6, day:"Thur" },
            { x: new Date(2017, 04, 2, 15, 35), y: 50, z: 5, day:"Wed" },
            { x: new Date(2017, 04, 2, 18, 35), y: 60, z: 8, day:"Tue" },
            { x: new Date(2017, 04, 2, 23, 35), y: 70, z: 6, day:"Mon" },
            { x: new Date(2017, 04, 2, 15, 35), y: 60, z: 5, day:"Thur" },
            { x: new Date(2017, 04, 2, 15, 35), y: 20, z: 5, day:"Sat" },
            { x: new Date(2017, 04, 2, 3, 10), y: 10, z: 5, day:"Sun" },
            { x: new Date(2017, 04, 2, 4, 10), y: 10, z: 5, day:"Sun" }
      ]
    }
  ]
});

chartCustomisation();
chart.render();


function chartCustomisation(){
		var mappingArray = [];
		for(var i = 0; i < chart.options.data[0].dataPoints.length; i++)
		{
			var dataPoint = chart.options.data[0].dataPoints[i];
			if(mappingArray.indexOf(dataPoint.day) < 0)
		  	mappingArray.push(dataPoint.day);
		  dataPoint.y = mappingArray.indexOf(dataPoint.day) + 1;
		}
    
		chart.options.axisY = chart.options.axisY || { };
		chart.options.axisY.labelFormatter = function(e){
		  return mappingArray[e.value-1] || "";
		 };
}