title: How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
body: <p>I'm generating a Chart.JS bar chart that renders like so:</p>
  
  <p><a href="https://i.stack.imgur.com/MtwBO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MtwBO.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the bottom of the legend and the top of the grid/graph are crammed together. Also, the individual bars are scrunched together more than strictly necessary, making the values a little hard to read; note that there is plenty of room left of the red bar and right of the blue bar. And there is plenty of space in the quadrant itself to add a shim or shiv of space between the legend the grid/graph.</p>
  
  <p>How can I "air out" these elements to make the data more legible and the presentation more appealing?</p>
  
  <p>Here is the code being used:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="bottomleft"&gt;
              &lt;h2 class="sectiontext"&gt;Forecast/Impact Analysis&lt;/h2&gt;
              &lt;div class="graph_container"&gt;
                  &lt;canvas id="forecastLineChart"&gt;&lt;/canvas&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      . . .
  </code></pre>
  
  <p>CSS</p>
  
  <p>The "row" and "col-md-6" classes are Bootstrap. "graph_container" must be a Chart.JS class (it's not one of mine).</p>
  
  <pre><code>.bottomleft {
      margin-left: 16px;
      padding: 16px;
      border: 1px solid black;
  }
  
  .sectiontext {
      font-size: 1.5em;
      font-weight: bold;
      font-family: Candara, Calibri, Cambria, serif;
      color: green;
      margin-top: -4px;
  }
  </code></pre>
  
  <p>JAVASCRIPT/jQuery</p>
  
  <pre><code>    var ctxForecastChart = $("#forecastLineChart"); 
      var forecastChartData = {
          labels: ["Total Sales"],
          datasets: [
          {
              label: "8/28/2016 - 9/3/2016",
              backgroundColor: "rgba(255,0,0,0.75)",
              hoverBackgroundColor: "rgba(255,0,0,1)",
              data: [1631437.17]
          },
          {
              label: "9/4/2016 - 9/10/2016",
              backgroundColor: "rgba(255,153,0,0.75)",
              hoverBackgroundColor: "rgba(255,153,0,1)",
              data: [1523898.94]
          },
          {
              label: "9/11/2016 - 9/17/2016",
              backgroundColor: "rgba(255,255,0,0.75)",
              hoverBackgroundColor: "rgba(255,255,0,1)",
              data: [1755669.93]
          },
          {
              label: "9/18/2016 - 9/24/2016",
              backgroundColor: "rgba(0,255,0,0.75)",
              hoverBackgroundColor: "rgba(0,255,0,1)",
              data: [1873205.42]
          },
          {
              label: "9/25/2016 - 10/1/2016",
              backgroundColor: "rgba(0,0,255,0.75)",
              hoverBackgroundColor: "rgba(0,0,255,1)",
              data: [1838204.79]
          }]
  };
  
  var forecastOptions = {
      tooltips: {
          enabled: true
      },
      animation: {
              duration: 500,
              easing: "easeOutQuart",
              onComplete: function () {
                  var ctx = this.chart.ctx;
                  ctx.font 
  Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal'
  Chart.defaults.global.defaultFontFamily);
                  ctx.textAlign = 'center';
                  ctx.textBaseline = 'bottom';
  
                  this.data.datasets.forEach(function (dataset) {
                      for (var i = 0; i &lt; dataset.data.length; i++) {
                          var model = dataset._meta[Object.keys(dataset._met
  [0]].data[i]._model, scale_max = dataset._meta[Object.keys(dataset._met
  [0]].data[i]._yScale.maxHeight;
                          ctx.fillStyle = '#444';
                          var y_pos = model.y - 5;
                          if ((scale_max - model.y) / scale_max &gt;= 0.93)
                              y_pos = model.y + 20;
                          ctx.fillText(addCommas(dataset.data[i]), model.x
  y_pos);
                      }
                  });
              }
          }
      };
  
  var forecastBarChart = new Chart(ctxForecastChart, {
      type: 'bar',
      data: forecastChartData,
      options: forecastOptions
  });
  </code></pre>
  
  <h2>UPDATE</h2>
  
  <p>It's not a complete solution, but I improved it this way:</p>
  
  <pre><code>&lt;canvas id="forecastLineChart" height="190"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>IOW, I added the height value to the canvas, so that the grid/graph now fills the quadrant better:</p>
  
  <p><a href="https://i.stack.imgur.com/LciCm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LciCm.png" alt="enter image description here"></a></p>
  
  <p>It sill could use commas, perhaps, for the y axis numbers, and the bars could spread out horizontally more, though.</p>