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.
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.
The text on my charts is not always shown correctly
Posted by Alek at 04:10 on Sunday 13th March 2022[link]
Chart elements like titles, labels and texts are not showing at their designated position if drawn inside of hidden elements, their X and Y coordinates are 0. After unhiding a parent element and redrawing the chart all text related elements are drawn back to their assigned coordinates.
Any help is greatly appreciated
Thanks,
Alek
Posted by Richard at 11:18 on Sunday 13th March 2022[link]
Try setting the textAccessible option to false:
textAccessible: false
This changes RGraph from using DOM-based text to canvas-drawn text. You may need to adjust/increase the size of the margins on the chart because the text will be limited by the extent of the canvas tag.
Posted by Alek at 23:17 on Sunday 13th March 2022[link]
Unfortunately setting "textAccessible" to false in options did not work
I apologize for not being clear on the issue and therefore let me explain again
I have a collapsable (accordion style) divs with charts whithin them. The divs stay collapsed by default with charts loaded on background. When I click to expand the div to show the charts, then all text objects on charts within that div move to the top (bar, horizontal bar, segmented charts), even center text of the segment chart is not staying in place. If I keep the div expanded and reload the charts then everyting renders correctly
Posted by Richard at 11:58 on Monday 14th March 2022[link]
Eh? Really? It sounds like it might not be having an effect then because the textAccessible option changes RGraph to use regular old native canvas text which isn't affected by anything DOM related. For example, this demo page has the textAccessible option set to false:
Notice that if you press CTRL+A to select all, the text on the chart doesn't highlight.
On your page you can press CTRL+A to select all of the text on the page and if you have the textAccessible option successfully set to false the text on the chart (eg the scale/labels/title etc) should not highlight.
Conversely, if the textAccessible option is still in effect the text will be highlighted.
Another option that you may be able to use is calling the RGraph.redraw() method when your accordion shows a new chart. As the name suggests this redraws all of the charts on the page. There's also an RGraph.redrawCanvas(canvas) method that allows you to just redraw a specific canvas.
Posted by Richard at 12:31 on Monday 14th March 2022[link]
Another option that I've just thought of that you may want to consider is using an SVG chart.
The text on an SVG chart shouldn't be affected by DOM nodes being shown/hidden like this.
There's not such a huge variety of SVG charts available, but the main ones are supported and the implementation/configuration of them is very similar to the canvas charts.
Here's a link to the SVG documentation on the website: