Query about the resolution of charts

« 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 Chuan Guo on 5th January 2016

at first, thanks very much for the brilliant util!
I'm just trying to find out a good charts tool for
our customer, the RGraph has many Pros, I would like
to use it in our new project :)

But customer just reaches an issue, they feel that the
the charts from RGraph is not so sharp, at the beginning
is just a feeling, then when we zoom the charts in
Browser (like Ctrl-+), they are right! in comparison
with HighChart, the Charts from RGraph have a really
lower resolution, this is why charts from HighChart
and others looks sharper & therefore better.

So my question is, could I configure this with RGraph?

also D3 is better in this point, I'm not expert in this
area, maybe it is just a piece of cake for you...

Thank you very much for the help!
Posted by Richard on 5th January 2016

That's the nature of of canvas. It's a bitmap and doesn't automatically scale up. SVG on the other hand is a vector and does. On the other hand canvas is really fast (it can handle video easily for example).

Posted by Chuan Guo on 5th January 2016
Hi Richard,

thank you for the prompt reply!

but we don't need videos ;) although it is bitmap,
couldn't we make them sharper? I mean, to feel sharper,
like just some more resolution?

Posted by Richard on 5th January 2016

Nothing that happens automatically. You could use the window.resize event to resize the canvas when the window is zoomed. Eg (assume that "bar" is your chart object; also using jQuery):

window.onresize = function ()
     var width, height;

     // Get the window width with jQuery
     if ($(window).width() <= 960) {
         width = 400;
         height = 150;
     } else {
         width = 650;
         height = 200;

     // Reset antialiasing
     bar.canvas.__rgraph_aa_translated__ = false;

     bar.canvas.width = width;
     bar.canvas.height = height;

     // Also adjust the text size too


You could also set something going with setTimeout() that runs every second checking the resolution and adjust the canvas size and things like text size

Posted by Chuan Guo on 5th January 2016

OK, got it, it's automatically.

Thank you for the tip, Actually we don't need Zoom,
customer just find the charts are not so sharp,
especially compare to other SVG Libs...

I'm going to discuss with them, at least, I would like
use RGraph as a choice.

thank you again for the help,

Add a reply

« Back to message list