RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 17 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
Get the latest version of RGraph (version 6.20, 1st December 2024) from
the download page. You can read the changelog here. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
Posted by Joachim at 16:48 on Sunday 21st February 2021[link]
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)?
Posted by Richard at 17:33 on Sunday 21st February 2021[link]
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:
Posted by Joachim at 18:21 on Sunday 21st February 2021[link]
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).
Posted by Richard at 18:36 on Sunday 21st February 2021[link]
Posted by Joachim at 18:52 on Sunday 21st February 2021[link]
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.
Posted by Joachim at 11:00 on Monday 22nd February 2021[link]
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.
Posted by Richard at 11:29 on Monday 22nd February 2021[link]
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: