Overlay rectangle on ChartView

  • I want to put a number of rectangles as overlays to show regions of interest on a ChartView of ScatterSeries. However when I try to do this it is clearly using a different coordinate system to that of the ScatterSeries as it is drawn in a completely different place.

    For example the following is intended to draw a rectangle that captures all of the ScatterSeries but it just draws a small green rectangle top left as shown in the screenshot.

            ChartView {
                Layout.fillWidth : true
                Layout.fillHeight : true
                Rectangle {
                    x: 30
                    y: 50
                    width: 40
                    height: 10
                    color: "green"
                    XYPoint { x: 30; y: 50 }
                    XYPoint { x: 50; y: 60 }
                    XYPoint { x: 60; y: 50 }
                    XYPoint { x: 70; y: 60 }
                    axisX: ValueAxis {
                        min: 0
                        max: 100
                    axisY: ValueAxis {
                        min: 0
                        max: 100


    The documentation suggests that the rectangle should use the coordinate system of the parent ChartView. I assume I actually want it to use the coordinate system of the ChartView scene. How do I do this?

  • Cannot test charts right now, but you can set, for example z: 10 to your rectangle or declare it after ScatterSeries.

  • @intruderexcluder - That does not change the coordinate system to match that of the plot area so it is still too small and in the wrong place.

Log in to reply