Qml Charts Example | Qt Charts 6.4.1

- Qt 6.4
- Qt Charts
- Qt Charts Examples
- Qml Charts Example
- Qt Charts | Commercial or GPLv3

# Qml Charts Example

This basic demonstration shows how to use the different chart types by using qml.

#### Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

#### Creating Charts Using QML

Creating each chart type begins with the creation of a ChartView.

To create a pie, we use the PieSeries API together with a few PieSlices:

     ChartView {
         id: chart
         title: "Top-5 car brand shares in Finland"
         anchors.fill: parent
         legend.alignment: Qt.AlignBottom
         antialiasing: true

         PieSeries {
             id: pieSeries
             PieSlice { label: "Volkswagen"; value: 13.5 }
             PieSlice { label: "Toyota"; value: 10.9 }
             PieSlice { label: "Ford"; value: 8.6 }
             PieSlice { label: "Skoda"; value: 8.2 }
             PieSlice { label: "Volvo"; value: 6.8 }
         }
     }

     Component.onCompleted: {
         // You can also manipulate slices dynamically, like append a slice or set a slice exploded
         othersSlice = pieSeries.append("Others", 52.0);
         pieSeries.find("Volkswagen").exploded = true;
     }

To create a chart with a line series:

     ChartView {
         title: "Line"
         anchors.fill: parent
         antialiasing: true

         LineSeries {
             name: "LineSeries"
             XYPoint { x: 0; y: 0 }
             XYPoint { x: 1.1; y: 2.1 }
             XYPoint { x: 1.9; y: 3.3 }
             XYPoint { x: 2.1; y: 2.1 }
             XYPoint { x: 2.9; y: 4.9 }
             XYPoint { x: 3.4; y: 3.0 }
             XYPoint { x: 4.1; y: 3.3 }
         }
     }

And spline series:

     ChartView {
         title: "Spline"
         anchors.fill: parent
         antialiasing: true

         SplineSeries {
             name: "SplineSeries"
             XYPoint { x: 0; y: 0.0 }
             XYPoint { x: 1.1; y: 3.2 }
             XYPoint { x: 1.9; y: 2.4 }
             XYPoint { x: 2.1; y: 2.1 }
             XYPoint { x: 2.9; y: 2.6 }
             XYPoint { x: 3.4; y: 2.3 }
             XYPoint { x: 4.1; y: 3.1 }
         }
     }

Then we create a chart that illustrates the NHL All-Star player selections by using three area series:

     ChartView {
         title: "NHL All-Star Team Players"
         anchors.fill: parent
         antialiasing: true

         // Define x-axis to be used with the series instead of default one
         ValueAxis {
             id: valueAxis
             min: 2000
             max: 2011
             tickCount: 12
             labelFormat: "%.0f"
         }

         AreaSeries {
             name: "Russian"
             axisX: valueAxis
             upperSeries: LineSeries {
                 XYPoint { x: 2000; y: 1 }
                 XYPoint { x: 2001; y: 1 }
                 XYPoint { x: 2002; y: 1 }
                 XYPoint { x: 2003; y: 1 }
                 XYPoint { x: 2004; y: 1 }
                 XYPoint { x: 2005; y: 0 }
                 XYPoint { x: 2006; y: 1 }
                 XYPoint { x: 2007; y: 1 }
                 XYPoint { x: 2008; y: 4 }
                 XYPoint { x: 2009; y: 3 }
                 XYPoint { x: 2010; y: 2 }
                 XYPoint { x: 2011; y: 1 }
             }
         }
         ...

Then a couple of scatter series:

     ChartView {
         title: "Scatters"
         anchors.fill: parent
         antialiasing: true

         ScatterSeries {
             id: scatter1
             name: "Scatter1"
             XYPoint { x: 1.5; y: 1.5 }
             XYPoint { x: 1.5; y: 1.6 }
             XYPoint { x: 1.57; y: 1.55 }
             XYPoint { x: 1.8; y: 1.8 }
             XYPoint { x: 1.9; y: 1.6 }
             XYPoint { x: 2.1; y: 1.3 }
             XYPoint { x: 2.5; y: 2.1 }
         }

         ScatterSeries {
             name: "Scatter2"
             XYPoint { x: 2.0; y: 2.0 }
             XYPoint { x: 2.0; y: 2.1 }
             XYPoint { x: 2.07; y: 2.05 }
             XYPoint { x: 2.2; y: 2.9 }
             XYPoint { x: 2.4; y: 2.7 }
             XYPoint { x: 2.67; y: 2.65 }
         }
     }
         ...

And a few different bar series:

     ChartView {
         title: "Bar series"
         anchors.fill: parent
         legend.alignment: Qt.AlignBottom
         antialiasing: true

         BarSeries {
             id: mySeries
             axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
             BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
             BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
             BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
         }
     }

     ChartView {
         title: "Stacked Bar series"
         anchors.fill: parent
         legend.alignment: Qt.AlignBottom
         antialiasing: true

         StackedBarSeries {
             id: mySeries
             axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
             BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
             BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
             BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
         }
     }

     ChartView {
         title: "Percent Bar series"
         anchors.fill: parent
         legend.alignment: Qt.AlignBottom
         antialiasing: true

         PercentBarSeries {
             axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
             BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
             BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
             BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
         }
     }

     ChartView {
         title: "Horizontal Bar series"
         anchors.fill: parent
         legend.alignment: Qt.AlignBottom
         antialiasing: true

         HorizontalBarSeries {
             axisY: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
             BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
             BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
             BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
         }
     }

     ChartView {
         title: "Horizontal Stacked Bar series"
         anchors.fill: parent
         legend.alignment: Qt.AlignBottom
         antialiasing: true

         HorizontalStackedBarSeries {
             axisY: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
             BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
             BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
             BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
         }
     }

     ChartView {
         title: "Horizontal Percent Bar series"
         anchors.fill: parent
         legend.alignment: Qt.AlignBottom
         antialiasing: true

         HorizontalPercentBarSeries {
             axisY: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
             BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
             BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
             BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
         }
     }

And finally an example demonstrating how to create a donut chart with two pie series:

     ChartView {
         id: chart
         title: "Production costs"
         anchors.fill: parent
         legend.visible: false
         antialiasing: true

         PieSeries {
             id: pieOuter
             size: 0.96
             holeSize: 0.7
             PieSlice { id: slice; label: "Alpha"; value: 19511; color: "#99CA53" }
             PieSlice { label: "Epsilon"; value: 11105; color: "#209FDF" }
             PieSlice { label: "Psi"; value: 9352; color: "#F6A625" }
         }

         PieSeries {
             size: 0.7
             id: pieInner
             holeSize: 0.25

             PieSlice { label: "Materials"; value: 10334; color: "#B9DB8A" }
             PieSlice { label: "Employee"; value: 3066; color: "#DCEDC4" }
             PieSlice { label: "Logistics"; value: 6111; color: "#F3F9EB" }

             PieSlice { label: "Materials"; value: 7371; color: "#63BCE9" }
             PieSlice { label: "Employee"; value: 2443; color: "#A6D9F2" }
             PieSlice { label: "Logistics"; value: 1291; color: "#E9F5FC" }

             PieSlice { label: "Materials"; value: 4022; color: "#F9C36C" }
             PieSlice { label: "Employee"; value: 3998; color: "#FCE1B6" }
             PieSlice { label: "Logistics"; value: 1332; color: "#FEF5E7" }
         }
     }

     Component.onCompleted: {
         // Set the common slice properties dynamically for convenience
         for (var i = 0; i < pieOuter.count; i++) {
             pieOuter.at(i).labelPosition = PieSlice.LabelOutside;
             pieOuter.at(i).labelVisible = true;
             pieOuter.at(i).borderWidth = 3;
         }
         for (var i = 0; i < pieInner.count; i++) {
             pieInner.at(i).labelPosition = PieSlice.LabelInsideNormal;
             pieInner.at(i).labelVisible = true;
             pieInner.at(i).borderWidth = 2;
         }
     }

Additionally, antialiasing is set with the qml property in Qt Quick 2.

Example project @ code.qt.io