About

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 use for showing charts on your website.

Download

Get the latest version of RGraph (version 6.18, 1st June 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.

Download »

License

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

My semi-circular progress Bar is appearing above my navigation bar

Posted by Vyshak K at 09:20 on Tuesday 21st June 2022 [link]

I have a fixed div to show the main heading of my page. This div will remain fixed if I scrolls down/up the page. Below this div, I have placed a SemiCircularProgress chart. And now when I scrolls up my web page this chart scrolls above the fixed div as shown in the screenshot attached. It should not. It should go behind the fixed div. I have tried with bar and line chart of Rgraph. which is not showing this issue.
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.semicircularprogress.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.bar.js"></script>
Seems like RGraph.semicircularprogress.js causing the issue. I have tried to place the canvas inside a div and set it's style as style="z-index: 0;position: relative". But no change in the result.
Please help.

Attached image:

Posted by Richard at 10:02 on Tuesday 21st June 2022 [link]

Try setting the z-index of the navigation bar to a high value. For example, the black navigation bar on this website has a z-index value of 1000.

z-index: 1000

Posted by Vyshak K at 10:06 on Tuesday 21st June 2022 [link]

Thankyou so much. Resolved.

Posted by Richard at 13:20 on Wednesday 22nd June 2022 [link]

After looking into this a bit more, it seems that it may be being caused by the DOM text code, which necessarily manipulates the DOM structure and wraps the canvas in a DIV tag.

So another option to resolve this would be to turn off accessible text, which you can do like this:

textAccessible: false

Posted by Vyshak K at 05:55 on Thursday 23rd June 2022 [link]

function SemiCIrcularChart(currentbalance,Maxcapacity) {
            new RGraph.SemiCircularProgress({
                id: 'cvs1',
                min: 0,
                max: Maxcapacity,
                value: currentbalance,
                options: {
                     colors: ['#F13328','#FD9C96'],
                    tooltips: ['Balance'],
                    scaleDecimals: 0,
                    scaleUnitsPost: 'Ltr',
                    labelsCenterSize: 18,
                    textColor: 'gray',
                    textAccessible: false
                }
            }).draw();
        }

Z - index is removed and added the textaccessible as above. But shows same issue.

Posted by Vyshak K at 05:55 on Thursday 23rd June 2022 [link]

Posted by Richard at 11:00 on Thursday 23rd June 2022 [link]

Ok, I've set up an example here:

[REMOVED]

I noticed that setting "position: relative" on the canvas caused it to appear above the top nav bar - so if you can try removing that.

Or just go back to setting the navigation bar back to having a z-index value of 1000 - I would imagine that you'd always want the nav bar on top of everything so it makes good sense to me to do that.

Posted by Vyshak K at 12:01 on Thursday 23rd June 2022 [link]

Yes it is working with z-index value of 1000. I will try with the relative option too. Thankyou for the quick response.

[Replies are closed]