'Chartjs bar chart blurry when height is set

I am using chartjs 2.7.3 and I have a problem when setting the size of the div that encloses canvas the image is blurry and letters are not visible like the screenshot below:

The code is:

<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
  }
);

and the css

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

How can this be fixed?

Solution 1:^[1]

I added this to options and the blur effect was gone.

    responsive: true,
    maintainAspectRatio: false,

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Single-byte

'Chartjs bar chart blurry when height is set

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]