CODEWITHSUNDEEP
canvaschartschart.js
Simon Ferndriger
Simon Ferndriger

Reputation: 4952

Chartjs graphs are not respecting height of container

There are 3 graphs on https://dev.meteo.cam/detail?view=graph. They all should be and stay 200px in height. But they don't. Instead, they break somehow of and overlap. Why is this? I used the same code as in the example.

The interesting thing is, that the chartjs-hidden-iframe actually does have the correct height, but just not the canvas below.

enter image description here

Example code from http://www.chartjs.org/docs/latest/general/responsive.html:

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
   <canvas id="chart"></canvas>

Code used on https://dev.meteo.cam/detail?view=graph

<div class="spaced-mv graphContainer">
    <canvas id="graphTemp"></canvas>
</div>
<style>
    .graphContainer {
        position: relative;
        height:200px;
        width:100%
    }
</style>

At least on mobile devices they look OK. First, I had fix values (width=100, height=25) for the canvas itself which worked on desktop, but was very small in height on mobiles. I just need a good solution that works well both on wide and small screens.

enter image description here

Upvotes: 1

Views: 2774

Answers (1)

Adam Dudley
Adam Dudley

Reputation: 126

It might be trying to maintain aspect ratio, so you might need to turn that option off

options: {
    maintainAspectRatio: false
}

Upvotes: 4

Related Questions