HelloGraphs

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

 import QtQuick
 import QtQuick.Layouts
 import QtGraphs

 Item {
     id: mainView
     width: 1280
     height: 720

     RowLayout  {
         id: graphsRow

         readonly property real margin:  mainView.width * 0.02

         anchors.fill: parent
         anchors.margins: margin
         spacing: margin

         Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
             color: "#262626"
             border.color: "#4d4d4d"
             border.width: 1
             radius: graphsRow.margin
             GraphsView {
                 anchors.fill: parent
                 anchors.margins: 16
                 theme: GraphTheme {
                     colorTheme: GraphTheme.ColorThemeDark
                 }
                 BarSeries {
                     axisX: BarCategoryAxis {
                         categories: [2024, 2025, 2026]
                         gridVisible: false
                         minorGridVisible: false
                     }
                     axisY: ValueAxis {
                         min: 20
                         max: 100
                         tickInterval: 10
                         minorTickCount: 9
                     }
                     BarSet {
                         values: [82, 50, 75]
                         borderWidth: 2
                         color: "#373F26"
                         borderColor: "#DBEB00"
                     }
                 }
             }
         }

         Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
             color: "#262626"
             border.color: "#4d4d4d"
             border.width: 1
             radius: graphsRow.margin

             GraphsView {
                 anchors.fill: parent
                 anchors.margins: 16
                 theme: GraphTheme {
                     readonly property color c1: "#DBEB00"
                     readonly property color c2: "#373F26"
                     readonly property color c3: Qt.lighter(c2, 1.5)
                     colorTheme: GraphTheme.ColorThemeDark
                     gridMajorBarsColor: c3
                     gridMinorBarsColor: c2
                     axisXMajorColor: c3
                     axisYMajorColor: c3
                     axisXMinorColor: c2
                     axisYMinorColor: c2
                     axisXLabelsColor: c1
                     axisYLabelsColor: c1
                 }

                 component Marker : Rectangle {
                     width: 16
                     height: 16
                     color: "#ffffff"
                     radius: width * 0.5
                     border.width: 4
                     border.color: "#000000"
                 }

                 SeriesTheme {
                     id: seriesTheme
                     colors: ["#2CDE85", "#DBEB00"]
                 }

                 LineSeries {
                     id: lineSeries1
                     theme: seriesTheme
                     axisX: ValueAxis {
                         max: 5
                         tickInterval: 1
                         minorTickCount: 9
                         labelDecimals: 1
                     }
                     axisY: ValueAxis {
                         max: 10
                         tickInterval: 1
                         minorTickCount: 4
                         labelDecimals: 1
                     }
                     width: 4
                     pointMarker: Marker { }
                     XYPoint { x: 0; y: 0 }
                     XYPoint { x: 1; y: 2.1 }
                     XYPoint { x: 2; y: 3.3 }
                     XYPoint { x: 3; y: 2.1 }
                     XYPoint { x: 4; y: 4.9 }
                     XYPoint { x: 5; y: 3.0 }
                 }

                 LineSeries {
                     id: lineSeries2
                     theme: seriesTheme
                     width: 4
                     pointMarker: Marker { }
                     XYPoint { x: 0; y: 5.0 }
                     XYPoint { x: 1; y: 3.3 }
                     XYPoint { x: 2; y: 7.1 }
                     XYPoint { x: 3; y: 7.5 }
                     XYPoint { x: 4; y: 6.1 }
                     XYPoint { x: 5; y: 3.2 }
                 }
             }
         }
     }
 }