Contents

Qt Graphs Migration from Qt Charts

The API and functionality between Qt Charts and Qt Graphs is slightly different. This article explains the differences between the API of both Qt Charts to Qt Graphs:

QML Import Statement

The import statement in Qt Charts:

 import QtCharts

has to be changed to:

 import QtGraphs

for Qt Graphs.

CMake Module Inclusion

The inclusion in Qt Charts:

 find_package(Qt6 REQUIRED COMPONENTS Charts)
 target_link_libraries(mytarget PRIVATE Qt6::Charts)

has to be changed to:

 find_package(Qt6 REQUIRED COMPONENTS Graphs)
 target_link_libraries(mytarget PRIVATE Qt6::Graphs)

for Qt Graphs.

Qmake Module Inclusion

The inclusion in Qt Charts:

 QT += charts

has to be changed to:

 QT += graphs

for Qt Graphs.

Features missing in Qt Graphs

These features are missing in Qt Graphs in 6.8 release:

  • Qt Graphs Widgets
  • Candlestick charts
  • Box-and-whiskers chart
  • Titles and legends
  • Log value axis
  • Polar chart view

Theme APIs

The theming between 2D and 3D graphs is unified, for the theme settings, see GraphsTheme.

The generic color scheme of the whole graph is now controlled by a color scheme property, and series colors by a theme property. If color scheme is not explicitly set, it will follow the desktop theming (Light/Dark).

Enums

In Qt Graphs 2D, all the enums are implemented as scoped enums, for example, for the PieSlice.LabelOutside in Qt Charts, the corresponding enum in Qt Graphs 2D is PieSlice.LabelPosition.Outside.

Migrating chart series in QML

This section gives the examples of how to migrate you code with Qt Charts to the Qt Graphs 2D.

Migrating Area series

These code samples implement similar charts:

With Qt Charts:

 ChartView {
     anchors.fill: parent
     ValueAxis {
         id: valueAxisX
         max: 8
     }

     ValueAxis {
         id: valueAxisY
         max: 4
     }

     AreaSeries {
         axisX: valueAxisX
         axisY: valueAxisY
         upperSeries: LineSeries {
             XYPoint { x: 0; y: 2 }
             XYPoint { x: 1; y: 3.5 }
             XYPoint { x: 2; y: 3.8 }
         }
         lowerSeries: LineSeries {
             XYPoint { x: 0.4; y: 1.5 }
             XYPoint { x: 1; y: 2.5 }
             XYPoint { x: 2.4; y: 3 }
         }
     }
 }

With Qt Graphs:

 GraphsView {
     anchors.fill: parent
     axisX: ValueAxis {
         id: xAxis
         max: 8
         tickInterval: 2.0
     }

     axisY: ValueAxis {
         id: yAxis
         max: 4
         tickInterval: 1.0
     }

     AreaSeries {
         upperSeries: LineSeries {
             XYPoint { x: 0; y: 2 }
             XYPoint { x: 1; y: 3.5 }
             XYPoint { x: 2; y: 3.8 }
         }

         lowerSeries: LineSeries {
             XYPoint { x: 0.4; y: 1.5 }
             XYPoint { x: 1; y: 2.5 }
             XYPoint { x: 2.4; y: 3 }
         }
     }
 }

Migrating Bar series

With Qt Charts:

 import QtQuick
 import QtCharts

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

With Qt Graphs:

 GraphsView {
     axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }

     BarSeries {
         id: mySeries
         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] }
     }
 }

Migrating Donut series

With Qt Charts:

 import QtQuick
 import QtCharts

 ChartView {
     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 {
         id: pieInner
         size: 0.7
         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;
         }
     }
 }

With Qt Graphs:

 GraphsView {
     PieSeries {
         id: pieOuter
         pieSize: 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 {
         id: pieInner
         pieSize: 0.7
         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.LabelPosition.Outside;
             pieOuter.at(i).labelVisible = true;
             pieOuter.at(i).borderWidth = 3;
         }
         for (var i = 0; i < pieInner.count; i++) {
             pieInner.at(i).labelPosition = PieSlice.LabelPosition.InsideNormal;
             pieInner.at(i).labelVisible = true;
             pieInner.at(i).borderWidth = 2;
         }
     }
 }

Migrating Line series

With Qt Charts:

 ChartView {
     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 }
     }
 }

With Qt Graphs:

 GraphsView {
     // Graphs don't calculate a visible range for axes.
     // You should define the visible range explicitly.
     axisX: ValueAxis {
         id: xAxis
         max: 4.1
     }
     axisY: ValueAxis {
         id: yAxis
         max: 4.9
     }

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

Migrating Pie series

With Qt Charts:

 ChartView {
     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: {
         othersSlice = pieSeries.append("Others", 52.0);
         pieSeries.find("Volkswagen").exploded = true;
     }
 }

With Qt Graphs:

 GraphsView {
     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: {
         othersSlice = pieSeries.append("Others", 52.0);
         pieSeries.find("Volkswagen").exploded = true;
     }
 }

Migrating Scatter series

With Qt Charts:

 ChartView {
     ScatterSeries {
         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 }
     }
 }

With Qt Graphs:

 GraphsView {
     // Graphs don't calculate a visible range for axes.
     // You should define the visible range explicitly.
     ValueAxis {
         id: xyAxis
         min: 1.3
         max: 2.5
     }
     axisX: xyAxis
     axisY: xyAxis

     ScatterSeries {
         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 }
     }
 }

Migrating Spline series

With Qt Charts:

 ChartView {
     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 }
     }
 }

With Qt Graphs:

 GraphsView {
     ValueAxis {
         id: xyAxis
         max: 5
     }
     axisX: xyAxis
     axisY: xyAxis
     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 }
     }
 }

© 2024 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.