CODEWITHSUNDEEP
javascripthtmlchartschart.js
user3572565
user3572565

Reputation: 741

Changing width of chart.js chart without changing height

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?

Upvotes: 3

Views: 1805

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

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/

Upvotes: 2

Related Questions