CODEWITHSUNDEEP
javascripthtmlcsschart.js
Jake
Jake

Reputation: 55

Chart.js Graph Overrunning Container

I'm displaying Chart.js graphs in containers and they are not respecting their size and are instead overrunning them.

In chart config I have:

responsive: true,
maintainAspectRatio: false,

The html is as follows:

<div class="graph-container">
    <div class="graph-wrapper">
        <canvas id="myChart" class="graph-canvas" width="300" height="300"></canvas>
    </div>
</div>

And the according CSS is:

.graph-container {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: $blue;
    display: none;
}

.graph-wrapper {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: block;
}

Note: the display: none; on .graph-container is changed on a button click.

The container is displaying at the correct size but just being overran considerably by the graph.

Any thoughts would be much appreciated.

Thanks
Jake

Upvotes: 2

Views: 585

Answers (1)

Jake
Jake

Reputation: 55

Removing the height and width attributes on my canvas html element solved my issue. After doing so, the graph would stop displaying in a square aspect ratio and adapt to it's container.

Upvotes: 1

Related Questions