Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - 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", {
  data: [
    {
      type: "bar",
      dataPoints: [
        { label: "What if the bouncy square ate the devil?", x: 10, y: 71 },
        { label: "Did the negligible load really wonder the creative?", x: 20, y: 55 },
        { label: "The racial wing bares into the oafish year.", x: 30, y: 50 },
        { label: "What if the flawed chemical ate the international?", x: 40, y: 65 },
        { label: "The excellent literature arranges into the zany error.", x: 50, y: 95 },
        { label: "The huge strip can't overflow the produce.", x: 60, y: 68 },
        { label: "What if the dimpled promise ate the roof?", x: 70, y: 28 },
        { label: "It was then the silent guitar met the suburban dirt.", x: 80, y: 34 },
        { label: "Is the extend dinner better than the contact?", x: 90, y: 14 },
      ]
    }					
  ]
});

chart.render();

if(chart.get("width") <= 500) {
  var axisX = chart.get("axisX");  
  for(var i = 0; i < axisX.length; i++) {
    axisX[i].set("labelFormatter", function(e){
      return "";
    });
  }
}