Revamp qmlbars example visuals and documentation

Pick-to: 6.5
Fixes: QTBUG-110801
Change-Id: I31ee31ab29cb230a7eadd9641bd817249e2e41c7
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>

5 files changed, 278 insertions, 204 deletions

diff --git a/examples/datavisualization/qmlbars/doc/images/qmlbars-example.png b/examples/datavisualization/qmlbars/doc/images/qmlbars-example.png
index 4230e4d9..803ff62e 100644
--- a/examples/datavisualization/qmlbars/doc/images/qmlbars-example.png
+++ b/examples/datavisualization/qmlbars/doc/images/qmlbars-example.png
diff --git a/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc b/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc
index 42b0854a..bac85045 100644
--- a/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc
+++ b/examples/datavisualization/qmlbars/doc/src/qmlbars.qdoc
@@ -9,106 +9,103 @@
     \ingroup qtdatavisualization_qmlexamples
     \brief Using Bars3D in a QML application.
 
-    The bars example shows how to make a simple 3D bar graph using Bars3D and Qt
-    Quick 2.
+    \e {Simple Bar Graph} shows how to make a simple 3D bar graph using Bars3D and QML.
 
     \image qmlbars-example.png
 
-    The interesting thing about this example is switching series and displaying more than one series
-    at once. We'll concentrate on those and skip explaining the basic Bars3D functionality - for
-    more detailed QML example documentation, see \l{Simple Scatter Graph}.
+    The following sections describe how to switch series and display more than one series
+    at a time. For more information about basic QML application functionality, see
+    \l{Simple Scatter Graph}.
 
     \include examples-run.qdocinc
 
     \section1 Data
 
-    The example data is monthly income and expenses of a fictional company over several years.
+    The example data set is the monthly income and expenses of a fictional company over several years.
     The data is defined in a list model in \c Data.qml like this:
 
     \snippet qmlbars/qml/qmlbars/Data.qml 0
     \dots
 
     Each data item has three roles: timestamp, income, and expenses. The timestamp value is in
-    format: \c{<four digit year>-<two digit month>}. Years and months are natural to map to rows and
-    columns of a bar chart, but we can only show either income or expenses as the value.
+    format: \c{<four digit year>-<two digit month>}. Usually, you would map years and months to rows
+    and columns of a bar chart, but you can only show either income or expenses as the value.
 
-    Now we need to add the data to the Bars3D graph. We will create two Bar3DSeries inside it,
-    starting with a series for the income:
+    Now, add the data to the Bars3D graph. Create two Bar3DSeries inside it, starting with a series
+    for the income:
 
     \snippet qmlbars/qml/qmlbars/main.qml 3
     \dots
 
     The data is attached to the \c itemModel property of the ItemModelBarDataProxy inside the
-    series. For \c valueRole we simply specify the \c income field, as it contains the value we
-    want, but getting the years and months is a bit more complicated, since they are both found
-    in the same field. To extract those values, we specify the \c timestamp field for both
+    series. For \c{valueRole}, specify the \c income field, as it contains the value you
+    want. Getting the years and months is a bit more complicated, since they are both found
+    in the same field. To extract those values, specify the \c timestamp field for both
     \c rowRole and \c columnRole, and additionally specify a search pattern and a replace rule
     for those roles to extract the correct portion of the field contents for each role.
     The search pattern is a normal JavaScript regular expression and the replace rule specifies
     what the field content that matches the regular expression is replaced with.
-    In this case we want to replace the entire field content with just the year or the month,
+    In this case, replace the entire field content with just the year or the month,
     which is the first captured substring for both rows and columns.
-    For more information how the replace using regular expressions works, see
+    For more information about the replace functionality with regular expression, see
     QString::replace(const QRegExp &rx, const QString &after) function documentation.
 
     The \c multiMatchBehavior property specifies what to do in case multiple item model items match
-    the same row/column combination. In this case we want to add their values together.
-    This property has no effect when we are showing values for each month, as there are no
-    duplicate months in our item model, but it becomes relevant later when we want to show
+    the same row/column combination. In this case, add their values together.
+    This property has no effect when showing values for each month, as there are no
+    duplicate months in our item model, but it becomes relevant later when you want to show
     the yearly totals.
 
-    Then we add another series for the expenses:
+    Then, add another series for the expenses:
 
     \snippet qmlbars/qml/qmlbars/main.qml 4
     \dots
 
-    The model contains expenses as negative values, but we want to show them as positive bars, so
-    that we can easily compare them to income bars. We use \c valueRolePattern to remove the minus
+    The model contains expenses as negative values, but you want to show them as positive bars, so
+    that they can be easily compared to income bars. Use the \c valueRolePattern to remove the minus
     sign to achieve this. No replacement string needs to be specified as the default replacement
     is an empty string.
 
-    We use the \c visible property of the series to hide the second series for now.
+    Use the \c visible property of the series to hide the second series for now.
 
     \section1 Custom Axis Labels
 
-    One interesting tidbit about axes is that we redefine the category labels for column axis in
-    \c Axes.qml. This is done because the data contains numbers for months, which we don't want
-    to use for our column labels:
+    \c Axes.qml redefines the category labels for the column axis because the data contains numbers
+    for months, which would clutter the labels:
 
     \snippet qmlbars/qml/qmlbars/Axes.qml 0
 
-    We also set automatic axis label rotation to make axis labels more readable at low camera
-    angles.
+    To make axis labels more readable at low camera angles, set automatic axis label rotation.
 
     \section1 Switching Series
 
-    In the \c main.qml, we set up the graph and various UI elements. There are three interesting
-    code blocks we want to highlight here. The first one shows how to change the
-    visualized data between income, expenses, and both, by simply changing visibility of the two
-    series:
+    In \c main.qml, set up the graph and various UI elements. There are three interesting
+    code blocks to highlight here. The first one shows how to change the visualized data between
+    income, expenses, and both, by simply changing the visibility of the two series:
 
     \snippet qmlbars/qml/qmlbars/main.qml 0
 
     The axis label format and item selection label formats are tweaked to get the negative sign
     showing properly for expenses, which were actually resolved as positive values.
 
-    The second interesting block is where we change the visualized data by adjusting the proxy
-    propertes:
+    The second interesting block is where the visualized data is changed by adjusting the proxy
+    properties:
 
     \snippet qmlbars/qml/qmlbars/main.qml 1
 
-    To show yearly totals, we need to combine the twelve months of each year into a single bar.
-    We achieve this by specifying a \c columnRolePattern that matches all model items. That way
-    the data proxy will only have a single column. The cumulative \c multiMatchBehavior we
+    To show the yearly totals, combine the twelve months of each year into a single bar.
+    This is achieved by specifying a \c columnRolePattern that matches all model items. That way,
+    the data proxy will only have a single column. The cumulative \c multiMatchBehavior
     specified earlier for the proxy becomes relevant now, causing the values of all twelve months
     of each year to be added up into a single bar.
 
-    To show just a subset of years, we set \c autoRowCategories to false on the
-    ItemModelBarDataProxy item and define the row categories explicitly. This way, only the items
-    in specified row categories are visualized.
+    To show just a subset of years, set \c autoRowCategories to false on the ItemModelBarDataProxy
+    item and define the row categories explicitly. This way, only the items in the specified row
+    categories are visualized.
 
-    The third interesting block shows how to get the row and column index of an item if you know the
-    row and column values by using ItemModelBarDataProxy methods \c rowCategoryIndex() and \c columnCategoryIndex():
+    The third interesting block shows how to get the row and column index of an item if you know
+    the row and column values by using ItemModelBarDataProxy methods \c rowCategoryIndex()
+    and \c columnCategoryIndex():
 
     \snippet qmlbars/qml/qmlbars/main.qml 2
 */
diff --git a/examples/datavisualization/qmlbars/main.cpp b/examples/datavisualization/qmlbars/main.cpp
index a9bb9099..0ebe3505 100644
--- a/examples/datavisualization/qmlbars/main.cpp
+++ b/examples/datavisualization/qmlbars/main.cpp
@@ -1,10 +1,9 @@
 // Copyright (C) 2016 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
 
-#include <QtGui/QGuiApplication>
-#include <QtCore/QDir>
-#include <QtQuick/QQuickView>
-#include <QtQml/QQmlEngine>
+#include <QtGui/qguiapplication.h>
+#include <QtQuick/qquickview.h>
+#include <QtQml/qqmlengine.h>
 
 int main(int argc, char *argv[])
 {
@@ -21,12 +20,13 @@ int main(int argc, char *argv[])
     QString extraImportPath(QStringLiteral("%1/../../../%2"));
 #endif
     viewer.engine()->addImportPath(extraImportPath.arg(QGuiApplication::applicationDirPath(),
-                                      QString::fromLatin1("qml")));
+                                                       QString::fromLatin1("qml")));
 
-    viewer.setTitle(QStringLiteral("Monthly income/expenses"));
+    viewer.setTitle(QStringLiteral("Monthly income / expenses"));
 
     viewer.setSource(QUrl("qrc:/qml/qmlbars/main.qml"));
     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
+    viewer.setColor("black");
     viewer.show();
 
     return app.exec();
diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml
index d1352eef..f56774c3 100644
--- a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml
+++ b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml
@@ -8,111 +8,111 @@ Item {
     property alias model: dataModel
 
     property var modelAsJsArray: {
-        var arr = []
+        var arr = [];
         for (var i = 0; i < dataModel.count; i++) {
-            var row = dataModel.get(i)
+            var row = dataModel.get(i);
             arr.push({
                          timestamp: row.timestamp,
                          expenses: row.expenses,
                          income: row.income
-                     })
+                     });
         }
-        return arr
+        return arr;
     }
 
     //! [0]
     ListModel {
         id: dataModel
-        ListElement{ timestamp: "2006-01"; expenses: "-4";  income: "5" }
-        ListElement{ timestamp: "2006-02"; expenses: "-5";  income: "6" }
-        ListElement{ timestamp: "2006-03"; expenses: "-7";  income: "4" }
+        ListElement{ timestamp: "2016-01"; expenses: "-4";  income: "5" }
+        ListElement{ timestamp: "2016-02"; expenses: "-5";  income: "6" }
+        ListElement{ timestamp: "2016-03"; expenses: "-7";  income: "4" }
         //! [0]
-        ListElement{ timestamp: "2006-04"; expenses: "-3";  income: "2" }
-        ListElement{ timestamp: "2006-05"; expenses: "-4";  income: "1" }
-        ListElement{ timestamp: "2006-06"; expenses: "-2";  income: "2" }
-        ListElement{ timestamp: "2006-07"; expenses: "-1";  income: "3" }
-        ListElement{ timestamp: "2006-08"; expenses: "-5";  income: "1" }
-        ListElement{ timestamp: "2006-09"; expenses: "-2";  income: "3" }
-        ListElement{ timestamp: "2006-10"; expenses: "-5";  income: "2" }
-        ListElement{ timestamp: "2006-11"; expenses: "-8";  income: "5" }
-        ListElement{ timestamp: "2006-12"; expenses: "-3";  income: "3" }
+        ListElement{ timestamp: "2016-04"; expenses: "-3";  income: "2" }
+        ListElement{ timestamp: "2016-05"; expenses: "-4";  income: "1" }
+        ListElement{ timestamp: "2016-06"; expenses: "-2";  income: "2" }
+        ListElement{ timestamp: "2016-07"; expenses: "-1";  income: "3" }
+        ListElement{ timestamp: "2016-08"; expenses: "-5";  income: "1" }
+        ListElement{ timestamp: "2016-09"; expenses: "-2";  income: "3" }
+        ListElement{ timestamp: "2016-10"; expenses: "-5";  income: "2" }
+        ListElement{ timestamp: "2016-11"; expenses: "-8";  income: "5" }
+        ListElement{ timestamp: "2016-12"; expenses: "-3";  income: "3" }
 
-        ListElement{ timestamp: "2007-01"; expenses: "-3";  income: "1" }
-        ListElement{ timestamp: "2007-02"; expenses: "-4";  income: "2" }
-        ListElement{ timestamp: "2007-03"; expenses: "-12"; income: "4" }
-        ListElement{ timestamp: "2007-04"; expenses: "-13"; income: "6" }
-        ListElement{ timestamp: "2007-05"; expenses: "-14"; income: "11" }
-        ListElement{ timestamp: "2007-06"; expenses: "-7";  income: "7" }
-        ListElement{ timestamp: "2007-07"; expenses: "-6";  income: "4" }
-        ListElement{ timestamp: "2007-08"; expenses: "-4";  income: "15" }
-        ListElement{ timestamp: "2007-09"; expenses: "-2";  income: "18" }
-        ListElement{ timestamp: "2007-10"; expenses: "-29"; income: "25" }
-        ListElement{ timestamp: "2007-11"; expenses: "-23"; income: "29" }
-        ListElement{ timestamp: "2007-12"; expenses: "-5";  income: "9" }
+        ListElement{ timestamp: "2017-01"; expenses: "-3";  income: "1" }
+        ListElement{ timestamp: "2017-02"; expenses: "-4";  income: "2" }
+        ListElement{ timestamp: "2017-03"; expenses: "-12"; income: "4" }
+        ListElement{ timestamp: "2017-04"; expenses: "-13"; income: "6" }
+        ListElement{ timestamp: "2017-05"; expenses: "-14"; income: "11" }
+        ListElement{ timestamp: "2017-06"; expenses: "-7";  income: "7" }
+        ListElement{ timestamp: "2017-07"; expenses: "-6";  income: "4" }
+        ListElement{ timestamp: "2017-08"; expenses: "-4";  income: "15" }
+        ListElement{ timestamp: "2017-09"; expenses: "-2";  income: "18" }
+        ListElement{ timestamp: "2017-10"; expenses: "-29"; income: "25" }
+        ListElement{ timestamp: "2017-11"; expenses: "-23"; income: "29" }
+        ListElement{ timestamp: "2017-12"; expenses: "-5";  income: "9" }
 
-        ListElement{ timestamp: "2008-01"; expenses: "-3";  income: "8" }
-        ListElement{ timestamp: "2008-02"; expenses: "-8";  income: "14" }
-        ListElement{ timestamp: "2008-03"; expenses: "-10"; income: "20" }
-        ListElement{ timestamp: "2008-04"; expenses: "-12"; income: "24" }
-        ListElement{ timestamp: "2008-05"; expenses: "-10"; income: "19" }
-        ListElement{ timestamp: "2008-06"; expenses: "-5";  income: "8" }
-        ListElement{ timestamp: "2008-07"; expenses: "-1";  income: "4" }
-        ListElement{ timestamp: "2008-08"; expenses: "-7";  income: "12" }
-        ListElement{ timestamp: "2008-09"; expenses: "-4";  income: "16" }
-        ListElement{ timestamp: "2008-10"; expenses: "-22"; income: "33" }
-        ListElement{ timestamp: "2008-11"; expenses: "-16"; income: "25" }
-        ListElement{ timestamp: "2008-12"; expenses: "-2";  income: "7" }
+        ListElement{ timestamp: "2018-01"; expenses: "-3";  income: "8" }
+        ListElement{ timestamp: "2018-02"; expenses: "-8";  income: "14" }
+        ListElement{ timestamp: "2018-03"; expenses: "-10"; income: "20" }
+        ListElement{ timestamp: "2018-04"; expenses: "-12"; income: "24" }
+        ListElement{ timestamp: "2018-05"; expenses: "-10"; income: "19" }
+        ListElement{ timestamp: "2018-06"; expenses: "-5";  income: "8" }
+        ListElement{ timestamp: "2018-07"; expenses: "-1";  income: "4" }
+        ListElement{ timestamp: "2018-08"; expenses: "-7";  income: "12" }
+        ListElement{ timestamp: "2018-09"; expenses: "-4";  income: "16" }
+        ListElement{ timestamp: "2018-10"; expenses: "-22"; income: "33" }
+        ListElement{ timestamp: "2018-11"; expenses: "-16"; income: "25" }
+        ListElement{ timestamp: "2018-12"; expenses: "-2";  income: "7" }
 
-        ListElement{ timestamp: "2009-01"; expenses: "-4";  income: "5"  }
-        ListElement{ timestamp: "2009-02"; expenses: "-4";  income: "7"  }
-        ListElement{ timestamp: "2009-03"; expenses: "-11"; income: "14"  }
-        ListElement{ timestamp: "2009-04"; expenses: "-16"; income: "22"  }
-        ListElement{ timestamp: "2009-05"; expenses: "-3";  income: "5"  }
-        ListElement{ timestamp: "2009-06"; expenses: "-4";  income: "8"  }
-        ListElement{ timestamp: "2009-07"; expenses: "-7";  income: "9"  }
-        ListElement{ timestamp: "2009-08"; expenses: "-9";  income: "13"  }
-        ListElement{ timestamp: "2009-09"; expenses: "-1";  income: "6"  }
-        ListElement{ timestamp: "2009-10"; expenses: "-14"; income: "25"  }
-        ListElement{ timestamp: "2009-11"; expenses: "-19"; income: "29"  }
-        ListElement{ timestamp: "2009-12"; expenses: "-5";  income: "7"  }
+        ListElement{ timestamp: "2019-01"; expenses: "-4";  income: "5"  }
+        ListElement{ timestamp: "2019-02"; expenses: "-4";  income: "7"  }
+        ListElement{ timestamp: "2019-03"; expenses: "-11"; income: "14"  }
+        ListElement{ timestamp: "2019-04"; expenses: "-16"; income: "22"  }
+        ListElement{ timestamp: "2019-05"; expenses: "-3";  income: "5"  }
+        ListElement{ timestamp: "2019-06"; expenses: "-4";  income: "8"  }
+        ListElement{ timestamp: "2019-07"; expenses: "-7";  income: "9"  }
+        ListElement{ timestamp: "2019-08"; expenses: "-9";  income: "13"  }
+        ListElement{ timestamp: "2019-09"; expenses: "-1";  income: "6"  }
+        ListElement{ timestamp: "2019-10"; expenses: "-14"; income: "25"  }
+        ListElement{ timestamp: "2019-11"; expenses: "-19"; income: "29"  }
+        ListElement{ timestamp: "2019-12"; expenses: "-5";  income: "7"  }
 
-        ListElement{ timestamp: "2010-01"; expenses: "-14"; income: "22"  }
-        ListElement{ timestamp: "2010-02"; expenses: "-5";  income: "7"  }
-        ListElement{ timestamp: "2010-03"; expenses: "-1";  income: "9"  }
-        ListElement{ timestamp: "2010-04"; expenses: "-1";  income: "12"  }
-        ListElement{ timestamp: "2010-05"; expenses: "-5";  income: "9"  }
-        ListElement{ timestamp: "2010-06"; expenses: "-5";  income: "8"  }
-        ListElement{ timestamp: "2010-07"; expenses: "-3";  income: "7"  }
-        ListElement{ timestamp: "2010-08"; expenses: "-1";  income: "5"  }
-        ListElement{ timestamp: "2010-09"; expenses: "-2";  income: "4"  }
-        ListElement{ timestamp: "2010-10"; expenses: "-10"; income: "13"  }
-        ListElement{ timestamp: "2010-11"; expenses: "-12"; income: "17"  }
-        ListElement{ timestamp: "2010-12"; expenses: "-6";  income: "9"  }
+        ListElement{ timestamp: "2020-01"; expenses: "-14"; income: "22"  }
+        ListElement{ timestamp: "2020-02"; expenses: "-5";  income: "7"  }
+        ListElement{ timestamp: "2020-03"; expenses: "-1";  income: "9"  }
+        ListElement{ timestamp: "2020-04"; expenses: "-1";  income: "12"  }
+        ListElement{ timestamp: "2020-05"; expenses: "-5";  income: "9"  }
+        ListElement{ timestamp: "2020-06"; expenses: "-5";  income: "8"  }
+        ListElement{ timestamp: "2020-07"; expenses: "-3";  income: "7"  }
+        ListElement{ timestamp: "2020-08"; expenses: "-1";  income: "5"  }
+        ListElement{ timestamp: "2020-09"; expenses: "-2";  income: "4"  }
+        ListElement{ timestamp: "2020-10"; expenses: "-10"; income: "13"  }
+        ListElement{ timestamp: "2020-11"; expenses: "-12"; income: "17"  }
+        ListElement{ timestamp: "2020-12"; expenses: "-6";  income: "9"  }
 
-        ListElement{ timestamp: "2011-01"; expenses: "-2";  income: "6"  }
-        ListElement{ timestamp: "2011-02"; expenses: "-4";  income: "8"  }
-        ListElement{ timestamp: "2011-03"; expenses: "-7";  income: "12"  }
-        ListElement{ timestamp: "2011-04"; expenses: "-9";  income: "15"  }
-        ListElement{ timestamp: "2011-05"; expenses: "-7";  income: "19"  }
-        ListElement{ timestamp: "2011-06"; expenses: "-9";  income: "18"  }
-        ListElement{ timestamp: "2011-07"; expenses: "-13"; income: "17"  }
-        ListElement{ timestamp: "2011-08"; expenses: "-5";  income: "9"  }
-        ListElement{ timestamp: "2011-09"; expenses: "-3";  income: "8"  }
-        ListElement{ timestamp: "2011-10"; expenses: "-13"; income: "15"  }
-        ListElement{ timestamp: "2011-11"; expenses: "-8";  income: "17"  }
-        ListElement{ timestamp: "2011-12"; expenses: "-7";  income: "10"  }
+        ListElement{ timestamp: "2021-01"; expenses: "-2";  income: "6"  }
+        ListElement{ timestamp: "2021-02"; expenses: "-4";  income: "8"  }
+        ListElement{ timestamp: "2021-03"; expenses: "-7";  income: "12"  }
+        ListElement{ timestamp: "2021-04"; expenses: "-9";  income: "15"  }
+        ListElement{ timestamp: "2021-05"; expenses: "-7";  income: "19"  }
+        ListElement{ timestamp: "2021-06"; expenses: "-9";  income: "18"  }
+        ListElement{ timestamp: "2021-07"; expenses: "-13"; income: "17"  }
+        ListElement{ timestamp: "2021-08"; expenses: "-5";  income: "9"  }
+        ListElement{ timestamp: "2021-09"; expenses: "-3";  income: "8"  }
+        ListElement{ timestamp: "2021-10"; expenses: "-13"; income: "15"  }
+        ListElement{ timestamp: "2021-11"; expenses: "-8";  income: "17"  }
+        ListElement{ timestamp: "2021-12"; expenses: "-7";  income: "10"  }
 
-        ListElement{ timestamp: "2012-01"; expenses: "-12";  income: "16"  }
-        ListElement{ timestamp: "2012-02"; expenses: "-24";  income: "28"  }
-        ListElement{ timestamp: "2012-03"; expenses: "-27";  income: "22"  }
-        ListElement{ timestamp: "2012-04"; expenses: "-29";  income: "25"  }
-        ListElement{ timestamp: "2012-05"; expenses: "-27";  income: "29"  }
-        ListElement{ timestamp: "2012-06"; expenses: "-19";  income: "18"  }
-        ListElement{ timestamp: "2012-07"; expenses: "-13";  income: "17"  }
-        ListElement{ timestamp: "2012-08"; expenses: "-15";  income: "19"  }
-        ListElement{ timestamp: "2012-09"; expenses: "-3";   income: "8"  }
-        ListElement{ timestamp: "2012-10"; expenses: "-3";   income: "6"  }
-        ListElement{ timestamp: "2012-11"; expenses: "-4";   income: "8"  }
-        ListElement{ timestamp: "2012-12"; expenses: "-5";   income: "9"  }
+        ListElement{ timestamp: "2022-01"; expenses: "-12";  income: "16"  }
+        ListElement{ timestamp: "2022-02"; expenses: "-24";  income: "28"  }
+        ListElement{ timestamp: "2022-03"; expenses: "-27";  income: "22"  }
+        ListElement{ timestamp: "2022-04"; expenses: "-29";  income: "25"  }
+        ListElement{ timestamp: "2022-05"; expenses: "-27";  income: "29"  }
+        ListElement{ timestamp: "2022-06"; expenses: "-19";  income: "18"  }
+        ListElement{ timestamp: "2022-07"; expenses: "-13";  income: "17"  }
+        ListElement{ timestamp: "2022-08"; expenses: "-15";  income: "19"  }
+        ListElement{ timestamp: "2022-09"; expenses: "-3";   income: "8"  }
+        ListElement{ timestamp: "2022-10"; expenses: "-3";   income: "6"  }
+        ListElement{ timestamp: "2022-11"; expenses: "-4";   income: "8"  }
+        ListElement{ timestamp: "2022-12"; expenses: "-5";   income: "9"  }
     }
 }
diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
index 2dd136b1..c86e3dac 100644
--- a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
+++ b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
@@ -31,24 +31,24 @@ Item {
 
     function handleSelectionChange(series, position) {
         if (position !== series.invalidSelectionPosition)
-            selectedSeries = series
+            selectedSeries = series;
 
         // Set tableView current row to selected bar
         var rowRole = series.dataProxy.rowLabels[position.x];
-        var colRole
+        var colRole;
         if (barGraph.columnAxis == graphAxes.total)
             colRole = "01";
         else
             colRole = series.dataProxy.columnLabels[position.y];
-        var checkTimestamp = rowRole + "-" + colRole
+        var checkTimestamp = rowRole + "-" + colRole;
 
         if (currentRow === -1 || checkTimestamp !== graphData.model.get(currentRow).timestamp) {
             var totalRows = tableView.rows;
             for (var i = 0; i < totalRows; i++) {
-                var modelTimestamp = graphData.model.get(i).timestamp
+                var modelTimestamp = graphData.model.get(i).timestamp;
                 if (modelTimestamp === checkTimestamp) {
-                    currentRow = i
-                    break
+                    currentRow = i;
+                    break;
                 }
             }
         }
@@ -62,10 +62,10 @@ Item {
         Bars3D {
             id: barGraph
             anchors.fill: parent
-            shadowQuality: AbstractGraph3D.ShadowQualityMedium
+            shadowQuality: AbstractGraph3D.ShadowQualitySoftHigh
             selectionMode: AbstractGraph3D.SelectionItem
             theme: Theme3D {
-                type: Theme3D.ThemeRetro
+                type: Theme3D.ThemeEbony
                 labelBorderEnabled: true
                 font.pointSize: 35
                 labelBackgroundEnabled: true
@@ -115,7 +115,7 @@ Item {
                 }
 
                 onSelectedBarChanged: (position) => mainview.handleSelectionChange(secondarySeries,
-                                                                                   position)
+                                                                                   position);
             }
 
             //! [3]
@@ -145,7 +145,7 @@ Item {
                 }
 
                 onSelectedBarChanged: (position) => mainview.handleSelectionChange(barSeries,
-                                                                                  position)
+                                                                                   position);
             }
         }
     }
@@ -166,6 +166,10 @@ Item {
                 required property int index
                 padding: 3
                 text: headerView.columnNames[index]
+                color: barGraph.theme.labelTextColor
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
             }
         }
 
@@ -192,11 +196,15 @@ Item {
                 required property int column
                 required property string display
                 implicitHeight: 30
-                implicitWidth: tableView.width / 3
-                color: row === mainview.currentRow ? "#e0e0e0" : "#ffffff"
+                implicitWidth: column === 0 ? tableView.width / 2 : tableView.width / 4
+                color: row === mainview.currentRow ? barGraph.theme.gridLineColor
+                                                   : barGraph.theme.windowColor
+                border.color: row === mainview.currentRow ? barGraph.theme.labelTextColor
+                                                          : barGraph.theme.gridLineColor
+                border.width: 1
                 MouseArea {
                     anchors.fill: parent
-                    onClicked: mainview.currentRow = delegateRoot.row
+                    onClicked: mainview.currentRow = delegateRoot.row;
                 }
 
                 Text {
@@ -210,15 +218,19 @@ Item {
                     property string formattedText: {
                         if (delegateRoot.column === 0) {
                             if (delegateRoot.display !== "") {
-                                var pattern = /(\d\d\d\d)-(\d\d)/
-                                var matches = pattern.exec(delegateRoot.display)
-                                var colIndex = parseInt(matches[2], 10) - 1
-                                return matches[1] + " - " + graphAxes.column.labels[colIndex]
+                                var pattern = /(\d\d\d\d)-(\d\d)/;
+                                var matches = pattern.exec(delegateRoot.display);
+                                var colIndex = parseInt(matches[2], 10) - 1;
+                                return matches[1] + " - " + graphAxes.column.labels[colIndex];
                             }
                         } else {
-                            return delegateRoot.display
+                            return delegateRoot.display;
                         }
                     }
+                    color: barGraph.theme.labelTextColor
+                    horizontalAlignment: delegateRoot.column === 0 ? Text.AlignLeft
+                                                                   : Text.AlignHCenter
+                    elide: Text.ElideRight
                 }
             }
         }
@@ -226,21 +238,21 @@ Item {
 
     //! [2]
     onCurrentRowChanged: {
-        var timestamp = graphData.model.get(mainview.currentRow).timestamp
-        var pattern = /(\d\d\d\d)-(\d\d)/
-        var matches = pattern.exec(timestamp)
-        var rowIndex = modelProxy.rowCategoryIndex(matches[1])
-        var colIndex
+        var timestamp = graphData.model.get(mainview.currentRow).timestamp;
+        var pattern = /(\d\d\d\d)-(\d\d)/;
+        var matches = pattern.exec(timestamp);
+        var rowIndex = modelProxy.rowCategoryIndex(matches[1]);
+        var colIndex;
         if (barGraph.columnAxis == graphAxes.total)
-            colIndex = 0 // Just one column when showing yearly totals
+            colIndex = 0 ;// Just one column when showing yearly totals
         else
-            colIndex = modelProxy.columnCategoryIndex(matches[2])
+            colIndex = modelProxy.columnCategoryIndex(matches[2]);
         if (selectedSeries.visible)
-            mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex)
+            mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex);
         else if (barSeries.visible)
-            barSeries.selectedBar = Qt.point(rowIndex, colIndex)
+            barSeries.selectedBar = Qt.point(rowIndex, colIndex);
         else
-            secondarySeries.selectedBar = Qt.point(rowIndex, colIndex)
+            secondarySeries.selectedBar = Qt.point(rowIndex, colIndex);
     }
     //! [2]
 
@@ -252,38 +264,55 @@ Item {
             id: changeDataButton
             Layout.fillWidth: true
             Layout.fillHeight: true
-            text: "Show 2010 - 2012"
+            text: "Show 2020 - 2022"
             clip: true
             //! [1]
             onClicked: {
                 if (text === "Show yearly totals") {
-                    modelProxy.autoRowCategories = true
-                    secondaryProxy.autoRowCategories = true
-                    modelProxy.columnRolePattern = /^.*$/
-                    secondaryProxy.columnRolePattern = /^.*$/
-                    graphAxes.value.autoAdjustRange = true
-                    barGraph.columnAxis = graphAxes.total
-                    text = "Show all years"
+                    modelProxy.autoRowCategories = true;
+                    secondaryProxy.autoRowCategories = true;
+                    modelProxy.columnRolePattern = /^.*$/;
+                    secondaryProxy.columnRolePattern = /^.*$/;
+                    graphAxes.value.autoAdjustRange = true;
+                    barGraph.columnAxis = graphAxes.total;
+                    text = "Show all years";
                 } else if (text === "Show all years") {
-                    modelProxy.autoRowCategories = true
-                    secondaryProxy.autoRowCategories = true
-                    modelProxy.columnRolePattern = /^.*-(\d\d)$/
-                    secondaryProxy.columnRolePattern = /^.*-(\d\d)$/
-                    graphAxes.value.min = 0
-                    graphAxes.value.max = 35
-                    barGraph.columnAxis = graphAxes.column
-                    text = "Show 2010 - 2012"
-                } else { // text === "Show 2010 - 2012"
+                    modelProxy.autoRowCategories = true;
+                    secondaryProxy.autoRowCategories = true;
+                    modelProxy.columnRolePattern = /^.*-(\d\d)$/;
+                    secondaryProxy.columnRolePattern = /^.*-(\d\d)$/;
+                    graphAxes.value.min = 0;
+                    graphAxes.value.max = 35;
+                    barGraph.columnAxis = graphAxes.column;
+                    text = "Show 2020 - 2022";
+                } else { // text === "Show 2020 - 2022"
                     // Explicitly defining row categories, since we do not want to show data for
                     // all years in the model, just for the selected ones.
-                    modelProxy.autoRowCategories = false
-                    secondaryProxy.autoRowCategories = false
-                    modelProxy.rowCategories = ["2010", "2011", "2012"]
-                    secondaryProxy.rowCategories = ["2010", "2011", "2012"]
-                    text = "Show yearly totals"
+                    modelProxy.autoRowCategories = false;
+                    secondaryProxy.autoRowCategories = false;
+                    modelProxy.rowCategories = ["2020", "2021", "2022"];
+                    secondaryProxy.rowCategories = ["2020", "2021", "2022"];
+                    text = "Show yearly totals";
                 }
             }
             //! [1]
+
+            contentItem: Text {
+                text: changeDataButton.text
+                opacity: changeDataButton.enabled ? 1.0 : 0.3
+                color: barGraph.theme.labelTextColor
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+            }
+
+            background: Rectangle {
+                opacity: changeDataButton.enabled ? 1 : 0.3
+                color: changeDataButton.down ? barGraph.theme.gridLineColor : barGraph.theme.windowColor
+                border.color: changeDataButton.down ? barGraph.theme.labelTextColor : barGraph.theme.gridLineColor
+                border.width: 1
+                radius: 2
+            }
         }
 
         Button {
@@ -295,13 +324,29 @@ Item {
             enabled: barGraph.shadowsSupported
             onClicked: {
                 if (barGraph.shadowQuality == AbstractGraph3D.ShadowQualityNone) {
-                    barGraph.shadowQuality = AbstractGraph3D.ShadowQualityMedium;
-                    text = "Hide Shadows"
+                    barGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftHigh;
+                    text = "Hide Shadows";
                 } else {
                     barGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
-                    text = "Show Shadows"
+                    text = "Show Shadows";
                 }
             }
+            contentItem: Text {
+                text: shadowToggle.text
+                opacity: shadowToggle.enabled ? 1.0 : 0.3
+                color: barGraph.theme.labelTextColor
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+            }
+
+            background: Rectangle {
+                opacity: shadowToggle.enabled ? 1 : 0.3
+                color: shadowToggle.down ? barGraph.theme.gridLineColor : barGraph.theme.windowColor
+                border.color: shadowToggle.down ? barGraph.theme.labelTextColor : barGraph.theme.gridLineColor
+                border.width: 1
+                radius: 2
+            }
         }
 
         Button {
@@ -313,22 +358,38 @@ Item {
             //! [0]
             onClicked: {
                 if (text === "Show Expenses") {
-                    barSeries.visible = false
-                    secondarySeries.visible = true
-                    barGraph.valueAxis.labelFormat = "-%.2f M\u20AC"
-                    secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: @valueLabel"
-                    text = "Show Both"
+                    barSeries.visible = false;
+                    secondarySeries.visible = true;
+                    barGraph.valueAxis.labelFormat = "-%.2f M\u20AC";
+                    secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: @valueLabel";
+                    text = "Show Both";
                 } else if (text === "Show Both") {
-                    barSeries.visible = true
-                    barGraph.valueAxis.labelFormat = "%.2f M\u20AC"
-                    secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: -@valueLabel"
-                    text = "Show Income"
+                    barSeries.visible = true;
+                    barGraph.valueAxis.labelFormat = "%.2f M\u20AC";
+                    secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: -@valueLabel";
+                    text = "Show Income";
                 } else { // text === "Show Income"
-                    secondarySeries.visible = false
-                    text = "Show Expenses"
+                    secondarySeries.visible = false;
+                    text = "Show Expenses";
                 }
             }
             //! [0]
+            contentItem: Text {
+                text: seriesToggle.text
+                opacity: seriesToggle.enabled ? 1.0 : 0.3
+                color: barGraph.theme.labelTextColor
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+            }
+
+            background: Rectangle {
+                opacity: seriesToggle.enabled ? 1 : 0.3
+                color: seriesToggle.down ? barGraph.theme.gridLineColor : barGraph.theme.windowColor
+                border.color: seriesToggle.down ? barGraph.theme.labelTextColor : barGraph.theme.gridLineColor
+                border.width: 1
+                radius: 2
+            }
         }
 
         Button {
@@ -340,15 +401,31 @@ Item {
 
             onClicked: {
                 if (text === "Use Margin") {
-                    barGraph.barSeriesMargin = Qt.size(0.2, 0.2)
-                    barGraph.barSpacing = Qt.size(0.0, 0.0)
+                    barGraph.barSeriesMargin = Qt.size(0.2, 0.2);
+                    barGraph.barSpacing = Qt.size(0.0, 0.0);
                     text = "Use Spacing"
                 } else if (text === "Use Spacing") {
-                    barGraph.barSeriesMargin = Qt.size(0.0, 0.0)
-                    barGraph.barSpacing = Qt.size(0.5, 0.5)
-                    text = "Use Margin"
+                    barGraph.barSeriesMargin = Qt.size(0.0, 0.0);
+                    barGraph.barSpacing = Qt.size(0.5, 0.5);
+                    text = "Use Margin";
                 }
             }
+            contentItem: Text {
+                text: marginToggle.text
+                opacity: marginToggle.enabled ? 1.0 : 0.3
+                color: barGraph.theme.labelTextColor
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+            }
+
+            background: Rectangle {
+                opacity: marginToggle.enabled ? 1 : 0.3
+                color: marginToggle.down ? barGraph.theme.gridLineColor : barGraph.theme.windowColor
+                border.color: marginToggle.down ? barGraph.theme.labelTextColor : barGraph.theme.gridLineColor
+                border.width: 1
+                radius: 2
+            }
         }
     }