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   See example  How where am I supposed to control the width height of the chart   This is some bogus text because SO prohibits linking to Codepen otherwise

User · Answer

Use this  it works fine    lt canvas id  totalschart  style  height 400px width  content-box   gt  lt  canvas gt    and under options   responsive true

User · Answer

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

User · Answer

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

User · Answer

Works for me too  responsive true maintainAspectRatio  false    lt div class  row  gt           lt div class  col-xs-12  gt               lt canvas id  mycanvas  width  500  height  300  gt  lt  canvas gt           lt  div gt       lt  div gt    Thank You

User · Answer

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

User · Answer

I cannot believe nobody talked about using a relative parent element   Code      lt div class  chart-container  style  position  relative  height 40vh  width 80vw  gt     lt canvas id  chart  gt  lt  canvas gt   lt  div gt    Sources  Official documentation

User · Answer

You can also simply surround the chart with container  according to official doc http   www chartjs org docs latest general responsive html important-note    lt div class  chart-container  gt       lt canvas id  myCanvas  gt  lt  canvas gt   lt  div gt    CSS   chart-container       width  1000px      height 600px     and with options  responsive true maintainAspectRatio  false

User · Answer

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

User · Answer

You can change the aspectRatio according to your needs  options        aspectRatio 4    width height

User · Answer

This helped in my case   options        responsive  true      scales            yAxes                 display  true              ticks                    min 0                  max 100

[chart.js] Setting width and height

Examples related to chart.js