Chart.js aspect ratio / forced height

Question

I'm trying to use chart.js to create thumbnails which will link to pages with the full chart.

The full chart on the linked page looks good but the for the thumbnail I just can't get the sizing right. The canvas is covering the right area but the graph doesn't fill it vertically.

var data = {
    labels: ['','','','','','','','','',''],
    datasets: [{
        data:[22,25,23,24,25,22,25,23,24,25],
            backgroundColor: "rgba(54, 255, 170, 0.4)",
            borderColor: "rgba(54, 255, 170, 1)",
            orderWidth: 1,
    }]
};
var options = {
    tooltips: false,
    legend: {
        display:false
    },
    scales: {
        yAxes: [{
            display:false,
            ticks: {
                beginAtZero:true
            }
        }],
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }]
    }
};
            
new Chart($("#chart-"+this.model.id), {
    type: 'bar',
    data: data,
    options: options        
});

I've tried things like adjusting the min-height of the canvas but that causes the bars to blur. Is there any way I can adjust the height of the bars to occupy the whole canvas?

Answer 1

Actually in Chart.js 3.2.1 to update the aspect ratio to add more height to your scheme you can use the aspectRatio option:

options: {          
   aspectRatio: 1, 
}

And so according to the documentation:

Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style.

You can set it such as:

• 1 for it to be square
• 0.5 to be twice as high as wide
• 2 to be twice as wide as high