Contents

Charts with QML Gallery

Demonstrates how to use the different chart types by using qml.

Screenshot showing the number of NHL All-Star Team Players from three different countries displayed as an area chart, the green area being Swedish, the blue area being Russian, and the orange area being Finnish. On the left side are different options to change the chart to different chart types

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.

This is a Qt Quick application, the files for each chart type are located in the qml directory of the example folder and are loaded arranged into a ListView by main.qml, located in this examples directory.

This documentation won't focus on the top level layout or loading, but rather on the use of the Qt Charts QML API.

Including dependencies

All .qml files start with:

 import QtQuick
 import QtCharts

Creating charts with QML

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

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

Screenshot showing the top five car brand shares in Finland displayed as a pie chart

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

     property variant othersSlice: 0

     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;
     }
 }

You can create a chart with a line series:

Screenshot showing a line chart example

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

     LineSeries {
         name: "Line"
         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 a spline series:

Screenshot showing a spline chart example

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

     SplineSeries {
         name: "Spline"
         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 }
     }
 }

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

Screenshot showing the number of NHL All-Star Team Players from three different countries displayed as an area chart, the green area being Swedish, the blue area being Russian, and the orange area being Finnish

 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:

Screenshot showing two scatter series stacked in a chart and with scatter1 having blue dots and scatter2 having green dots

 ChartView {
     title: "Scatter Chart"
     anchors.fill: parent
     antialiasing: true

     ScatterSeries {
         id: scatter1
         name: "Scatter A"
         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: "Scatter B"
         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:

Screenshot showing contributions from three different people as a bar series, with Bob being the blue bar, Susan being green and James being orange

 ChartView {
     title: "Bar Chart"
     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] }
     }
 }

Screenshot showing the contributions from the same people but as a stacked bar series

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

     StackedBarSeries {
         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] }
     }
 }

Screenshot showing the contributions from the same people, but as a percent bar series

 ChartView {
     title: "Percent Bar Chart"
     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] }
     }
 }

Screenshot showing the contributions from the same people but as a horizontal bar series

 ChartView {
     title: "Horizontal Bar Chart"
     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] }
     }
 }

Screenshot showing the contributions from the same people, but as a horizontal stacked bar series

 ChartView {
     title: "Horizontal Stacked Bar Chart"
     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] }
     }
 }

Screenshot showing the contributions from the same people, but as a horizontal percent bar series

 ChartView {
     title: "Horizontal Percent Bar Chart"
     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] }
     }
 }

This demonstrates how to create a donut chart with two pie series:

Screenshot showing production costs displayed as a donut chart with the main tops having subtopics

 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, anti-aliasing is set with the qml property in Qt Quick 2.

More charts

See the following links for walk-through of the remaining charts in this example app.

Customizing Chart Views with QML

Shows you how to customize different visual properties of a ChartView and a series.

Customizing Legends

Shows you how to create your own custom legend.

Using Axes with QML

Demonstrates how to use axes in your QML application.

Using List Models as Data Sources in QML

Implements an F1 Legends Chart to demonstrate List Models as Data Sources.

Using Polar Charts with QML

Shows how to make a few different polar chart in your QML application.

Example project @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners.
The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation.
Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.