Line Chart showing Internet Speed in Mbps using labelFormatter and contentFormatter - CanvasJS JavaScript Charts

Line Chart showing Internet Speed in Mbps using labelFormatter and contentFormatter - 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: "Internet Speed in Mbps"
  },
	axisY: {
  	labelFormatter: function(e){
    	var bits = e.value;
    	var megaBits = Math.floor(bits / Math.pow(10,6));
      return CanvasJS.formatNumber(megaBits, "#,##0") + "Mbps";
    }
  },
  toolTip: {
  	contentFormatter: function(e){
    	var bits = e.entries[0].dataPoint.y;
      var megaBits = Math.floor(bits / Math.pow(10,6));
      return e.entries[0].dataPoint.x + ": " + CanvasJS.formatNumber(megaBits, "#,##0") + "Mbps";
    }
  },
  data: [{
    type: "line",
    dataPoints: [
      { x: 10, y: 20311514949 },
      { x: 20, y: 1544949464 },
      { x: 30, y: 17344549464 },
      { x: 40, y: 10942572363 },
      { x: 50, y: 18534654765 }
    ]
  }]
});

chart.render();