Testbed

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

 import QtQuick
 import QtGraphs
 import QtQuick.Controls.Basic

 Rectangle {
     id: mainView
     color: "#404040"

     // Reset the set colors to transparent
     // so theme color is used instead.
     function resetCustomSetColors() {
         set1.color = Qt.rgba(0, 0, 0, 0);
         set2.color = Qt.rgba(0, 0, 0, 0);
         set3.color = Qt.rgba(0, 0, 0, 0);
         set4.color = Qt.rgba(0, 0, 0, 0);
         set1.borderColor = Qt.rgba(0, 0, 0, 0);
         set2.borderColor = Qt.rgba(0, 0, 0, 0);
         set3.borderColor = Qt.rgba(0, 0, 0, 0);
         set4.borderColor = Qt.rgba(0, 0, 0, 0);
         set1.borderWidth = -1;
         set2.borderWidth = -1;
         set3.borderWidth = -1;
         set4.borderWidth = -1;
     }

     function resetCustomGraphTheme() {
         myTheme.gridSmoothing = 1;
         myTheme.axisYLabelsFont.family = undefined;
     }

     FontLoader {
         id: customFont
         source: "images/Sevillana-Regular.ttf"
     }

     Text {
         id: graphToolbarTitle
         anchors.horizontalCenter: graphToolbar.horizontalCenter
         anchors.top: parent.top
         anchors.topMargin: 10
         text: "Graph Theme"
         font.pixelSize: 12
         color: "#ffffff"
     }

     Row {
         id: graphToolbar
         anchors.top: graphToolbarTitle.bottom
         anchors.margins: 10
         anchors.left: parent.left
         anchors.leftMargin: 60
         spacing: 10
         Button {
             text: "Dark"
             onClicked: {
                 mainView.resetCustomGraphTheme();
                 background.color = "#202020";
                 myTheme.colorTheme = GraphTheme.ColorThemeDark;
             }
         }
         Button {
             text: "Light"
             onClicked: {
                 mainView.resetCustomGraphTheme();
                 background.color = "#eeeeee";
                 myTheme.colorTheme = GraphTheme.ColorThemeLight;
             }
         }
         Button {
             text: "Customize!"
             onClicked: {
                 myTheme.gridMajorBarsColor = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 myTheme.gridMajorBarsWidth = 1 + 3 * Math.random();
                 myTheme.gridMinorBarsColor = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 myTheme.gridMinorBarsWidth = 1 + 2 * Math.random();
                 myTheme.gridSmoothing = 2 * Math.random();
                 myTheme.axisYMajorColor = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 myTheme.axisXMajorColor = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 myTheme.axisYMinorColor = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 myTheme.axisXMinorColor = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 myTheme.axisYLabelsColor = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 myTheme.axisXLabelsColor = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 myTheme.axisYMajorBarWidth = 1 + 2 * Math.random();
                 myTheme.axisXMajorBarWidth = 1 + 2 * Math.random();
                 myTheme.axisYMinorBarWidth = 1 + 1 * Math.random();
                 myTheme.axisXMinorBarWidth = 1 + 1 * Math.random();
                 myTheme.axisYSmoothing = 2 * Math.random();
                 myTheme.axisYLabelsFont.family = customFont.font.family;
             }
         }
     }

     Text {
         id: seriesToolbarTitle
         anchors.horizontalCenter: seriesToolbar.horizontalCenter
         anchors.top: parent.top
         anchors.topMargin: 10
         text: "Series Theme"
         font.pixelSize: 12
         color: "#ffffff"
     }

     Row {
         id: seriesToolbar
         anchors.top: seriesToolbarTitle.bottom
         anchors.margins: 10
         anchors.right: parent.right
         anchors.rightMargin: 10
         spacing: 10
         Button {
             text: "Theme1"
             onClicked: {
                 mainView.resetCustomSetColors();
                 mySeries.theme = seriesTheme;
                 seriesTheme.colorTheme = SeriesTheme.SeriesTheme1;
             }
         }
         Button {
             text: "Theme2"
             onClicked: {
                 mainView.resetCustomSetColors();
                 mySeries.theme = seriesTheme;
                 seriesTheme.colorTheme = SeriesTheme.SeriesTheme2;
             }
         }
         Button {
             text: "CustomBW"
             onClicked: {
                 mainView.resetCustomSetColors();
                 mySeries.theme = customSeriesTheme;
             }
         }
         Button {
             text: "Customize!"
             onClicked: {
                 set1.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 set2.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 set3.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 set4.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
                 // Borders a bit lighter/darker than main colors
                 var borderMod = 0.5 + Math.random();
                 set1.borderColor = Qt.lighter(set1.color, borderMod);
                 set2.borderColor = Qt.lighter(set2.color, borderMod);
                 set3.borderColor = Qt.lighter(set3.color, borderMod);
                 set4.borderColor = Qt.lighter(set4.color, borderMod);
                 set1.borderWidth = 2;
                 set2.borderWidth = 2;
                 set3.borderWidth = 2;
                 set4.borderWidth = 2;
             }
         }
     }

     Rectangle {
         id: background
         anchors.fill: chartView
         color: "#202020"
         border.color: "#606060"
         border.width: 2
         radius: 10
     }

     GraphsView {
         id: chartView
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.top: graphToolbar.bottom
         anchors.margins: 10
         theme: GraphTheme {
             id: myTheme
             colorTheme: GraphTheme.ColorThemeDark
             axisXLabelsFont.pixelSize: 20
             axisYLabelsFont.pixelSize: 16
         }
         SeriesTheme {
             id: customSeriesTheme
             colors: ["#444444", "#555555", "#666666", "#777777"]
             borderColors: ["#888888", "#999999", "#aaaaaa", "#bbbbbb"]
             borderWidth: 4
         }
         BarSeries {
             id: mySeries
             axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012"] }
             axisY: ValueAxis {
                 minorTickCount: 4
                 max: 20
             }
             theme: SeriesTheme {
                 id: seriesTheme
                 colorTheme: SeriesTheme.SeriesTheme1
             }
             BarSet { id: set1; label: "Bob"; values: [1, 2, 3, 4, 5, 6] }
             BarSet { id: set2; label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
             BarSet { id: set3; label: "James"; values: [4+3*Math.sin(fA.elapsedTime), 5+5*Math.sin(fA.elapsedTime), 6+2*Math.sin(fA.elapsedTime), 13+2*Math.sin(fA.elapsedTime), 4+3*Math.sin(fA.elapsedTime), 8+4*Math.sin(fA.elapsedTime)] }
             BarSet { id: set4; label: "Frank"; values: [3, 3, 5, 8, 4, 2] }
         }
         FrameAnimation {
             id: fA
             running: true
             onTriggered: chartView.update();
         }
     }

     MouseArea {
         anchors.fill: chartView
         onClicked: fA.paused = !fA.paused;
     }

 }