Chartview - Drawing rectangles in the plotarea - qt

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
}
}