How do I increase size of chart area?

« 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 Wrox on 20th June 2014
Hello Rechard,

When I am increasing size of chart area. it gets distorted. Is there some ration for height and width ?

Posted by Richard on 20th June 2014
When you use the CSS width/height to set the canvas dimensions the number of pixels on the canvas doesn't change - the canvas is scaled up or down.

To set the width/height you need to set the HTML width/height attributes. But doing so will clear the canvas so after you set them you'll need to call RGraph.redraw().

You could also use the resizing feature to allow users to do it themselves:

Posted by Wrox on 23rd June 2014
Hi Richard,

I mean when I am setting canvas height and width it needs some type of ratio.

Right now I set

             var body = document.getElementById('CanvasBody');
             var divContainer = document.getElementById('CanvasContainer');
             $(body).attr('class', 'defaultColor canvasBodyDetailed');
             $(divContainer).attr('class', 'canvasContainerDetailed');
             $(cvsChartDetails).attr('class', 'canvasDetailed');
             * Remove click event.
             $(cvsChartDetails).attr('onclick', 'javascript:#');
             * Set size of the canvas for 'Report View'
             cvsChartDetails.width = 700;
             cvsChartDetails.height = 380;
             * Set style as required in 'Report View'.------------------------------
             bar.Set('hmargin', 5);


If I change this ration to

             cvsChartDetails.width = 850;
             cvsChartDetails.height = 400;

Everything get distorted. I mean legends comes some where else. Tooltip showup at different location then it sholuld have.

Please help me for height and width ratio.
Posted by Richard on 23rd June 2014
There's no "aspect ratio" - RGraph simply uses the whole canvas to draw the chart. To control the area that it uses you can adjust the gutters appropriately.

If you want to get the initial ratio you cou do this:

ratio = height / width;

And then use that after you set a new width (of, for example, 800):

newheight = newwidth * ratio;


Add a reply

« Back to message list