Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting width and height [closed]

Tags:

html

css

chart.js

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.

How/where am I supposed to control the width/height of the chart?

like image 590
Fellow Stranger Avatar asked Jun 03 '16 18:06

Fellow Stranger


People also ask

How can I set the height and width of an image?

Example. The width attribute specifies the width of an image, in pixels. Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.

What is the normal width and height of a website?

Page height, width and alignment Before smartphones and tablets became popular, web designers created fixed width pages that worked on the most common screen sizes - usually 1024 pixels wide by 768 pixels high.


1 Answers

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

like image 99
KpTheConstructor Avatar answered Sep 20 '22 08:09

KpTheConstructor