Chartview - Drawing rectangles in the plotarea

Question

I'm currently developping a qml application and I need to specify various area in the plotArea.

I'm drawing rectangles but my scatterseries dot are not visible because drawn behing the rectangle. I tried to add transparency, or to set a z value somewhere but it is not giving a good result. It is possible with qwidget qcharts and I'm looking to do the same in qml.

Here a working sample of code with my issue (if I comment the rectangles' part the dots are visible)

import QtQuick 2.15
import QtCharts 2.3

ChartView {
id: test

width: 600
height: 400

animationOptions: ChartView.NoAnimation
theme: ChartView.ChartThemeDark
legend.visible: false

ValueAxis {
    id: axisX
    min: 0
    max: 100
}
ValueAxis {
    id: axisY1
    min: 0
    max: 100
}

Rectangle {
    id: rect1
    color: "red"
    border.width: 2
    width: plotArea.width * 4 / 10
    height: plotArea.height * 4/15
    x: plotArea.x
    y: plotArea.y
    Text {
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.top: parent.top
        anchors.topMargin: 8
        text: qsTr("Rectangle 1")
    }
}

Rectangle {
    id: rect2
    color: "orange"
    border.width: 2
    width: plotArea.width * 6 / 10
    height: plotArea.height * 4 / 15
    x: rect1.x + rect1.width
    y: plotArea.y
    Text {
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.top: parent.top
        anchors.topMargin: 8
        text: qsTr("Rectangle 2")
    }
}

Rectangle {
    id: rect3
    color: "orange"
    border.width: 2
    width: plotArea.width * 4 / 10
    height: plotArea.height * 7 / 15
    x: plotArea.x
    y: rect1.y + rect1.height
    Text {
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.top: parent.top
        anchors.topMargin: 8
        text: qsTr("Rectangle 3")
    }
}

Rectangle {
    id: rect4
    color: "green"
    border.width: 2
    width: plotArea.width * 6 / 10
    height: plotArea.height * 7 / 15
    x: rect3.x + rect3.width
    y: rect3.y
    Text {
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.top: parent.top
        anchors.topMargin: 8
        text: qsTr("Rectangle 4")
    }
}

Rectangle {
    id: rect5
    color: "gray"
    width: plotArea.width
    height: plotArea.height * 4 / 15
    x: plotArea.x
    y: rect3.y + rect3.height
    border.color: "black"
    border.width: 2
}

ScatterSeries {
    axisX: axisX
    axisY: axisY1
    color: "blue"
    XYPoint {
        x: 10
        y: 10
    }
    XYPoint {
        x: 98
        y: 5
    }
    XYPoint {
        x: 95
        y: 89
    }
    XYPoint {
        x: 5
        y: 75
    }
    markerShape: ScatterSeries.MarkerShapeRectangle
}
}

I didn't find a solution on the documentation or online.

The closed question I found is Qml ChartView with sections for X Axis points but they was no answer

Answer 1

I found a solution by drawing AreaSeries.

import QtQuick 2.15
import QtCharts 2.3


ChartView {
id: test

width: 600
height: 400

animationOptions: ChartView.SeriesAnimations
theme: ChartView.ChartThemeDark
legend.visible: false

ValueAxis {
    id: axisX
    min: 0
    max: 100
}
ValueAxis {
    id: axisY1
    min: 0
    max: 100
}

AreaSeries{
    axisX: axisX
    axisY: axisY1
    color: "red"
    upperSeries: LineSeries {
        XYPoint { x: 0; y: 50}
        XYPoint { x: 75; y: 50}
    }
    lowerSeries: LineSeries {
         XYPoint { x: 0; y: 0}
         XYPoint { x: 75; y: 0}
     }
}
AreaSeries{
    axisX: axisX
    axisY: axisY1
    color: "orange"
    upperSeries: LineSeries {
        XYPoint { x: 75; y: 50}
        XYPoint { x: 100; y: 50}
    }
    lowerSeries: LineSeries {
         XYPoint { x: 75; y: 0}
         XYPoint { x: 100; y: 0}
     }
}
AreaSeries{
    axisX: axisX
    axisY: axisY1
    color: "green"
    upperSeries: LineSeries {
        XYPoint { x: 0; y: 100}
        XYPoint { x: 100; y: 100}
    }
    lowerSeries: LineSeries {
         XYPoint { x: 0; y: 50}
         XYPoint { x: 100; y: 50}
     }
}

ScatterSeries {
    axisX: axisX
    axisY: axisY1
    color: "blue"
    XYPoint {
        x: 10
        y: 10

    }
    XYPoint {
        x: 98
        y: 5
    }
    XYPoint {
        x: 95
        y: 89
    }
    XYPoint {
        x: 5
        y: 75
    }
    markerShape: ScatterSeries.MarkerShapeRectangle
}

}