Column chart with axis customization - CanvasJS JavaScript Charts

Column chart with axis customization - CanvasJS JavaScript Charts

HTML

<script src="http://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

window.onload = function () {

		var chart = new CanvasJS.Chart("chartContainer", {
			animationEnabled: true, 
			animationDuration: 1000, 
			fontColor: "#203a46",
			axisY: {
				labelFontSize: 20,
				labelFontColor: "#203a46",
				valueFormatString: "####",
				 suffix: "M",
				gridThickness: 0, 
				tickLength: 5,
				tickColor: "white",
				tickThickness: 0,
				interval: 1,
				maximum: 3,
				lineThickness: 0,
			},
			axisX: {
				labelFontSize: 20,
				tickLength: 15,
				tickColor: "white",
				tickThickness: 2,
				gridThickness: 0,     
				labelFontColor: "#203a46",
				lineThickness: 0,
			},
			data: [
				{
					indexLabelFontSize: 20,
					indexLabelFontStyle:'aleo-regular-webfont',
					indexLabelFontColor: "white",
					indexLabelOrientation: "horizontal", 
					indexLabelPlacement: "inside" ,
					type: "column",
					toolTipContent: "{label} {y} M",                
					color:'#203a46',
					dataPoints: [
						{ y: 1.11, label: "2011", indexLabel: "1.11M"},
						{ y: 0.95, label: "2012", indexLabel: "0.95M"},
						{ y: 0.88, label: "2013", indexLabel: "0.88M"},
						{ y: 1.88, label: "2014", indexLabel: "1.88M"},
						{ y: 2.33, label: "2015", indexLabel: "2.23M"},
						{ y: 3.1, label: "2016", indexLabel: "3.1M"},
					]
				}
				]
		});

		chart.render();
	
	
}