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?
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With