title: chartjs height does not follow parent container
body: <p>Note:  I have fixed issue #2, it's wrong data.  I am still facing issue #1.
  I have the following config for a line chart.  My example data for a dataset is</p>
  
  <p>{x: '29/01/2017', y: '0.00234'}</p>
  
  <pre><code>options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          format: 'DD/MM/YYYY'
        }
      }]
    }
  }
  </code></pre>
  
  <p>Also, I have the html (I use angular flex-layout) and typescript:</p>
  
  <pre><code>&lt;div fxFlex style="height: 100%"&gt;
      &lt;div id="graph"&gt;
          &lt;canvas id="canvasGraph"&gt;{{chart}}&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  // Hoping I can change the size of canvas to be the same as the parent
  const canvas = &lt;HTMLCanvasElement&gt;document.getElementById('canvasGraph');
  canvas.width = document.getElementById('graph').offsetWidth;
  canvas.height = document.getElementById('graph').offsetHeight;
  </code></pre>
  
  <p>I have 2 (now only 1 left) issues:</p>
  
  <ol>
  <li><p>The outermost div height is 100%.  But for some reason, the height of the id="graph" becomes 150.  And the canvas is also 150.  I don't know where this 150 came from.</p></li>
  <li><p>The data shows on the graph however, they all cluttered on the right-most side and I have in the x-axis values from 1973 to 2016.  But my data only has 2017.  I have tried changing the "bounds" and "tick.source" properties but nothing happen.
  (I updated the title as I already fixed this, it's caused by wrong data)</p></li>
  </ol>