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

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.

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

Thankyou so much. Resolved.

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

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.

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.

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.

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