CODEWITHSUNDEEP
javascriptchart.js
wogsland
wogsland

Reputation: 9518

Chart.js ignoring canvas height & width

Following the Chart.js documentation I am trying to draw a small chart:

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels:['15-2016','16-2016','17-2016',],
    datasets:[
      {
        label:'Yes',
        data:[3.4884,1.1628,1.3514,],
        backgroundColor:'rgba(75,192,192,1)',
        borderColor:'rgba(75,192,192,1)',
        pointRadius:0
      },
      {
        label:'Maybe',
        data:[0.5571,1.3298,0.791,],
        backgroundColor:'rgba(255,206,86,1)',
        borderColor:'rgba(255,206,86,1)',
        pointRadius:0
      },
      {
        label:'No',
        data:[0,0,0,],
        backgroundColor:'rgba(255,99,132,1)',
        borderColor:'rgba(255,99,132,1)',
        pointRadius:0
      }
    ]
  }        
});
</script>

However, when the page is rendered the canvas somehow becomes

<canvas style="height: 929px; width: 929px;" id="myChart" width="1858" height="1858"></canvas>

which is waaaaay too big for my needs. How can I set the width and height of the canvas to be what I want?

Upvotes: 15

Views: 8353

Answers (3)

J E Carter II
J E Carter II

Reputation: 1506

Using Both options, maintainAspectRatio: false AND responsive: false seem to do the trick of making the chart fit the canvas as sized in the canvas height and width tags.

Upvotes: 1

Patrick Dorn
Patrick Dorn

Reputation: 768

I solved the problem by adding "maintainAspectRatio: false" to the options.

options : {
    maintainAspectRatio: false
};

Upvotes: 5

wogsland
wogsland

Reputation: 9518

I was able to hardcode the size of the graph by turning off responsiveness:

options: {
  responsive: false
}

Upvotes: 12

Related Questions