Issue with the visibility of other elements when using ChartView in QML.

[unknown user]

I'm using ChartView to plot my histogram, and I've added a Rectangle line as a discriminator that overlays the histogram like a differentiator. However, when the chart is initially rendered, the discriminator appears hidden beneath the chart until I interact with it such as dragging or clicking the move button over the screen.

Item {
id: wbcchartview
height: 457
width: 649
anchors.left: parent.left
anchors.leftMargin: 11
anchors.top: parent.top
anchors.topMargin: 93

Rectangle{
    id: rectangle
   color: "#1A1A1A"
   anchors.fill: parent
   radius: 5
    }

    ChartView {
        id:zoomedHistogram
        x: 0
        y: 0
        z: 0
        width: 100 + 400*1.25
        height: 394
        legend.visible: false
        antialiasing: true
        property var wbcXaxisLimit: 400/128

        property var d1: Number(wbcDescriminators[0])
        property var d2: Number(wbcDescriminators[1])
        property var d3: Number(wbcDescriminators[2])
        property var d4: Number(wbcDescriminators[3])
        property var wbcStringList: wbcString.split("$")

        ValueAxis {
            id: axisX
            min: 0
            max: 400
            gridVisible: false
            tickCount: 9
            color: "#FFFFFF"
            tickType: ValueAxis.TicksFixed
        }

        ValueAxis {
            id: axisY
            min: 0
            max: 256+ 44
            tickCount: 6
            gridVisible: true
            lineVisible: false
            labelsVisible: false
            gridLineColor: "#BF404040"
        }
        Label
                                   {
                                       id:lblflag
                                      anchors.right: zoomedHistogram.right
                                      anchors.top: zoomedHistogram.top
                                      anchors.topMargin: 70
                                      anchors.rightMargin: 50
                                       color: "yellow"
                                       font.family: 'Roboto'
                                       font.pixelSize: 10
                                      // anchors.fill: parent
                                       text: wbcDescriminators.toString().match(/@ @(-[^@]+)@/)[1]
                                   }

        AreaSeries {
            axisY: axisY
            axisXTop: axisX
            color: "#E8E8E8"
            borderWidth: 0
            borderColor: "transparent"

            upperSeries: LineSeries {
                id: series1
            }
        }

        Component.onCompleted: {

            console.log("wbcDescriminators",wbcDescriminators)


            var maxValue = 0
            for(var j = 0; j <= 127; j++){
                if(parseInt(zoomedHistogram.wbcStringList[j]) > maxValue){
                    maxValue = parseInt(zoomedHistogram.wbcStringList[j])
                }
                else{
                    maxValue = maxValue
                }
            }
            var wbcYaxisLimit = 255/maxValue

            for(var i = 1; i <= 128; i++){
                series1.append(i*zoomedHistogram.wbcXaxisLimit, zoomedHistogram.wbcStringList[i-1]*wbcYaxisLimit);
            }
        }
        backgroundColor: "transparent"

    }

    Item{
        id : itemcombined
        z: 50

        Item{
            id: element1
            x: 56
            width: zoomedHistogram.d1/.256
            anchors.top: zoomedHistogram.bottom
            anchors.topMargin: 4
            height: 34
            z: 4
            y: zoomedHistogram.y + zoomedHistogram.height + 4

            Rectangle{
                id: colourRect
                color: ma.pressed ? "#2094FA" : "#3F3F3F"
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 0
                anchors.top: parent.top
                anchors.topMargin: 0
                width: parent.width
            }
            Rectangle{
                id: colourLine
                color: ma.pressed ? "#2094FA" : "#363636"
                z: 200
                anchors.horizontalCenter: movingbutton.horizontalCenter
                anchors.bottomMargin: - 40
                width: 1
                height: zoomedHistogram.height + 5
                anchors.bottom: movingbutton.top

            }

            Rectangle{
                id: movingbutton
                height: 16
                width: 16
                radius: width/2
                anchors.verticalCenter: parent.verticalCenter
                x: parent.width
                color: "#000000"
                property var previous: 0
                onXChanged: {
                
                    colourRect.width = x + 8
             
                    if(previous>=movingbutton.x)
                        var asdf = Math.ceil(.256*movingbutton.x)
                    else
                        asdf = parseInt(.256*movingbutton.x)
                    previous = movingbutton.x
       
             
                    zoomedHistogram.d1 = Number(asdf)
                    if(ma.pressed){
                        window.onDraggedDescriminator()
                        window.totalSum()
                    }
                }

                MouseArea{
                    id: ma
                    enabled: parameters.totalSumWBC>0 ? true : false
                    anchors.fill: parent
                    drag.target: parent
                    drag.maximumX: zoomedHistogram.d2/.256 - 5
                    drag.minimumX: 0
                }
                Rectangle{
                    width: 5
                    height: 5
                    radius: width/2
                    color: ma.pressed ? "#2094FA" : "#363636"
                    anchors.centerIn: parent
                }
            }
        }