Simple Scatter Graph

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

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

 Item {
     id: mainView
     width: 800
     height: 600

     property int iconDimension: 38
     property int margin: 30
     property int spacing: 10
     property int radius: 6
     property int buttonMinWidth: 175

     Data {
         id: seriesData
     }

     Theme3D {
         id: themeQt
         type: Theme3D.Theme.Qt
         font.pointSize: 40
     }

     Theme3D {
         id: themeRetro
         type: Theme3D.Theme.Retro
     }

     component CustomButton : RoundButton {
         id: buttonRoot
         property alias source: iconImage.source

         Layout.minimumWidth: buttonMinWidth
         Layout.fillWidth: true

         radius: mainView.radius

         background: Rectangle {
             radius: mainView.radius
             color: "white"
             border.color: "black"
         }
         contentItem: Row {
             id :content
             IconImage {
                 id: iconImage
                 width: iconDimension
                 height: iconDimension
                 color: "transparent"
             }
             Label {
                 text: buttonRoot.text
                 horizontalAlignment: Text.AlignLeft
                 anchors.verticalCenter: parent.verticalCenter
             }
         }
     }

     ColumnLayout {
         id: mainLayout
         anchors.fill: parent
         anchors.margins: margin
         spacing: spacing
         GridLayout {
             Layout.fillWidth: true
             rowSpacing: spacing
             columnSpacing: spacing

             columns: mainView.width < mainView.buttonMinWidth * 2 + mainView.spacing + mainView.margin * 2 // width of 2 buttons
                      ? 1
                      : (mainView.width < mainView.buttonMinWidth * 4 + mainView.spacing * 3 + mainView.margin * 2 // width of 4 buttons
                         ? 2
                         : 4)
             CustomButton {
                 id: shadowButton
                 text: graph.shadowQuality === AbstractGraph3D.ShadowQuality.None ?
                           qsTr("Show Shadows") : qsTr("Hide Shadows")
                 source: graph.shadowQuality === AbstractGraph3D.ShadowQuality.None ?
                             "qrc:/images/shadow.svg" : "qrc:/images/shadow_hide.svg"
                 onClicked: {
                     graph.shadowQuality = graph.shadowQuality === AbstractGraph3D.ShadowQuality.None ?
                                 AbstractGraph3D.ShadowQuality.High :
                                 AbstractGraph3D.ShadowQuality.None
                 }
             }

             CustomButton {
                 id: smoothButton
                 text: qsTr("Smooth Series One")
                 source: graph.meshSmooth ?
                             "qrc:/images/flatten.svg" : "qrc:/images/smooth_curve.svg"
                 onClicked: {
                     text = graph.meshSmooth ? qsTr("Smooth Series One") : qsTr("Flat Series One")
                     graph.meshSmooth = !graph.meshSmooth
                 }
             }

             CustomButton {
                 id: cameraButton
                 text: qsTr("Camera Placement")
                 source: graph.cameraPreset === AbstractGraph3D.CameraPreset.Front ?
                                         "qrc:/images/camera.svg" : "qrc:/images/camera2.svg"
                 onClicked: {
                     graph.cameraPreset = graph.cameraPreset === AbstractGraph3D.CameraPreset.Front ?
                                 AbstractGraph3D.CameraPreset.IsometricRightHigh :
                                 AbstractGraph3D.CameraPreset.Front
                 }
             }

             CustomButton {
                 id: backgroundButton
                 text: qsTr("Hide Background")
                 source: graph.theme.backgroundEnabled ?
                                         "qrc:/images/background_hide.svg" : "qrc:/images/background.svg"
                 onClicked: {
                     graph.theme.backgroundEnabled = !graph.theme.backgroundEnabled
                     text = graph.theme.backgroundEnabled ? qsTr("Hide Background") : qsTr("Show Background")
                 }
             }
         }

         Graph {
             id: graph
             Layout.fillWidth: true
             Layout.fillHeight: true
         }

         CustomButton {
             id: themeButton
             Layout.alignment: Qt.AlignLeft
             Layout.fillWidth: false
             text: qsTr("Change Theme")
             source: "qrc:/images/theme.svg"
             onClicked: {
                 graph.theme = graph.theme.type === Theme3D.Theme.Retro ? themeQt : themeRetro
                 backgroundButton.text = graph.theme.backgroundEnabled ? qsTr("Hide Background") : qsTr("Show Background")
             }
         }
     }
 }