title: chartjs chart spilling out of container
body: <p>I have a chartjs chart, after I changed x axis's date format, the chart is spilling out of its container. It seems to be affected by that but I need for the format to stay dd-mm-yyyy. Can anyone think of why its doing that? I've tried changing the maintain aspect ratio/ responsive booleans around, i've tried changing the height and width of the canvas and that does nothing as well.</p>
  <p>my coding:</p>
  <pre><code>   &lt;div&gt;
      &lt;canvas id=&quot;Chart&quot; width=&quot;400&quot; height=&quot;200&quot;&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  var ctx = document.getElementById(&quot;Chart&quot;).getContext('2d');
  var recentActivityChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: [],
          datasets: [{
              label: 'hours',
              data: [],
              barThickness: 12,
              fill: true,
              backgroundColor: &quot;rgba(54, 162, 235, 1)&quot;,
              borderColor: &quot;rgba(54, 162, 235, 1)&quot;,
              borderWidth: 1,
          }]
      },
      options: {
          animation: {
              duration: 1000,
              easing: &quot;linear&quot;,
          },
          responsive: true,
          maintainAspectRatio: true,
          legend: {
              display: false,
              position: 'bottom',
              usePointStyle: true,
              labels: {
                  fontColor: &quot;grey&quot;,
                  usePointStyle: true,
              },
          },
          scales: {
              yAxes: [{
                  gridLines: {
                      display: true,
                      borderDash: [8, 4],
                  },
                  scaleLabel: {
                      display: true,
                      labelString: 'hours',
                  },
                  ticks: {
                      beginAtZero: false,
                  }
              }],
              xAxes: [{
                  type: 'time',
                  time: {
                      unit: 'day',
                      displayFormats: {
                          day: 'DD-MM-YYYY'
                      },
                  },
                  gridLines: {
                      scaleShowVerticalLines: false,
                      display: false,
                  },
                  ticks: {
                      beginAtZero: false,
                  }
              }]
          },
      }
  });
  &lt;/script&gt;
  </code></pre>
  <p>heres what it is appearing like :</p>
  <p><a href="https://i.stack.imgur.com/QZ7F3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QZ7F3.png" alt="enter image description here" /></a></p>