设置高度后，Chartjs条形图变得模糊

Question

我正在使用chartjs 2.7.3，并且在设置包围画布的div的大小时出现问题，图像模糊并且无法看到字母，如以下屏幕截图所示：

代码是：

<div class="stackedChartClass">
     <canvas #stackedChart></canvas>
</div>

let stackedChartOptions: any = {
  responsive: false,
  legend: {
    position: 'right' // place legend on the right side of chart
  },
  scales: {
    xAxes: [{
      stacked: true // this should be set to make the bars stacked
    }],
    yAxes: [{
      stacked: true // this also..
    }]
  }
}

this.stackedChart = new Chart(pieCtx,
  {
    type: 'bar',
    data: this.stackedChartData,
    options: stackedChartOptions,
    responsive: true
  }
);

和CSS

.stackedChartClass>canvas {
    width: 100% !important;
    height: 50vh !important;
}

如何解决？