Changing width of chart.js chart without changing height

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/