can't set ChartJS canvas width

Question

I can not get ChartJS to restrict itself to 200px. It takes the entire width of the browser. What am I missing.

I am using the following CDN

<div id="pnlChart" style="height:200px" >
   <canvas id="myChart" width="400" height="200" class="chart" ></canvas>
</div>

my data that is being returned from the server appears to be well formed and drawing the chart correctly. It does not have the width/height in it. (I have pulled this from Chrome's dev tools.

{"type":"line","labels":[0,2,6,7,8,9,10,11,12,13,14,1,3,4,5,15,16,17,18,19,20,21,22,23],"datasets":[{"label":"Data","data":[2,1,8,36,119,179,214,165,87,173,220,0,0,0,0,0,0,0,0,0,0,0,0,0]}]}

Bobulous Bobulous · Accepted Answer · 2016-07-19T19:32:49

You should be able to disable this container-width filling behaviour by telling Chart.js not to use responsive mode. Try passing this into the global configuration of the chart (the highest level of options):

options: {
    responsive: false
}

See the Chart.js documentation for an example of how this fits into the full definition of a chart.

If that does not work for some reason then you could instead limit the width of the div element which contains the canvas on which your graph is drawn. Based on your example you could add this to your CSS:

div#pnlChart {width: 200px}

Even if you can get one of these methods to work, ideally you don't want to be specifying fixed widths for items these days because it makes it harder for pages to display well on the myriad of device screens which are in use now.

It's much better to develop a responsive layout for your site which will adjust to suit any screen width, from small smartphones to large desktop monitors. Search online for guides about "responsive design" for articles about this subject.

can't set ChartJS canvas width

1 Answers