I have a dynamic canvas size and now I need dynamic guttering

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Schultz on 31st July 2013
Before I start my question, I just wanted to say thank you! You guys are awesome and have great support.

Now, I currently have a dynamic canvas size using:

     width = $(window).width();

In my canvas I have both a line chart and a bar graph. However, I have them guttered to fit a canvas of size 1400x900; that was what I had it at while developing the canvas. I was wondering if there was a way to gutter dynamically also and keep the ratios? Right now it just crashes the scripts when the page is loaded.

Thanks again!

Posted by RGraph support on 1st August 2013
Hi there,

To set the size dynamically you need to set the size on the canvas HTML attribute and then, importantly, redraw the chart since changing the canvas dimensions clears it. So:

var width = $(window).width();
bar.canvas.width = width;

//Set the gutters for the new width
bar.Set('chart.gutter.right', (width * 0.5) + 25);
line.Set('chart.gutter.left', width * 0.5);


This puts the bar chart on the left and the Line chart on the right - with 25px seperating them in the middle.


Add a reply

« Back to message list