How to remove paddings in Bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bar Chart

Description

How to remove paddings in Bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js"></script> 
      <style id="compiled-css" type="text/css">

canvas {/*from   w w w .j a v a2  s.com*/
   border: solid 1px black;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var originalCalculateXLabelRotation = Chart.Scale.prototype.calculateXLabelRotation
Chart.Scale.prototype.calculateXLabelRotation = function () {
    originalCalculateXLabelRotation.apply(this, arguments);
    this.xScalePaddingRight = 0;
    this.xScalePaddingLeft = 0;
}
var falloutArray = [12, 24, 20, 15, 18, 20, 22, 10, 10, 12, 14, 10, 16, 16];
var dataWeeksFallouts = {
    labels: ["16.02", "17.02", "18.02", "19.02", "20.02", "21.02", "22.02", "23.02", "24.02", "25.02", "26.02", "27.02", "28.02", "01.03"],
    datasets: [{
        label: "Fallouts",
        fillColor: "rgba(63,107,245,0.67)",
        //strokeColor: "rgba(220,220,220,0.8)",
        //highlightFill: "rgba(220,220,220,0.75)",
        //highlightStroke: "rgba(220,220,220,1)",
        data: falloutArray
    }]
};
var fc = document.getElementById('weeksChartFallout').getContext('2d');
window.weeksChartFallout = new Chart(fc).Bar(dataWeeksFallouts, {
    //scaleLineColor: "transparent",
    //scaleShowGridLines : false,
    barShowStroke: false,
    barValueSpacing: 4, //distance between bars
    barValueWidth: 20,
    scaleFontSize: 0.001,
    scaleShowLabels: false,
    scaleFontColor: "transparent",
    tooltipEvents: []
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="weeksChartFallout" width="660" height="200"></canvas>  
   </body>
</html>

Related Tutorials