title: Chart.js canvas : can't center it
body: <p>I'm trying to display a Chart.js graph inside a <code>&lt;canvas&gt;</code>, and this canvas is wrapped inside a <code>&lt;div&gt;</code>.
  I want the graph to be responsive, have a fixed height of 700px and a width of 80% of the page's width. On top of all, I want this graph to be centered inside the page ! My code is below</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='chartContainer'&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.chartContainer{
      text-align: center;
  }
  
  canvas{
      width: 80% !important;
      height: 700px !important;
      margin: 0;
  }
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>new Chart(canvasContext, {
      type: 'line',
      data: {
          labels: hourLabels,
          datasets: dataToRender
      },
      options: {
          responsive: true,
          maintainAspectRatio: false
  });
  </code></pre>
  
  <p>My problem is : I can't center it, the <code>&lt;div&gt;</code> takes the whole page but the <code>&lt;canvas&gt;</code> seems to have a margin applied to it even though it doesn't appear inside the DOM console... </p>
  
  <p><a href="https://i.stack.imgur.com/oOYun.png" rel="noreferrer">Screenshot of the apparent margin</a></p>
  
  <p>Can anyone point my problem ? Thank you very much :-)</p>