My SemiCircularProgress bar is appearing above my navigation bar - Official support forum | RGraph.net

My SemiCircularProgress bar is appearing above my navigation bar

Post a reply

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 images:
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]
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 Richard at 11:00 on Thursday 23rd June 2022 [link]
Ok, I've set up an example here:

https://www.rgraph.net/tests/canvas.semicircularprogress/_blank.html

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.

Post a reply

What's your name?
What do you want to say?