diff --git a/tests/qmlchartproperties/qml/qmlchartproperties/BarEditor.qml b/tests/qmlchartproperties/qml/qmlchartproperties/BarEditor.qml
index 8308ae7..d092fe6 100644
--- a/tests/qmlchartproperties/qml/qmlchartproperties/BarEditor.qml
+++ b/tests/qmlchartproperties/qml/qmlchartproperties/BarEditor.qml
@@ -21,82 +21,86 @@
 import QtQuick 1.0
 import QtCommercial.Chart 1.0
 
-Flow {
-    id: flow
+Row {
+    anchors.fill: parent
     spacing: 5
-    flow: Flow.TopToBottom
     property variant series
 
-    Button {
-        text: "visible"
-        onClicked: series.visible = !series.visible;
-    }
-    Button {
-        text: "labels visible"
-        onClicked: series.labelsVisible = !series.labelsVisible;
-    }
-    Button {
-        text: "bar width +"
-        onClicked: series.barWidth += 0.1;
-    }
-    Button {
-        text: "bar width -"
-        onClicked: series.barWidth -= 0.1;
-    }
-    Button {
-        text: "append set"
-        onClicked: {
-            var count = series.count;
-            series.append("set" + count, [0, 0.1 * count, 0.2 * count, 0.3 * count, 0.4 * count, 0.5 * count, 0.6 * count]);
+    Flow {
+        spacing: 5
+        flow: Flow.TopToBottom
+
+        Button {
+            text: "visible"
+            onClicked: series.visible = !series.visible;
         }
-    }
-    Button {
-        text: "insert set"
-        onClicked: {
-            var count = series.count;
-            series.insert(count - 1, "set" + count, [0, 0.1 * count, 0.2 * count, 0.3 * count, 0.4 * count, 0.5 * count, 0.6 * count]);
+        Button {
+            text: "labels visible"
+            onClicked: series.labelsVisible = !series.labelsVisible;
+        }
+        Button {
+            text: "bar width +"
+            onClicked: series.barWidth += 0.1;
+        }
+        Button {
+            text: "bar width -"
+            onClicked: series.barWidth -= 0.1;
+        }
+        Button {
+            text: "append set"
+            onClicked: {
+                var count = series.count;
+                series.append("set" + count, [0, 0.1 * count, 0.2 * count, 0.3 * count, 0.4 * count, 0.5 * count, 0.6 * count]);
+            }
+        }
+        Button {
+            text: "insert set"
+            onClicked: {
+                var count = series.count;
+                series.insert(count - 1, "set" + count, [0, 0.1 * count, 0.2 * count, 0.3 * count, 0.4 * count, 0.5 * count, 0.6 * count]);
+            }
+        }
+        Button {
+            text: "remove set"
+            onClicked: series.remove(series.at(series.count - 1));
+        }
+        Button {
+            text: "clear sets"
+            onClicked: series.clear();
         }
-    }
-    Button {
-        text: "remove set"
-        onClicked: series.remove(series.at(series.count - 1));
-    }
-    Button {
-        text: "clear sets"
-        onClicked: series.clear();
-    }
 
-    Button {
-        text: "set 1 append"
-        onClicked: series.at(0).append(series.at(0).count + 1);
-    }
-    Button {
-        text: "set 1 replace"
-        onClicked: series.at(0).replace(series.at(0).count - 1, series.at(0).at(series.at(0).count - 1).y + 0.5);
-    }
-    Button {
-        text: "set 1 remove"
-        onClicked: series.at(0).remove(series.at(0).count - 1);
-    }
+        Button {
+            text: "set 1 append"
+            onClicked: series.at(0).append(series.at(0).count + 1);
+        }
+        Button {
+            text: "set 1 replace"
+            onClicked: series.at(0).replace(series.at(0).count - 1, series.at(0).at(series.at(0).count - 1).y + 0.5);
+        }
+        Button {
+            text: "set 1 remove"
+            onClicked: series.at(0).remove(series.at(0).count - 1);
+        }
 
-    Button {
-        text: "set 1 color"
-        onClicked: series.at(0).color = main.nextColor();
-    }
-    Button {
-        text: "set 1 border color"
-        onClicked: series.at(0).borderColor = main.nextColor();
-    }
-    Button {
-        text: "set 1 label color"
-        onClicked: series.at(0).labelColor = main.nextColor();
-    }
-    Button {
-        text: "set 1 font size +"
-        onClicked: series.at(0).labelFont.pixelSize += 1;
+        Button {
+            text: "set 1 color"
+            onClicked: series.at(0).color = main.nextColor();
+        }
+        Button {
+            text: "set 1 border color"
+            onClicked: series.at(0).borderColor = main.nextColor();
+        }
+        Button {
+            text: "set 1 label color"
+            onClicked: series.at(0).labelColor = main.nextColor();
+        }
     }
-    Button {
-        text: "set 1 font size -"
-        onClicked: series.at(0).labelFont.pixelSize -= 1;
+
+    FontEditor {
+        id: fontEditor
+        fontDescription: "label"
+        function editedFont() {
+            return series.at(0).labelFont;
+        }
     }
 }
diff --git a/tests/qmlchartproperties/qml/qmlchartproperties/Button.qml b/tests/qmlchartproperties/qml/qmlchartproperties/Button.qml
index a435faa..9186740 100644
--- a/tests/qmlchartproperties/qml/qmlchartproperties/Button.qml
+++ b/tests/qmlchartproperties/qml/qmlchartproperties/Button.qml
@@ -24,8 +24,9 @@ Rectangle {
     id: button
     height: 25
     width: 140
-    color: "#afafaf"
+    color: unpressedColor
     radius: 5
+    property color unpressedColor: "#afafaf"
 
     property string text: "button"
     signal clicked
@@ -45,7 +46,7 @@ Rectangle {
             if (pressed) {
                 button.color = "#efefef";
             } else {
-                button.color = "#afafaf";
+                button.color = unpressedColor;
             }
         }
         onPressAndHold: {
diff --git a/tests/qmlchartproperties/qml/qmlchartproperties/Chart.qml b/tests/qmlchartproperties/qml/qmlchartproperties/Chart.qml
index 7cb7c5f..e999f37 100644
--- a/tests/qmlchartproperties/qml/qmlchartproperties/Chart.qml
+++ b/tests/qmlchartproperties/qml/qmlchartproperties/Chart.qml
@@ -23,7 +23,7 @@ import QtCommercial.Chart 1.0
 
 ChartView {
     id: chartView
-    title: "chart"
+    title: "Chart Title"
     anchors.fill: parent
     property variant series: chartView
 
@@ -97,7 +97,7 @@ ChartView {
         anchors.leftMargin: parent.leftMargin
         anchors.rightMargin: parent.rightMargin
         opacity: 0.0
-        onOpacityChanged: if (opacity == 1.0) opacity = 0.0;
+        onOpacityChanged: if (opacity > 0.9) opacity = 0.0;
         Behavior on opacity {
             NumberAnimation { duration: 800 }
         }
diff --git a/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor.qml b/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor.qml
index 2e3d8d1..86e687e 100644
--- a/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor.qml
+++ b/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor.qml
@@ -21,246 +21,61 @@
 import QtQuick 1.0
 import QtCommercial.Chart 1.0
 
-
-Flow {
-    id: flow
-    spacing: 5
-    flow: Flow.TopToBottom
+Item {
+    id: chartEditor
     property variant series // TODO: rename to chart
+    onSeriesChanged: loader.item.chart = series;
 
-    Button {
-        text: "visible"
-        onClicked: series.visible = !series.visible;
-    }
-    Button {
-        text: "theme +"
-        onClicked: series.theme++;
-    }
-    Button {
-        text: "theme -"
-        onClicked: series.theme--;
-    }
-    Button {
-        text: "animation opt +"
-        onClicked: series.animationOptions++;
-    }
-    Button {
-        text: "animation opt -"
-        onClicked: series.animationOptions--;
-    }
-    Button {
-        text: "title font bold"
-        onClicked: series.titleFont.bold = !series.titleFont.bold;
-    }
-    Button {
-        text: "title color"
-        onClicked: series.titleColor = main.nextColor();
-    }
-    Button {
-        text: "background color"
-        onClicked: series.backgroundColor = main.nextColor();
-    }
-    Button {
-        text: "drop shadow enabled"
-        onClicked: series.dropShadowEnabled = !series.dropShadowEnabled;
-    }
-    Button {
-        text: "zoom +"
-        onClicked: series.zoom(2);
-    }
-    Button {
-        text: "zoom -"
-        onClicked: series.zoom(0.5);
-    }
-    Button {
-        text: "scroll left"
-        onClicked: series.scrollLeft(10);
-    }
-    Button {
-        text: "scroll right"
-        onClicked: series.scrollRight(10);
-    }
-    Button {
-        text: "scroll up"
-        onClicked: series.scrollUp(10);
-    }
-    Button {
-        text: "scroll down"
-        onClicked: series.scrollDown(10);
-    }
+    Flow {
+        id: selectorFlow
+        anchors.top: parent.top
+        height: 60
+        anchors.left: parent.left
+        anchors.right: parent.right
+        spacing: 5
+        flow: Flow.TopToBottom
 
-    Button {
-        text: "legend visible"
-        onClicked: series.legend.visible = !series.legend.visible;
-    }
-    Button {
-        text: "legend bckgrd visible"
-        onClicked: series.legend.backgroundVisible = !series.legend.backgroundVisible;
-    }
-    Button {
-        text: "legend color"
-        onClicked: series.legend.color = main.nextColor();
-    }
-    Button {
-        text: "legend border color"
-        onClicked: series.legend.borderColor = main.nextColor();
-    }
-    Button {
-        text: "legend top"
-        onClicked: series.legend.alignment ^= Qt.AlignTop;
-    }
-    Button {
-        text: "legend bottom"
-        onClicked: series.legend.alignment ^= Qt.AlignBottom;
-    }
-    Button {
-        text: "legend left"
-        onClicked: series.legend.alignment ^= Qt.AlignLeft;
-    }
-    Button {
-        text: "legend right"
-        onClicked: series.legend.alignment ^= Qt.AlignRight;
+        Button {
+            text: "Chart properties"
+            unpressedColor: "#ff6138"
+            onClicked: {
+                loader.source = "ChartEditor1.qml";
+                loader.item.chart = series;
+            }
+        }
+        Button {
+            text: "Legend properties"
+            unpressedColor: "#79bd8f"
+            onClicked: {
+                loader.source = "ChartEditor2.qml";
+                loader.item.chartLegend = series.legend;
+            }
+        }
+        Button {
+            text: "Axis X properties"
+            unpressedColor: "#beeb9f"
+            onClicked: {
+                loader.source = "ChartEditor3.qml";
+                loader.item.axis = series.axisX;
+            }
+        }
+        Button {
+            text: "Axis Y properties"
+            unpressedColor: "#00a388"
+            onClicked: {
+                loader.source = "ChartEditor3.qml";
+                loader.item.axis = series.axisY;
+            }
+        }
     }
 
-    Button {
-        text: "axis X visible"
-        onClicked: series.axisX.visible = !series.axisX.visible;
-    }
-    Button {
-        text: "axis X grid visible"
-        onClicked: series.axisX.gridVisible = !series.axisX.gridVisible;
-    }
-    Button {
-        text: "axis X labels italic"
-        onClicked: series.axisX.labelsFont.italic = !series.axisX.labelsFont.italic;
-    }
-    Button {
-        text: "axis X labels visible"
-        onClicked: series.axisX.labelsVisible = !series.axisX.labelsVisible;
-    }
-    Button {
-        text: "axis X color"
-        onClicked: series.axisX.color = main.nextColor();
-    }
-    Button {
-        text: "axis X labels color"
-        onClicked: series.axisX.labelsColor = main.nextColor();
-    }
-    Button {
-        text: "axis X labels angle +"
-        onClicked: series.axisX.labelsAngle += 5;
-    }
-    Button {
-        text: "axis X labels angle -"
-        onClicked: series.axisX.labelsAngle -= 5;
-    }
-    Button {
-        text: "axis X shades visible"
-        onClicked: series.axisX.shadesVisible = !series.axisX.shadesVisible;
-    }
-    Button {
-        text: "axis X shades color"
-        onClicked: series.axisX.shadesColor = main.nextColor();
-    }
-    Button {
-        text: "axis X shades bcolor"
-        onClicked: series.axisX.shadesBorderColor = main.nextColor();
-    }
-    Button {
-        text: "axis X max +"
-        onClicked: series.axisX.max += 0.1;
-    }
-    Button {
-        text: "axis X max -"
-        onClicked: series.axisX.max -= 0.1;
-    }
-    Button {
-        text: "axis X min +"
-        onClicked: series.axisX.min += 0.1;
-    }
-    Button {
-        text: "axis X min -"
-        onClicked: series.axisX.min -= 0.1;
-    }
-    Button {
-        text: "axis X ticks count +"
-        onClicked: series.axisX.ticksCount++;
-    }
-    Button {
-        text: "axis X ticks count -"
-        onClicked: series.axisX.ticksCount--;
-    }
-    Button {
-        text: "axis X nice nmb"
-        onClicked: series.axisX.niceNumbersEnabled = !series.axisX.niceNumbersEnabled;
+    Loader {
+        id: loader
+        anchors.top: selectorFlow.bottom
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        source: "ChartEditor1.qml"
     }
 
-    Button {
-        text: "axis Y visible"
-        onClicked: series.axisY.visible = !series.axisY.visible;
-    }
-    Button {
-        text: "axis Y grid visible"
-        onClicked: series.axisY.gridVisible = !series.axisY.gridVisible;
-    }
-    Button {
-        text: "axis Y labels visible"
-        onClicked: series.axisY.labelsVisible = !series.axisY.labelsVisible;
-    }
-    Button {
-        text: "axis Y color"
-        onClicked: series.axisY.color = main.nextColor();
-    }
-    Button {
-        text: "axis Y labels color"
-        onClicked: series.axisY.labelsColor = main.nextColor();
-    }
-    Button {
-        text: "axis Y labels angle +"
-        onClicked: series.axisY.labelsAngle += 5;
-    }
-    Button {
-        text: "axis Y labels angle -"
-        onClicked: series.axisY.labelsAngle -= 5;
-    }
-    Button {
-        text: "axis Y shades visible"
-        onClicked: series.axisY.shadesVisible = !series.axisY.shadesVisible;
-    }
-    Button {
-        text: "axis Y shades color"
-        onClicked: series.axisY.shadesColor = main.nextColor();
-    }
-    Button {
-        text: "axis Y shades bcolor"
-        onClicked: series.axisY.shadesBorderColor = main.nextColor();
-    }
-    Button {
-        text: "axis Y max +"
-        onClicked: series.axisY.max += 0.1;
-    }
-    Button {
-        text: "axis Y max -"
-        onClicked: series.axisY.max -= 0.1;
-    }
-    Button {
-        text: "axis Y min +"
-        onClicked: series.axisY.min += 0.1;
-    }
-    Button {
-        text: "axis Y min -"
-        onClicked: series.axisY.min -= 0.1;
-    }
-    Button {
-        text: "axis Y ticks count +"
-        onClicked: series.axisY.ticksCount++;
-    }
-    Button {
-        text: "axis Y ticks count -"
-        onClicked: series.axisY.ticksCount--;
-    }
-    Button {
-        text: "axis Y nice nmb"
-        onClicked: series.axisY.niceNumbersEnabled = !series.axisY.niceNumbersEnabled;
-    }
 }
diff --git a/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor1.qml b/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor1.qml
new file mode 100644
index 0000000..ddd4381
--- /dev/null
+++ b/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor1.qml
@@ -0,0 +1,97 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the Qt Commercial Charts Add-on.
+**
+** $QT_BEGIN_LICENSE$
+** Licensees holding valid Qt Commercial licenses may use this file in
+** accordance with the Qt Commercial License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.0
+import QtCommercial.Chart 1.0
+
+Row {
+    anchors.fill: parent
+    spacing: 5
+    property variant chart
+
+    Flow {
+        flow: Flow.TopToBottom
+        spacing: 5
+        Button {
+            text: "visible"
+            onClicked: chart.visible = !chart.visible;
+        }
+        Button {
+            text: "theme +"
+            onClicked: chart.theme++;
+        }
+        Button {
+            text: "theme -"
+            onClicked: chart.theme--;
+        }
+        Button {
+            text: "animation opt +"
+            onClicked: chart.animationOptions++;
+        }
+        Button {
+            text: "animation opt -"
+            onClicked: chart.animationOptions--;
+        }
+        Button {
+            text: "background color"
+            onClicked: chart.backgroundColor = main.nextColor();
+        }
+        Button {
+            text: "drop shadow enabled"
+            onClicked: chart.dropShadowEnabled = !chart.dropShadowEnabled;
+        }
+        Button {
+            text: "zoom +"
+            onClicked: chart.zoom(2);
+        }
+        Button {
+            text: "zoom -"
+            onClicked: chart.zoom(0.5);
+        }
+        Button {
+            text: "scroll left"
+            onClicked: chart.scrollLeft(10);
+        }
+        Button {
+            text: "scroll right"
+            onClicked: chart.scrollRight(10);
+        }
+        Button {
+            text: "scroll up"
+            onClicked: chart.scrollUp(10);
+        }
+        Button {
+            text: "scroll down"
+            onClicked: chart.scrollDown(10);
+        }
+        Button {
+            text: "title color"
+            onClicked: chart.titleColor = main.nextColor();
+        }
+    }
+
+    FontEditor {
+        id: fontEditor
+        fontDescription: "title"
+        function editedFont() {
+            return chart.titleFont;
+        }
+    }
+}
diff --git a/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor2.qml b/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor2.qml
new file mode 100644
index 0000000..a91b0e7
--- /dev/null
+++ b/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor2.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the Qt Commercial Charts Add-on.
+**
+** $QT_BEGIN_LICENSE$
+** Licensees holding valid Qt Commercial licenses may use this file in
+** accordance with the Qt Commercial License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.0
+import QtCommercial.Chart 1.0
+
+Row {
+    anchors.fill: parent
+    spacing: 5
+    property variant chartLegend
+
+    Flow {
+        spacing: 5
+        flow: Flow.TopToBottom
+
+        Button {
+            text: "legend visible"
+            onClicked: chartLegend.visible = !chartLegend.visible;
+        }
+        Button {
+            text: "legend bckgrd visible"
+            onClicked: chartLegend.backgroundVisible = !chartLegend.backgroundVisible;
+        }
+        Button {
+            text: "legend color"
+            onClicked: chartLegend.color = main.nextColor();
+        }
+        Button {
+            text: "legend border color"
+            onClicked: chartLegend.borderColor = main.nextColor();
+        }
+        Button {
+            text: "legend top"
+            onClicked: chartLegend.alignment ^= Qt.AlignTop;
+        }
+        Button {
+            text: "legend bottom"
+            onClicked: chartLegend.alignment ^= Qt.AlignBottom;
+        }
+        Button {
+            text: "legend left"
+            onClicked: chartLegend.alignment ^= Qt.AlignLeft;
+        }
+        Button {
+            text: "legend right"
+            onClicked: chartLegend.alignment ^= Qt.AlignRight;
+        }
+    }
+
+    FontEditor {
+        fontDescription: "legend"
+        function editedFont() {
+            return chartLegend.font;
+        }
+    }
+}
diff --git a/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor3.qml b/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor3.qml
new file mode 100644
index 0000000..a97fc45
--- /dev/null
+++ b/tests/qmlchartproperties/qml/qmlchartproperties/ChartEditor3.qml
@@ -0,0 +1,107 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the Qt Commercial Charts Add-on.
+**
+** $QT_BEGIN_LICENSE$
+** Licensees holding valid Qt Commercial licenses may use this file in
+** accordance with the Qt Commercial License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.0
+import QtCommercial.Chart 1.0
+
+Row {
+    anchors.fill: parent
+    spacing: 5
+    property variant axis
+
+    Flow {
+        id: flow
+        spacing: 5
+        flow: Flow.TopToBottom
+
+        Button {
+            text: "axis visible"
+            onClicked: axis.visible = !axis.visible;
+        }
+        Button {
+            text: "axis grid visible"
+            onClicked: axis.gridVisible = !axis.gridVisible;
+        }
+        Button {
+            text: "axis color"
+            onClicked: axis.color = main.nextColor();
+        }
+        Button {
+            text: "axis labels color"
+            onClicked: axis.labelsColor = main.nextColor();
+        }
+        Button {
+            text: "axis labels angle +"
+            onClicked: axis.labelsAngle += 5;
+        }
+        Button {
+            text: "axis labels angle -"
+            onClicked: axis.labelsAngle -= 5;
+        }
+        Button {
+            text: "axis shades visible"
+            onClicked: axis.shadesVisible = !axis.shadesVisible;
+        }
+        Button {
+            text: "axis shades color"
+            onClicked: axis.shadesColor = main.nextColor();
+        }
+        Button {
+            text: "axis shades bcolor"
+            onClicked: axis.shadesBorderColor = main.nextColor();
+        }
+        Button {
+            text: "axis max +"
+            onClicked: axis.max += 0.1;
+        }
+        Button {
+            text: "axis max -"
+            onClicked: axis.max -= 0.1;
+        }
+        Button {
+            text: "axis min +"
+            onClicked: axis.min += 0.1;
+        }
+        Button {
+            text: "axis min -"
+            onClicked: axis.min -= 0.1;
+        }
+        Button {
+            text: "axis ticks count +"
+            onClicked: axis.ticksCount++;
+        }
+        Button {
+            text: "axis ticks count -"
+            onClicked: axis.ticksCount--;
+        }
+        Button {
+            text: "axis nice nmb"
+            onClicked: axis.niceNumbersEnabled = !axis.niceNumbersEnabled;
+        }
+    }
+
+    FontEditor {
+        id: fontEditor
+        fontDescription: "axis"
+        function editedFont() {
+            return axis.labelsFont;
+        }
+    }
+}
diff --git a/tests/qmlchartproperties/qml/qmlchartproperties/FontEditor.qml b/tests/qmlchartproperties/qml/qmlchartproperties/FontEditor.qml
new file mode 100644
index 0000000..6b0303c
--- /dev/null
+++ b/tests/qmlchartproperties/qml/qmlchartproperties/FontEditor.qml
@@ -0,0 +1,93 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the Qt Commercial Charts Add-on.
+**
+** $QT_BEGIN_LICENSE$
+** Licensees holding valid Qt Commercial licenses may use this file in
+** accordance with the Qt Commercial License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.0
+import QtCommercial.Chart 1.0
+
+Flow {
+    flow: Flow.TopToBottom
+    spacing: 5
+    property string fontDescription: ""
+
+    Button {
+        text: fontDescription + " bold"
+        onClicked: editedFont().bold = !editedFont().bold;
+    }
+    Button {
+        text: fontDescription + " capitalization"
+        onClicked: editedFont().capitalization++;
+    }
+    Button {
+        text: fontDescription + " family"
+        onClicked: editedFont().family = "courier";
+    }
+    Button {
+        text: fontDescription + " font italic"
+        onClicked: editedFont().italic = !editedFont().italic;
+    }
+    Button {
+        text: fontDescription + " letterSpacing +"
+        onClicked: editedFont().letterSpacing++;
+    }
+    Button {
+        text: fontDescription + " letterSpacing -"
+        onClicked: editedFont().letterSpacing--;
+    }
+    Button {
+        text: fontDescription + " pixelSize +"
+        onClicked: editedFont().pixelSize++;
+    }
+    Button {
+        text: fontDescription + " pixelSize -"
+        onClicked: editedFont().pixelSize--;
+    }
+    Button {
+        text: fontDescription + " pointSize +"
+        onClicked: editedFont().pointSize++;
+    }
+    Button {
+        text: fontDescription + " pointSize -"
+        onClicked: editedFont().pointSize--;
+    }
+    Button {
+        text: fontDescription + " strikeout"
+        onClicked: editedFont().strikeout = !editedFont().strikeout;
+    }
+    Button {
+        text: fontDescription + " underline"
+        onClicked: editedFont().underline = !editedFont().underline;
+    }
+    Button {
+        text: fontDescription + " weight +"
+        onClicked: editedFont().weight++;
+    }
+    Button {
+        text: fontDescription + " weight -"
+        onClicked: editedFont().weight--;
+    }
+    Button {
+        text: fontDescription + " wordSpacing +"
+        onClicked: editedFont().wordSpacing++;
+    }
+    Button {
+        text: fontDescription + " wordSpacing -"
+        onClicked: editedFont().wordSpacing--;
+    }
+}
diff --git a/tests/qmlchartproperties/qml/qmlchartproperties/PieEditor.qml b/tests/qmlchartproperties/qml/qmlchartproperties/PieEditor.qml
index af8ee08..b9eb519 100644
--- a/tests/qmlchartproperties/qml/qmlchartproperties/PieEditor.qml
+++ b/tests/qmlchartproperties/qml/qmlchartproperties/PieEditor.qml
@@ -21,118 +21,123 @@
 import QtQuick 1.0
 import QtCommercial.Chart 1.0
 
-Flow {
-    id: flow
+Row {
+    anchors.fill: parent
     spacing: 5
-    flow: Flow.TopToBottom
     property variant series
 
-    Button {
-        text: "visible"
-        onClicked: series.visible = !series.visible;
-    }
-    Button {
-        text: "series hpos +"
-        onClicked: series.horizontalPosition += 0.1;
-    }
-    Button {
-        text: "series hpos -"
-        onClicked: series.horizontalPosition -= 0.1;
-    }
-    Button {
-        text: "series vpos +"
-        onClicked: series.verticalPosition += 0.1;
-    }
-    Button {
-        text: "series vpos -"
-        onClicked: series.verticalPosition -= 0.1;
-    }
-    Button {
-        text: "series size +"
-        onClicked: series.size += 0.1;
-    }
-    Button {
-        text: "series size -"
-        onClicked: series.size -= 0.1;
-    }
-    Button {
-        text: "series start angle +"
-        onClicked: series.startAngle += 1.1;
-    }
-    Button {
-        text: "series start angle -"
-        onClicked: series.startAngle -= 1.1;
-    }
-    Button {
-        text: "series end angle +"
-        onClicked: series.endAngle += 1.1;
-    }
-    Button {
-        text: "series end angle -"
-        onClicked: series.endAngle -= 1.1;
-    }
-    Button {
-        text: "remove slice"
-        onClicked: series.remove(series.at(series.count - 1));
-    }
-    Button {
-        text: "slice color"
-        onClicked: series.at(0).color = main.nextColor();
-    }
-    Button {
-        text: "slice border color"
-        onClicked: series.at(0).borderColor = main.nextColor();
-    }
-    Button {
-        text: "slice border width +"
-        onClicked: series.at(0).borderWidth++;
-    }
-    Button {
-        text: "slice border width -"
-        onClicked: series.at(0).borderWidth--;
-    }
-    Button {
-        text: "slice label visible"
-        onClicked: series.at(0).labelVisible = !series.at(0).labelVisible;
-    }
-    Button {
-        text: "slice label position inside"
-        onClicked: series.at(0).labelPosition = PieSlice.LabelInside;
-    }
-    Button {
-        text: "slice label position outside"
-        onClicked: series.at(0).labelPosition = PieSlice.LabelOutside;
-    }
-    Button {
-        text: "slice label arm len +"
-        onClicked: series.at(0).labelArmLengthFactor += 0.1;
-    }
-    Button {
-        text: "slice label arm len -"
-        onClicked: series.at(0).labelArmLengthFactor -= 0.1;
-    }
-    Button {
-        text: "slice label color"
-        onClicked: series.at(0).labelColor = main.nextColor();
-    }
-    Button {
-        text: "slice exploded"
-        onClicked: series.at(0).exploded = !series.at(0).exploded;
-    }
-    Button {
-        text: "slice explode dist +"
-        onClicked: series.at(0).explodeDistanceFactor += 0.1;
-    }
-    Button {
-        text: "slice explode dist -"
-        onClicked: series.at(0).explodeDistanceFactor -= 0.1;
-    }
-    Button {
-        text: "slice label fontsize -"
-        onClicked: series.at(0).labelFont.pixelSize -= 1;
+    Flow {
+        id: flow
+        spacing: 5
+        flow: Flow.TopToBottom
+
+        Button {
+            text: "visible"
+            onClicked: series.visible = !series.visible;
+        }
+        Button {
+            text: "series hpos +"
+            onClicked: series.horizontalPosition += 0.1;
+        }
+        Button {
+            text: "series hpos -"
+            onClicked: series.horizontalPosition -= 0.1;
+        }
+        Button {
+            text: "series vpos +"
+            onClicked: series.verticalPosition += 0.1;
+        }
+        Button {
+            text: "series vpos -"
+            onClicked: series.verticalPosition -= 0.1;
+        }
+        Button {
+            text: "series size +"
+            onClicked: series.size += 0.1;
+        }
+        Button {
+            text: "series size -"
+            onClicked: series.size -= 0.1;
+        }
+        Button {
+            text: "series start angle +"
+            onClicked: series.startAngle += 1.1;
+        }
+        Button {
+            text: "series start angle -"
+            onClicked: series.startAngle -= 1.1;
+        }
+        Button {
+            text: "series end angle +"
+            onClicked: series.endAngle += 1.1;
+        }
+        Button {
+            text: "series end angle -"
+            onClicked: series.endAngle -= 1.1;
+        }
+        Button {
+            text: "remove slice"
+            onClicked: series.remove(series.at(series.count - 1));
+        }
+        Button {
+            text: "slice color"
+            onClicked: series.at(0).color = main.nextColor();
+        }
+        Button {
+            text: "slice border color"
+            onClicked: series.at(0).borderColor = main.nextColor();
+        }
+        Button {
+            text: "slice border width +"
+            onClicked: series.at(0).borderWidth++;
+        }
+        Button {
+            text: "slice border width -"
+            onClicked: series.at(0).borderWidth--;
+        }
+        Button {
+            text: "slice label visible"
+            onClicked: series.at(0).labelVisible = !series.at(0).labelVisible;
+        }
+        Button {
+            text: "slice label position inside"
+            onClicked: series.at(0).labelPosition = PieSlice.LabelInside;
+        }
+        Button {
+            text: "slice label position outside"
+            onClicked: series.at(0).labelPosition = PieSlice.LabelOutside;
+        }
+        Button {
+            text: "slice label arm len +"
+            onClicked: series.at(0).labelArmLengthFactor += 0.1;
+        }
+        Button {
+            text: "slice label arm len -"
+            onClicked: series.at(0).labelArmLengthFactor -= 0.1;
+        }
+        Button {
+            text: "slice label color"
+            onClicked: series.at(0).labelColor = main.nextColor();
+        }
+        Button {
+            text: "slice exploded"
+            onClicked: series.at(0).exploded = !series.at(0).exploded;
+        }
+        Button {
+            text: "slice explode dist +"
+            onClicked: series.at(0).explodeDistanceFactor += 0.1;
+        }
+        Button {
+            text: "slice explode dist -"
+            onClicked: series.at(0).explodeDistanceFactor -= 0.1;
+        }
     }
-    Button {
-        text: "slice label fontsize +"
-        onClicked: series.at(0).labelFont.pixelSize += 1;
+
+    FontEditor {
+        id: fontEditor
+        fontDescription: "label"
+        function editedFont() {
+            return series.at(0).labelFont;
+        }
     }
 }
diff --git a/tests/qmlchartproperties/resources.qrc b/tests/qmlchartproperties/resources.qrc
index 71e5345..457f08a 100644
--- a/tests/qmlchartproperties/resources.qrc
+++ b/tests/qmlchartproperties/resources.qrc
@@ -19,5 +19,9 @@
         <file>qml/qmlchartproperties/PercentBarChart.qml</file>
         <file>qml/qmlchartproperties/Chart.qml</file>
         <file>qml/qmlchartproperties/ChartEditor.qml</file>
+        <file>qml/qmlchartproperties/ChartEditor1.qml</file>
+        <file>qml/qmlchartproperties/ChartEditor2.qml</file>
+        <file>qml/qmlchartproperties/ChartEditor3.qml</file>
+        <file>qml/qmlchartproperties/FontEditor.qml</file>
     </qresource>
 </RCC>