Qt Graphs Migration from Qt Charts | Qt Graphs | Qt 6.10.3

- Qt 6.10
- Qt Graphs
- Qt Graphs Overview for 2D
- Qt Graphs Migration from Qt Charts
- Qt Graphs | Commercial or GPLv3

Qt Graphs 2D ◦ C++ Classes

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

Qt Graphs 2D ◦ C++ Classes