更改chart.js图表​​的宽度而不更改高度

Question

I am using the sample of the line chart.

When I change width to another value here.

    <div style="width:30%">
        <div>
            <canvas id="canvas" height="450" width="600"></canvas>
        </div>
    </div>

The chart increases in height as well as width. I have tried specifying height too, but it never works. It always makes the height big too.

Does anyone know how to adjust the width while keeping the height the same?

Answer 1

If you are trying to make the chart fill the container (and use that for sizing) you need maintainAspectRatio = false in conjunction with responsive = true

var ctx = document.getElementById("canvas").getContext("2d");
var myLine1 = new Chart(ctx).Line(lineChartData1, {
    maintainAspectRatio: false,
    responsive: true
});

Your canvas height and width won't be respected in this case.

Fiddle - http://jsfiddle.net/s816dk83/