RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

Hi,
Setting property "textAccessible" gives quite a lot advantages but may cause some problems as well. I wonder if following could be solved: If you are requesting 3d-apearance for bar charts ("variant=3d") then the chart will be displayed with a certain rotation angle. So far so good... But if you then set textAccessible to "true" then the entire canvas will rotated with the same angle as well. Is there a way to avoid this (so that the canvas stays to be displayed horizontally and not rotated)?

If you're thinking of this:

https://codepen.io/rgraph/pen/xxRXGOV

This shows a canvas (the first) without textAccessible and the one on the right has textAccessible enabled.

This is because when the textAccessible option is enabled the wrapper DIV which goes around the canvas, and contains the text, has to be slanted too, in order for the text to appear correctly.

When textAccessible is off there is no wrapper DIV so nothing has to be slanted.

The text in that case is slanted because of the canvas transformation that is in effect.

You could always wrap the canvas in another DIV tag, of your own, and that would be rectangular. You would need to put some padding on it though to accommodate the slanting:

<div style="width: 650px; height: 250px; border: 1px solid red; padding-top: 35px; padding-bottom: 35px">
    <canvas id="cvs2" width="600" height="250" style="border: 1px solid #ccc">[No canvas support]</canvas>
</div>

Hi,
Thanks for your response! Tried your suggestions but w/o success - the canvas only stays rectangular if I specify textAccessible=false - putting the canvas into its own div does not make any difference (besides padding or margin).

I've updated the example for you:

https://codepen.io/rgraph/pen/xxRXGOV

hi,

now I did understand - I had a background image assigned to the canvas and this always is slanted together with the canvas. Now I moved this background to the wrapping div and this (of course) stayes rectangular and everything is fine with or without textAccessible.

hi,

If you use RGraph's responsiveFunction how would you ensure that the canvas always fits into wrapping div if the window is resized? I could not find any clever solution for this.    

I'm not 100% certain of what you mean - would the "parentCss" option be what you need?

Or if you wanted to run some code that interrogates the document you could do that with the "callback" option. I've updated the example with some responsive code that shows both:

https://codepen.io/rgraph/pen/xxRXGOV

Hi,

I had to play a bit with padding but more important: "display:inline-block;" did the trick. Now all works perfectly.