Bar-oneBarGlitch

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 1300px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {

    
        title:{
        text: "# of fruit in basket",  
        fontColor: "grey",
        fontSize: 30,
        padding: 8,
        margin: 20,
        titleFontFamily: "lucida",
        
        
        borderThickness: 1,
        cornerRadius: 10,
        fontWeight: "bold",
      },
        axisX: {
        // labelAngle: 50,
        titleFontSize: 20,
        titleFontColor: "black",
        title: "Fruit",
        labelFontSize: "15",
        interval: 0,       		       	  //No different from automatic
        titleFontFamily: "lucida",
        
      },
      axisY: {
      	
      	titleFontColor: "black",
      	title: "Number of Fruit",
        titleFontFamily: "lucida",

        
      },	
                    

      data: [//array of dataSeries              
        { //dataSeries object

         /*** Change type "column" to "bar", "area", "line" or "pie"***/
         type: "bar",
         dataPoints: [
         { label: "banana", y: 18 },
         { label: "orange", y: 29 },
         { label: "apple", y: 40 },                                    
         { label: "mango", y: 34 },
         { label: "banana", y: 18 },
         { label: "orange", y: 29 },
         { label: "apple", y: 40 },                                    
         { label: "mango", y: 34 },
         { label: "banana", y: 18 },
         { label: "orange", y: 29 },                                 
         { label: "grape", y: 24 }
         ]
       }
       ]
     });

    chart.render();