Qt Graphs Migration from Qt Charts | Qt Graphs (original) (raw)

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:

has to be changed to:

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:

has to be changed to:

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:

With Qt Graphs:

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](qml-qtgraphs-barseries.html) {
    id: mySeries
    [BarSet](qml-qtgraphs-barset.html) { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
    [BarSet](qml-qtgraphs-barset.html) { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
    [BarSet](qml-qtgraphs-barset.html) { 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](qml-qtgraphs-pieseries.html) {
    id: pieInner
    size: 0.7
    holeSize: 0.25

    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Materials"; value: 10334; color: "#B9DB8A" }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Employee"; value: 3066; color: "#DCEDC4" }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Logistics"; value: 6111; color: "#F3F9EB" }

    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Materials"; value: 7371; color: "#63BCE9" }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Employee"; value: 2443; color: "#A6D9F2" }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Logistics"; value: 1291; color: "#E9F5FC" }

    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Materials"; value: 4022; color: "#F9C36C" }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Employee"; value: 3998; color: "#FCE1B6" }
    [PieSlice](qml-qtgraphs-pieslice.html) { 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](qml-qtgraphs-pieseries.html) {
    id: pieInner
    pieSize: 0.7
    holeSize: 0.25

    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Materials"; value: 10334; color: "#B9DB8A" }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Employee"; value: 3066; color: "#DCEDC4" }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Logistics"; value: 6111; color: "#F3F9EB" }

    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Materials"; value: 7371; color: "#63BCE9" }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Employee"; value: 2443; color: "#A6D9F2" }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Logistics"; value: 1291; color: "#E9F5FC" }

    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Materials"; value: 4022; color: "#F9C36C" }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Employee"; value: 3998; color: "#FCE1B6" }
    [PieSlice](qml-qtgraphs-pieslice.html) { 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:

With Qt Graphs:

Migrating Pie series

With Qt Charts:

ChartView { property variant othersSlice: 0

[PieSeries](qml-qtgraphs-pieseries.html) {
    id: pieSeries
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Volkswagen"; value: 13.5 }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Toyota"; value: 10.9 }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Ford"; value: 8.6 }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Skoda"; value: 8.2 }
    [PieSlice](qml-qtgraphs-pieslice.html) { 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](qml-qtgraphs-pieseries.html) {
    id: pieSeries
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Volkswagen"; value: 13.5 }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Toyota"; value: 10.9 }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Ford"; value: 8.6 }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Skoda"; value: 8.2 }
    [PieSlice](qml-qtgraphs-pieslice.html) { label: "Volvo"; value: 6.8 }
}

Component.onCompleted: {
    othersSlice = pieSeries.append("Others", 52.0);
    pieSeries.find("Volkswagen").exploded = true;
}

}

Migrating Scatter series

With Qt Charts:

With Qt Graphs:

Migrating Spline series

With Qt Charts:

With Qt Graphs: