Line Chart with Indexlabels & showing Profit / Loss in tooltip based on the values - CanvasJS JavaScript Charts

Line Chart with Indexlabels & showing Profit / Loss in tooltip based on the values - 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: 400px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
	theme: "light2",
  animationEnabled: true,
  exportEnabled: true,
  title: {
  	text: "NG Profit & Loss (By Month)"
  },
  axisX: {
  	title: "Profit & Loss"
  },
  axisY: {
  	title: "Range (in %)",
    suffix: "%",
		includeZero: false
  },
  toolTip: {
  	contentFormatter: function(e){    
    	return (e.entries[0].dataPoint.label + "<br/><b><span style='color: #6d78ad'>" + (Number(e.entries[0].dataSeries.dataPoints[e.entries[0].index].indexLabel) > 0 ? "Profit: </span></b>" : "Loss: </span></b>") + e.entries[0].dataPoint.y +" %")
    }
  },
	data: [
	{
		type: "line",
    name: "Growth",    
    indexLabelFormatter: function ( e ) {
    		console.log(e)
				return "₹ " + e.dataPoint.value;        
		},
    yValueFormatString: "#,##0.0#\"%\"",
		dataPoints: [
			{ label: "January", y: 0, value: 0 },
			{ label: "February", y: -100, value: -110879 },
			{ label: "March", y: -48.67, value: -51738.53 },
			{ label: "April", y: -0.36, value: -456.91 },
			{ label: "May", y: 63.36, value: 29570.58 },
			{ label: "June", y: 38, value: 66375.32 },
			{ label: "July", y: 0, value: 0 },
			{ label: "August", y: 0, value: 0 },
			{ label: "September", y: 0, value: 0 },
      { label: "October", y: 0, value: 0 },
			{ label: "November", y: 0, value: 0 },
			{ label: "December", y: 0, value: 0 }
		]
	}					
	]
});

chart.render();