AreaSeris in Graphs does not show unless modified at runtime

When using a AreaSeries inside a GraphsView the area series isn't shown unless one of the points inside the AreaSeries is changed at runtime.

When using the code example at https://code.qt.io/cgit/qt/qtgraphs.git/tree/examples/graphs/2d/cockpit/qml/cockpit/ArtificialHorizon.qml?h=6.8

the artificial horizon is drawn with two area series and then animated using FrameAnimation. If the FrameAnimation is commented out then only the cyan area series (id: upperArea) is shown filling the whole area. If that AreaSeries is commented out then the green Areaseries (id: lowerArea) isnt shown at all.

This was tested on an NXP IMX8  with a linux Yocto distro and qt version 6.8.3

 

A copy of  ArtificialHorizon.qml from the example:

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtGraphs

Item {
    id: root
    anchors.fill: parent

    ColumnLayout {
        id: col
        anchors.fill: root
        spacing: 0

        Rectangle {
            color: "black"
            Layout.preferredHeight: root.height * 0.1
            Layout.fillWidth: true
            border.color: "white"
            border.width: 2
            z: 1

            Text

{                 color: "white"                 antialiasing: true                 font.bold: true                 font.family: "Akshar"                 font.pointSize: 16                 anchors.centerIn: parent                 text: "PRIMARY FLIGHT DISPLAY"             }

        }

        GraphsView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.leftMargin: -80
            Layout.rightMargin: -25
            Layout.topMargin: -20
            Layout.bottomMargin: -60

            theme: GraphsTheme

{                 backgroundVisible: false                 plotAreaBackgroundColor: "#00000000"             }

            axisX: ValueAxis

{                 max: 10                 subTickCount: 9                 lineVisible: false                 gridVisible: true                 subGridVisible: false                 labelsVisible: false                 visible: false             }

            axisY: ValueAxis

{                 max: 10                 subTickCount: 9                 lineVisible: false                 gridVisible: true                 subGridVisible: false                 labelsVisible: true                 visible: false             }

            AreaSeries {
                id: lowerArea
                color: "green"

                upperSeries: LineSeries

{                     id: lowerLine                     XYPoint \{x: 0; y: 3}

                    XYPoint {x: 10; y: 4}
                }

                lowerSeries: LineSeries

{                     XYPoint \{x: 0; y: 0}

                    XYPoint {x: 10; y: 0}
                }
            }

            //! [1]
            AreaSeries {
                id: upperArea
                color: "cyan"

                upperSeries: LineSeries

{                     XYPoint \{x: 0; y: 10}

                    XYPoint {x: 10; y: 10}
                }

                lowerSeries: LineSeries

{                     id: upperLine                     XYPoint \{x: 0; y: 3}

                    XYPoint {x: 10; y: 4}
                }
            }

            FrameAnimation {
                running: true
                onTriggered:

{                     upperLine.replace(0, upperLine.at(0).x, Math.sin(elapsedTime) + 6)                     upperLine.replace(1, upperLine.at(1).x, Math.cos(elapsedTime) + 6)                     lowerLine.replace(0, lowerLine.at(0).x, Math.sin(elapsedTime) + 6)                     lowerLine.replace(1, lowerLine.at(1).x, Math.cos(elapsedTime) + 6)                     barSet.values = [Math.sin(elapsedTime) + 5]                 }

            }
            //! [1]
        }
    }

}