Chart.js: No easy way to dynamically set height of charts in a responsive environment.

Created on 12 Jul 2016 · 17Comments · Source: chartjs/Chart.js

The charts will not respect the height of the window when width and height are set to 100%. Testing across a variety of screen resolutions ended up with many charts overflowing past the visible screen, forcing a vertical scroll bar.

This is true even with responsive: true, and maintainAspectRatio: false settings.

The reason for this is that height is not being defined, even on a parent element with 100% height. So Chart.js simply takes the width and then defaults back to maintaining the aspect ratio of 2:1.

In order for your charts to stay within the height of your visible window, regardless of screen resolution, you need to calculate your screen height and then subtract your other elements.

Here is the code I used to make FULLY RESPONSIVE charts that will fill the height and width of the window, regardless of screen resolution.
HTML:

 <div id="linechartparent">
        <canvas id="myLineChart" class="widgetcanvas"></canvas>
    </div>

Javascript:

function chartStepOne(){
        var currentWindowHeight = $(window).height()
        var canvas = document.getElementById("myLineChart")
        var chartHeight = currentWindowHeight - 220
        var lineChartParent = document.getElementById('linechartparent')
        canvas.width = lineChartParent.clientWidth;
        canvas.height = chartHeight;
        generateLineChart()
    }

Replace the number 220 with your own custom number that represents the height of your header and the other elements between the top of the screen and your chart canvas.

My generateLineChart() function then steps through the normal chart creation steps.

Hope this helps other people who are struggling with making chart.js fully responsive.

documentation

Source

Jaded-Design

👍19 🎉2 👎2 👀1 🚀1 😕1

Most helpful comment

Chart.js 2.4 brings many enhancements around chart sizing and I'm not sure why it's still an issue as long as you wrap your canvas element in a parent - dedicated - div and relatively positioned:

<div id="wrapper" style="position: relative; height: 50vh">
    <canvas id="chart"></canvas>
</div>

```javascript
new Chart(ctx, {
// ... other config ...
options: {
responsive: true,
maintainAspectRatio: false
}
});

If your wrapper doesn't have a relative size, you should be able to *dynamically* change the height of the chart by changing the height of the wrapper:

```javascript
document.getElementById("wrapper").style.height = '128px';

simonbrunel on 21 Nov 2016

👍129 ❤29 🎉27

All 17 comments

Running into this issue as well.

freewil on 15 Jul 2016

❤2

Is this a duplicate of #882 ?

etimberg on 16 Jul 2016

🎉1

The way I understand it is that Chart.js 2.x already uses the width of the parent element (apparently the issue in #882), at least when responsive is set to true.

The problem in this issue is that the responsive setting doesn't seem to respect the height of the parent element, even when maintainAspectRatio is set to false. My goal was to shrink the height of the graph, changing the typical proportions that Chart.js wants to use, so it wasn't taking up all the space "above the fold". I didn't have any luck, and just ended up limiting the width of the chart to 700px.

freewil on 16 Jul 2016

👍4

If I understand correctly, you want to have a responsive canvas with defined height while maintaining its responsiveness, right?

I create an example

Pretty much the html file above is based on the concept below. Setting attribute of canvas either thru server-side rendering or client-side dynamic creation of canvas or hardcoded for static case

  <canvas height=50></canvas>

kimyu92 on 23 Jul 2016

👍2

we need a proper fix for this

hadifarnoud on 5 Oct 2016

👍5

same problem here..

Jmales on 21 Nov 2016

Chart.js 2.4 brings many enhancements around chart sizing and I'm not sure why it's still an issue as long as you wrap your canvas element in a parent - dedicated - div and relatively positioned:

<div id="wrapper" style="position: relative; height: 50vh">
    <canvas id="chart"></canvas>
</div>

```javascript
new Chart(ctx, {
// ... other config ...
options: {
responsive: true,
maintainAspectRatio: false
}
});

If your wrapper doesn't have a relative size, you should be able to *dynamically* change the height of the chart by changing the height of the wrapper:

```javascript
document.getElementById("wrapper").style.height = '128px';

simonbrunel on 21 Nov 2016

👍129 ❤29 🎉27

Tks @simonbrunel , you was save my self