How to change chart height in chart.js?

@daisha 

To change the chart height in Chart.js, you can make use of the chart options provided by the library. Specifically, you can modify the maintainAspectRatio and responsive properties.

The maintainAspectRatio option controls whether the aspect ratio of the chart is maintained, which means if the container size changes, the chart will auto-scale to maintain its aspect ratio. On the other hand, the responsive option makes the chart responsive to the container size.

By default, both maintainAspectRatio and responsive are set to true in Chart.js. To change the chart height, you can set maintainAspectRatio to false and responsive to false as well. This will allow you to control the chart size manually.

Here's an example to change the chart height to a specific value:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var chartOptions = {
    maintainAspectRatio: false,
    responsive: false,
    height: 200 // set the desired height in pixels
};

var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: chartOptions
});

In the example, ctx is the canvas element where the chart will be rendered, data is the data for the chart, and chartOptions is an object containing the chart options, including the desired height. Adjust the height property in the chartOptions object to set the desired chart height.