Column chart with axis customization - CanvasJS JavaScript Charts

Column chart with axis customization - CanvasJS JavaScript Charts

by canvasjs

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

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,
      indexLabelFontFamily:'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();