Angular chartjs高度不跟随父容器

注意：我已修复问题2，数据错误。我仍然面临问题1。 我有下面的折线图配置。数据集的示例数据是

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

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

此外，我还有html（我使用angular flex布局）和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;

{{chart}}
//希望我可以改变画布的大小，使其与父级相同
const canvas=document.getElementById（'canvasGraph'）；
canvas.width=document.getElementById（'graph'）.offsetWidth；
canvas.height=document.getElementById（'graph'）。offsetHeight；

我有2个（现在只剩下1个）问题：

最外层的div高度为100%。但由于某种原因，id=“graph”的高度变为150。画布也是150。我不知道这150是从哪里来的

然而，图表上的数据显示，它们都杂乱无章地分布在最右侧，我在1973年至2016年的x轴值中找到了它们。但我的数据只有2017年。我尝试过更改“bounds”和“tick.source”属性，但什么也没发生。 （我更新了标题，因为我已经解决了这个问题，这是由错误的数据造成的）

---

我终于解决了我的问题。现在，图表已做出响应

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

canvas {
  width: 100% !important;
}

---

我相信我已经提出了正确的要求，并给出了我的代码和尝试的解决方案。