chartjs height does not follow parent container

Question

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

{x: '29/01/2017', y: '0.00234'}

options: {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        format: 'DD/MM/YYYY'
      }
    }]
  }
}

Also, I have the html (I use angular flex-layout) and typescript:

<div fxFlex style="height: 100%">
    <div id="graph">
        <canvas id="canvasGraph">{{chart}}</canvas>
    </div>
</div>

// Hoping I can change the size of canvas to be the same as the parent
const canvas = <HTMLCanvasElement>document.getElementById('canvasGraph');
canvas.width = document.getElementById('graph').offsetWidth;
canvas.height = document.getElementById('graph').offsetHeight;

I have 2 (now only 1 left) issues:

1. 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.

2. 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)

Answer 1

I finally solved my problem. Now the chart is responsive.

#graph{
  position: relative;
  height: 100%;
  width: 100% !important;
}

canvas {
  width: 100% !important;
}