[Chartjs]-Setting width and height

by

150👍

✅

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

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

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.

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

5👍

You can change the aspectRatio according to your needs:

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

1👍

This helped in my case:

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

0👍

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

0👍

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
            }
        }]
    }
}
});

-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
        }

      }
    },
  });
};

-3👍

Use this, it works fine.

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

and under options,

responsive:true,

Leave a comment