How can I resize the canvas to 100% of the screen width?

« 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 Bram Crins on 9th April 2013

I i'm almost done with my graphs.
They are working on phones, tablets and PC's.

I calculate the size of the sceen in advance and put this in the canvas width.
Now this calculation is not always calculating the right width. So i put a style on the canvas.

<canvas id="cvs3" style="width:100%; height:300px;">

Now the layout of the graph is not that good anymore.
How can i get the canvas to cover 100% of the width available?

Thanks in advance.
Posted by RGraph support on 9th April 2013
Hi there,

You shouldn't use the CSS width/height properties to set the dimensions of the canvas - use the HTML attributes instead. So for example:

myCanvas.width = 1000;
myCanvas.height = 300;

To get the size of the window you'll need to interrogate the DOM - you might have luck with document.body.offsetWidth

Posted by Bram Crins on 9th April 2013

Thank you for your response.

Solved it with the following :

document.write('<canvas id="cvs3" width="' + $(window).width() + '" height="300">[No canvas support]</canvas>');


Posted by Dan on 2nd June 2013
I am also struggling with this, I tried Bram's script but was unsuccessful. I have also tried inserting:
tank.width = $(document).width();
windowWidth = $(window).width();
tank.Set('chart.canvas.width', windowWidth);
into the script tag, but to no avail.

Could you direct me a little further into implementing this into the script and the canvas tags?

Posted by RGraph support on 2nd June 2013
Hi there,

First - check that this is what you think it is by using alert():

windowWidth = $(window).width();

Then - this is wrong:

tank.Set('chart.canvas.width', windowWidth);

There is no RGraph property to control the width. You need to set the width on the canvas tag, like this:

tank.canvas.width = windowWidth;


Richard, RGraph Support
Posted by Dan on 2nd June 2013
Just wanted to let you know, I figured it out. Spent all day for one tiny aspect...moving on...

Thanks anyway,
Posted by Brad on 7th July 2013
Doing this, is there anyway to get the labels to scale as well? I've tried using RGraph.Redraw(), but the labels don't scale with the height and width of the canvas.
Posted by Brad on 7th July 2013
Sorry, by labels I meant the tooltips. They do not resize with the resizing of the graph, and the RGraph.Redraw() function really seems to do nothing.
Posted by RGraph support on 7th July 2013
Hi there,

No - for that you'd need to use your browsers zoom function - which is usually accessed by pressing CTRL and + or -.

Richard, RGraph support
Posted by Brad on 8th July 2013
Using the browsers zoom function isn't really a feasible option when trying to keep the chart at 100% width and responsive.

Perhaps you misunderstood my question or I explained poorly. When the canvas is resized, the hover position of the tooltips stays the same. Their activation location does not properly scale with the canvas. So they all retain their original positions. I'm talking about the position at which they are activated, and not their size. So lets say the chart is 300x200, then goes to 800X400, all of the tooltips will be activated inside of the 300x200 range of the chart, no longer acurtley portraying the data that is hover over.

It seems like the resizeing function could be split out into a callable function accepting height and width so we could do this pragmatically instead of as a user interaction.
Posted by RGraph support on 8th July 2013
Hi there,

What you're talking about would mean taking the scaling effect achieved by using the CSS width/height into account as well as the width/height HTML attributes into account.Which is doable but there are no plans for this at the moment.

Richard, RGraph support

Add a reply

« Back to message list