Can't make chart js responsive

Question

sorry if I missed anything to fix my issue, I've read and tried many solutions without any of them being adapted to the problem.

I have several charts (from chart.js) on a single page, but I can't succeed to make them responsive, despite :

responsive: true,

The best responsive display I could get was when enlarging canvas width and height, but on the desktop version charts were displayed the entire screen.

Here is a fiddle.net

Anybody to help me ? Thank you very much.

score 18 · Accepted Answer · answered Mar 15 '17 at 17:30

The answer is :

1. add a div around the canvas

for example :

<div class="wrapper">
    <canvas width="600" height="250"></canvas>
</div>

2. add height to the div class in the css

.wrapper {
height: 500px !important;
}

(adjust height as you wish the responsive rendering)

score 14 · Answer 2 · answered Jun 11 '20 at 16:04

14

maintainAspectRatio: false sorted me out on a similar problem. The default value is true.

answered Jun 11 '20 at 16:04

Swaleh Matongwa

698
9
16

This should be much more clear in the documentation! – Whelkaholism Apr 06 '22 at 09:52
Doesn't even make sense why this works /: – Matt Jensen Mar 02 '23 at 17:51
The document now has [the section](https://www.chartjs.org/docs/latest/configuration/responsive.html#important-note) that explains this situation. – holydragon Jun 08 '23 at 09:31

score 11 · Answer 3 · answered Feb 28 '18 at 13:55

11

Bootstrap has an example page, which has a chart (using chartjs) that is responsive. So, I would point to that URL, which can be downloaded and we have a responsive chart.

Dasbhoard Example showing Reponsive Chart

answered Feb 28 '18 at 13:55

Krishna Vedula

1,643
1
27
31

score 11 · Answer 4 · answered May 21 '19 at 07:06

I know this is an old post, but recently came across it.

Please check https://www.chartjs.org/docs/latest/general/responsive.html#important-note

It basically says that,

Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size".
Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false."

For Example,

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

It was the "maintainAspectRatio: false" that I missed. Thanks! — Jay McVety, May 13 '20 at 02:12

score 6 · Answer 5 · edited Jun 20 '20 at 09:12

6

You can make the container divs responsive using CSS and make svg width: 100% and height:100%

Here is updated fiddle fiddle.net

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 20 '17 at 09:12

Amit

3,662
2
26
34

It creates 1 column of text and charts on the left of the page. – Blue Agency Feb 20 '17 at 09:46

Gh111 · Answer 6 · 2019-04-11T12:53:22.320

I had a similar situation and based on chartjs documentation I had to add responsive: true in my options section, but it didn't solve my problem! Finally I noticed that parent element of canvas is flexbox! Removing that solved my problem!

P.S Official documentation says that adding some style or width/height attributes to canvas tag is invalid! Below is snippet from docs

The following examples do not work:

<canvas height="40vh" width="80vw">: invalid values, the canvas doesn't resize (example) <canvas style="height:40vh; width:80vw">: invalid behavior, the canvas is resized but becomes blurry

Hope my answer can help someone!

thanks :) same here. removing `display: flex` helped – Systems Rebooter Feb 05 '21 at 17:39 — Systems Rebooter, Feb 05 '21 at 17:39

score 5 · Answer 7 · answered Feb 20 '17 at 09:20

5

As I saw in fiddle, you have given fixed height and width to canvas tag.

Try to give both height and width 70% or 80% for canvas tag. This may solve your problem.

100% may be give full large charts bt try to limit them to 70 to 80.

answered Feb 20 '17 at 09:20

Akash Thakkar

83
11

I've tried width/height in percentage but the issue is the same. – Blue Agency Feb 20 '17 at 09:35
Try to limit the corresponding div in fixed height and width and canvas in percentage. This may help. @BlueAgency – Akash Thakkar Feb 20 '17 at 09:41

vishalknishad · Answer 8 · 2020-11-01T05:31:25.600

2

Instead of giving height and width attribute, set them through style:

<canvas id="myChart" style="height: 20rem"></canvas>

edited Nov 01 '20 at 05:31

answered Sep 20 '19 at 15:12

vishalknishad

690
7
12

score 1 · Answer 9 · answered Feb 20 '17 at 09:16

1

I've found that with Chart.js, you need a containing div where you manipulate the css(height/width), which will help the responsiveness - but not fully. There are some constraints especially with the width, as the containing div might leave a lot of whitespace on the bottom/sides, since the canvas won't fully adjust to the containing width as a percentage. It isn't perfect, but it works.

So, as a solution: Make a containing div for each chart, and place it using CSS styles for this div :)

answered Feb 20 '17 at 09:16

cbll

6,499
26
74
117

My charts are displayed in groups of 2 on my page. Each group is wrapped in a div container as I use Bootstrap, then each chart is in a div "class=row". I tried to apply to these different divs width and height in percentage, and even max-width and max-height, but nothing works. – Blue Agency Feb 20 '17 at 09:43
Can you make a containing div for the two rows that has width/height=100%, and then divide it down on two containing divs - one for each component? – cbll Feb 20 '17 at 09:49
You mean `
` ?? No better display... – Blue Agency Feb 20 '17 at 10:12
No, sorry if I'm not concise. You remove the width/height from the canvas itself, and only apply it to the parent div of each canvas as a percentage. Might wanna try adding display: inline-block; to the canvasses themselves. – cbll Feb 20 '17 at 10:14
I tried this, but no improvement. I even tried to apply a class to canvas when `@media screen and (max-width: 479px)` but nothing works, I don't understand why – Blue Agency Feb 20 '17 at 10:49

score 1 · Answer 10 · answered May 07 '20 at 01:53

i tried all what the documents said but no chance,so i managed by my self:

<section style="padding: 0px">    
 <div class="chart-container" style="position: relative; margin: auto; height:167px; width: 1492px;">
         <canvas id="Graph"></canvas>
     </div>
 </section>
    <script>
    $(window).load(function() {
      $( window ).resize(function() {
         $('#Graph').closest('.chart-container').css('width',$('#Graph').closest('section').width());
      });
    });
    </script>

the idea here to change the width or the height or both when the window resized.

score 0 · Answer 11 · answered Jul 09 '19 at 03:50

Because of can't use media queries to set width and height, I set width and height attribute by detect mobile or desktop, like below

HTML

<canvas id="chart" width="{{width}}" height="{{height}}"></canvas>

javascript - angularjs

$scope.width = '';
$scope.height = '120';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
   $scope.width = '100';
   $scope.height = '100';
}

score 0 · Answer 12 · edited Jun 15 '21 at 13:31

0

from chart.js

Responsiveness can then be achieved by setting relative values for the container size:
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>
The chart can also be programmatically resized by modifying the container size: chart.canvas.parentNode.style.height = '128px';

edited Jun 15 '21 at 13:31

Wai Ha Lee

8,598
83
57
92

answered Jun 15 '21 at 13:26

Litaf Kupfer

1

Can't make chart js responsive

12 Answers12

Linked