Setting width and height

Question

I'm trying out the example code for Chart.js given in the docs.

Width and height is specified inline on the canvas element at 400px/400px.

But when rendering the chart it's blown up to full page width, and cuts off the far right end.

How/where am I supposed to control the width/height of the chart?

Don't circumvent the rules to post a link to a CodePen; follow what the rules say and include a [mcve] instead. — TylerH, Jun 03 '21 at 16:38

score 147 · Accepted Answer · edited Nov 20 '17 at 14:45

147

You can override the canvas style width !important ...

canvas{

  width:1000px !important;
  height:600px !important;

}

also

specify responsive:true, property under options..

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

update under options added : maintainAspectRatio: false,

link : http://codepen.io/theConstructor/pen/KMpqvo

edited Nov 20 '17 at 14:45

Evhz

8,852
9
51
69

answered Jun 03 '16 at 18:32

KpTheConstructor

3,153
1
14
22

15

Thank you, your `maintainAspectRatio: false` made the chart viewable. But still cutting off the right side though. Hitting these kind of issues already with their own basic example code makes me wonder wether chart.js is a good bet. (The right side is still cut off...) – Fellow Stranger Jun 03 '16 at 18:45
That solves the problem of graph size, the graph hasn't scaled to fit it. Is there a way to set the graph size from within Chart.js? – Firix Oct 30 '17 at 21:49
9

Turns out that you need to turn off responsive to make the graph obey the sizes given to it. Shame that there doesn't seem to way to control it and maintain the responsive nature... – Firix Oct 30 '17 at 21:55
2

Using "!important" is not the right way of solving this even though it works. @Nicolas solution below "wrapping the canvas in a div" is a better way as we would have control over resizing the canvas in a way we want it to be. – Abhishek Boorugu Jun 09 '20 at 11:23
+1 to the above. Don't use this method. It doesn't look right if you force the canvas size like this. Use @Nicolas's solution below. – BlueVoid Jun 21 '21 at 15:47
`canvas{ width:100% !important; height:600px !important; }` and `maintainAspectRatio: false,` solved my issue. Thanks. – Kamlesh Dec 18 '22 at 16:30

score 100 · Answer 2 · edited Dec 16 '22 at 05:18

100

You can also simply surround the chart with container (according to official doc http://www.chartjs.org/docs/latest/general/responsive.html#important-note)

HTML

<div class="chart-container">
   <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
   width: 1000px;
   height:600px
}

And with options

responsive: true
maintainAspectRatio: false

edited Dec 16 '22 at 05:18

Atena Dadkhah

623
1
5
19

answered Feb 28 '18 at 21:43

Nicolas

1,157
1
8
4

2

This works. The key here is to use an outer div and set the width and height on that rather than the canvas element. – John Doherty Dec 02 '18 at 11:14
1

In order for this to work, chart-container should be relatively positioned. – Sanju Feb 27 '20 at 13:50
works for me but only with `!important` in Angular project – Артур Гудиев Sep 29 '20 at 21:01

score 36 · Answer 3 · answered Jan 19 '18 at 23:19

36

In my case, passing responsive: false under options solved the problem. I'm not sure why everybody is telling you to do the opposite, especially since true is the default.

answered Jan 19 '18 at 23:19

Antimony

37,781
10
100
107

1

Same here. Setting `responsive: true` completely skewed the appearance of the chart. – Paul Nov 27 '19 at 16:18
works for me but only with `!important` in my Angular project – Артур Гудиев Sep 29 '20 at 21:01

R. Gurung · Answer 4 · 2021-09-26T11:09:07.130

17

I cannot believe nobody talked about using a relative parent element.

Code:

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

Sources: Official documentation

edited Sep 26 '21 at 11:09

answered Jun 02 '20 at 12:42

R. Gurung

1,356
1
14
34

Its worth noting too, that for some reason the `width` AND `height` need to be set, you cannot simply set `height` as I was trying to do. – Chud37 Nov 01 '21 at 11:32
1

This seems to be the only solution that doesn't compromise the responsiveness of the chart. Thank you! – sk311 Jan 22 '22 at 18:09

score 5 · Answer 5 · edited Nov 19 '20 at 19:13

5

You can change the aspectRatio according to your needs:

options:{
     aspectRatio:4 //(width/height)
}

edited Nov 19 '20 at 19:13

Jeremy Caney

7,102
69
48
77

answered Nov 19 '20 at 17:18

Yashvendar Badsiwal

59
1
1

2

Can you clarify how this works? `4` is not an aspect ratio. Your comment says `(width/height)` but it's unclear how that should be applied. Is there a way of passing that as a set? Or do you literally mean to divide the proposed width by the proposed height, such that e.g., 3:4 becomes `0.75`? – Jeremy Caney Nov 19 '20 at 19:15
works but don't no how. Solved my issue by the way. – Muhammad Ahsan Feb 17 '22 at 09:45

score 1 · Answer 6 · answered May 18 '20 at 06:54

1

This helped in my case:

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

answered May 18 '20 at 06:54

Omid N

947
2
11
24

score 0 · Answer 7 · answered Jul 30 '19 at 11:27

0

Not mentioned above but using max-width or max-height on the canvas element is also a possibility.

answered Jul 30 '19 at 11:27

Ukuser32

2,147
2
22
32

score 0 · Answer 8 · answered Apr 15 '20 at 15:20

The below worked for me - but dont forget to put this in the "options" param.

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

score -2 · Answer 9 · edited Jun 03 '21 at 16:41

-2

You can create a div to wrap the canvas tag,

    <div class="wrap">
     <canvas id="myChart"></canvas>
    </div>

    .grafico{
      width: 400px !important;
    }

any changes in js chart options

var myChart = new Chart(ctx, {
    type: 'bar', //doughnut, bar, line, radar, pie, polarArea
    data: data,
    options: {

      scales: {
        y: {
          beginAtZero: true,
          stepSize: 1
        }

      }
    },
  });
};

edited Jun 03 '21 at 16:41

TylerH

20,799
66
75
101

answered Apr 26 '21 at 13:49

esleyder ordoñez

1
1

Howis your answer different from [this one](https://stackoverflow.com/a/49039089/6367213)? – Janez Kuhar Apr 26 '21 at 14:41

score -3 · Answer 10 · answered Nov 23 '17 at 04:34

-3

Use this, it works fine.

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

and under options,

responsive:true,

answered Nov 23 '17 at 04:34

Udara Herath

805
2
18
37

Setting width and height

10 Answers10

Linked