javascript - Chart.js ignoring canvas height & width - Stack Overflow

admin管理员组

文章数量:1202815

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?

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?

• javascript
• chart.js

Share Improve this question Follow asked Jun 1, 2016 at 20:09 wogslandwogsland 9,5082020 gold badges6161 silver badges9797 bronze badges 1

• if you can get to it, try to set a breakpoint in the core.helper.js file of chartjs and its getting its height from the canvasElementReference.parentNode so if css isnt controlling that, you could add rules for css to style its parent and let the canvasElementReference.parentNode.clientWidth and heights be based off of the css style. Thats the actual code logic if you can follow what i mean itll fix your issue for anyone else that cares – Coty Embry Commented Mar 8, 2019 at 22:31

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 12

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

options: {
  responsive: false
}

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

options : {
    maintainAspectRatio: false
};

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.

本文标签： javascriptChartjs ignoring canvas height amp widthStack Overflow