title: Chart.js : bar spacing in horizontal bar chart
body: <p><a href="http://i.stack.imgur.com/YqY0h.png" rel="noreferrer">horizontal bar chart</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  var barOptions_stacked1 = {
                  tooltips: {
                      enabled: true
                  },
                  hover: {
                      animationDuration: 0
                  },
                  scales: {
                      xAxes: [{
                              ticks: {
                                  beginAtZero: true,
                                  fontFamily: "'Open Sans Bold', sans-serif",
                                  fontSize: 11
                              },
                              scaleLabel: {
                                  display: false
                              },
                              gridLines: {
                              },
                              stacked: true
                          }],
                      yAxes: [{
                              barThickness: 20,
                              gridLines: {
                                  display: false,
                                  color: "#fff",
                                  zeroLineColor: "#fff",
                                  zeroLineWidth: 0
                              },
                              ticks: {
                                  fontFamily: "'Open Sans Bold', sans-serif",
                                  fontSize: 11
                              },
                              stacked: true
                          }]
                  },
                  legend: {
                      display: true
                  },
                  pointLabelFontFamily: "Quadon Extra Bold",
                  scaleFontFamily: "Quadon Extra Bold"
              };
              var ctx1 = document.getElementById("Chart1");
              var myChart1 = new Chart(ctx1, {
                  type: 'horizontalBar',
                  data: {
                      labels: ["BU 5", "BU 4", "BU 3", "BU 2", "BU 1"],
                      datasets: [{
                              data: [727, 589, 537, 543, 574],
                              backgroundColor: "rgba(63,103,126,1)",
                              hoverBackgroundColor: "rgba(50,90,100,1)",
                              label: "newly request"
                          }, {
                              data: [238, 553, 746, 884, 903],
                              backgroundColor: "rgba(163,103,126,1)",
                              hoverBackgroundColor: "rgba(140,85,100,1)",
                              label: "in progress"
                          }, {
                              data: [1238, 553, 746, 884, 903],
                              backgroundColor: "rgba(63,203,226,1)",
                              hoverBackgroundColor: "rgba(46,185,235,1)",
                              label: "active"
                          }, {
                              data: [1338, 553, 746, 884, 903],
                              backgroundColor: "rgba(255,169,188,1)",
                              hoverBackgroundColor: "rgba(255,99,132,1)",
                              label: "in approval"
                          }, {
                              data: [1438, 553, 746, 884, 903],
                              backgroundColor: "rgba(136,202,247,1)",
                              hoverBackgroundColor: "rgba(54,162,235,1)",
                              label: "recycle"
                          }, {
                              data: [1538, 553, 746, 884, 903],
                              backgroundColor: "rgba(196,232,116,1)",
                              hoverBackgroundColor: "rgba(152,177,98,1)",
                              label: "reject"
                          }]
                  },
                  options: barOptions_stacked1
              });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="Chart1"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to reduce spacing between bars.
  I tried categorySpacing, barValueSpacing...
  But nothing works!
  It looks fine in small width, but when full screen width, it height increases because of the spacing between bars.
  Inline css for canvas doesnt work as it is overrided by default chartjs.
  Also, I am not able to set height of chart while initializing chart : 
  ctx1.canvas.height = 300;
  It doesnt work!
  jsfiddle link<a href="https://jsfiddle.net/u46aprq4/" rel="noreferrer">link</a></p>