After update to latest version from v2.0.2 setting option responsive as true leads to auto scaling of chart

[rajeshyogeshwar]

Previously, I used v2.0.2 of this library and having configuration as responsive: true worked for me. Now on updating the library to newer version same config results in the chart scaling automatically once rendered. If I set responsive to false, the chart is rendered small and non responsive. I went through the docs but nothing has changed in that regard.

[brbrr]

From docs:

responsive: true Resizes the chart canvas when its container does.

So if you define width for container element - it will resize canvas accordingly.
But the problem here that width from <canvas> is just ignored, and replaced with container values

<div style="max-width: 500px">
  <canvas id="blah" width="300" height="300"></canvas>
</div>

Renders as:

<div style="max-width: 500px"><iframe ...></iframe>
  <canvas id="blah" width="500" height="500" style="display: block; width: 500px; height: 500px;"></canvas>
</div>

[simonbrunel]

@Rajesh-Yogeshwar can you please post a fiddle that shows the difference between 2.0.2 and 2.4.0?

@brbrr why having the canvas width and height properties also resized to the container size an issue when responsive: true?

[brbrr]

@simonbrunel im not sure I get your question. Here you can check my issue: https://jsfiddle.net/poxw55w1/

Im not sure that resizing to container size is expected behaviour

[simonbrunel]

What the expected behavior? Your fiddle looks fine to me, what the issue?

Note: if you don't want he canvas size to change, you can turn it off: responsive: false

[rajeshyogeshwar]

@simonbrunel I was trying to generate a fiddle but it seems to work fine there. Its not helpful but I am attaching three screenshots that I took in quick succession to demo auto scaling

[rajeshyogeshwar]

@brbrr In my case the width and height attributes on canvas are in continuous state of increment until my browser hangs.

[simonbrunel]

Can you please upload that page somewhere, that we can debug it? Did you try maintainAspectRatio: false? Also, your containing div must be relatively positioned (see this comment).

[rajeshyogeshwar]

Yes maintainAspectRatio is set to false. Found something interesting based on your comment, I mean I tried in the fiddle I was generating.

<div class="column">
  <fieldset>
    <legend>Chart</legend>
    <canvas id="chart"></canvas>
  </fieldset>
</div>

This is how my DOM is where class column has position:relative (came with framework that I use). <fieldset> in itself does not have any CSS. Now for the same DOM in v2.0.2 it works absolutely fine but breaks on v2.4.0.

Is this how it is supposed to be?

[simonbrunel]

Maybe introduced by 0b19689 to fix issue #2538.

Anyway, when using responsive: true, you should always use a dedicated div:

<div class="column">
    <fieldset>
        <legend>Chart</legend>
        <div class="chart-wrapper">
            <canvas id="chart"></canvas>
        </div>
    </fieldset>
</div>

with stylesheet:

.chart-wrapper {
    position: relative;
    height: 512px;
}

If that doesn't fix your issue, we will need access to your page.

[brbrr]

@simonbrunel Looks like my issue is kinda offtopic..

According to my previous usage(2.0 beta) and docs I can set canvas size within canvas tag, and use default chart options like so:

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {...},
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

And I was expecting to get 400x400 canvas element. Which is wrong, and now size of canvas will be inherited from its parent. I was confused by documentation.

[simonbrunel]

So that means simply disable responsive: false fixes your issue, right?

[brbrr]

Yes, disabling responsive helps.

[rajeshyogeshwar]

@simonbrunel adding div wrapper around chart helps. But given that fieldset does wrap the chart, it should have worked right? Correct me if I am wrong.