Important: Please read the Qt Code of Conduct -

Add widget from C++ to QML

  • Hello all!

    I have the following question: I have created QChartView in my C++ code to display some inner data (have already added necessary axes, data, fonts). I can get pointer to this object from C++ in QML. But what is the correct way to add it in QML (e.g. add it in some Item and use like usual QML object):

    ChartView { // Here is my C++ object, not new one
        id: _myChart
        anchors.fill: parent
        antialiasing: true

    and so on?

  • You have an XY problem, can't add QWidget in QML. Apart from that your question is confusing, could you provide a minimal verifiable example.

  • @St-Stanislav Not sure if this helps, but there is this the QtQuickWidget.

    Edit: It looks to do the opposite though.

  • @fcarney said in Add widget from C++ to QML:

    It looks to do the opposite though.

    yes, it is.
    But there is QQuickItem that can be used to define a visual qml item in c++.

  • Lifetime Qt Champion


    If you want to mix widgets within your QtQuick application you should check KDAB's DeclarativeWidgets project.

  • @SGaist DeclarativeWidgets does not allow combining qml Items with QWidget but only allows defining QWidgets from qml similar to what .ui does

  • Lifetime Qt Champion

    Your description is not exactly clear.

    Can you please provide an example of what exactly you are trying to achieve ?

  • @eyllanesc @SGaist

    I have tried to describe my issue more detailed. Generally my current state and plan is following: I have several external devices, I get data from them and show on plot sequentially. I use QML in the following way (here is essential part of the code):

    Item {
        id: root
        ChartView {
            id: chartIntensity
            axes: [
                ValueAxis {
                    id: xAxis
                    min: baseChartView.minX
                    max: baseChartView.maxX
                ValueAxis {
                    id: yAxis
                    min: baseChartView.minY
                    max: baseChartView.maxY
            LineSeries {
                id: lineSerieIntensity
                axisX: xAxis
                axisY: yAxis
                useOpenGL: true
        Component.onCompleted: {

    Here you can see baseChartView, it is my own class, where I do a lot of work (resize axis, add additional plots and so on). I create method setMainSeries(QAbstractSeries* abstractSeries) to catch ChartView (but basically I get QChart and then receive its line series) that has been created in QML and to work with it:

    void BaseChartView::setMainSeries(QAbstractSeries *abstractSeries)
        if (abstractSeries == Q_NULLPTR) return;
        if (abstractSeries->type() == QtCharts::QAbstractBarSeries::SeriesTypeLine) 
            m_mainSeries = static_cast<QLineSeries*>(abstractSeries);
        m_chart = m_mainSeries->chart();

    That was my working code when I use only one device at once. Now I'm going to use several external devices and plot data from them separately and simultaneously. So I have decided to use ListView in QML and create my own delegate and connect with some inner c++ object (corresponding to the external devices). Let me call it ExDevice. I have planned to create QChart inside my C++ code (and inside every ExDevice) and show it on my ListView delegate. If I continue with my already checked code, I need to create ChartView inside my ListView delegate and get QChart pointer as I have done before. I don't know, if it is a correct way. So I wondering about reverse approach. If my suggest about this reverse approach is not correct (creating QChart inside ExDevice and showing it someway in QML), I would be appreciate for any advices about good practice about my task.

    Thank you in advance!

  • Lifetime Qt Champion

    AFAIK, the QtQuick ChartView type has nothing to do with the QChart class.

    Your backend should only manage your device and provide the data so you keep things cleanly separated. Then you UI is responsible to do the updates.

  • @SGaist But does it connected with QChartView? Anyway, am I right to use my current approach? I create ChartView in QML, then it's pointer in C++ and manage it with C++?
    I had some problems with this approach: my backend is created earlier than UI, so I should to keep uninitialized state till QML create UI and C++ gets access to ChartView.

  • Lifetime Qt Champion

    I took a look at the DeclarativeChart class and it does use QChart under the hood (but does not inherit from it).

    Your backend should really be independent of your GUI.

    Only provide data and then you can update your series in your QML code.

Log in to reply