Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How can I add a background image in a QML chart



  • Hi,

    I would like to add a background image to a QML chart.
    I found a post on the subject for Widget chart
    https://forum.qt.io/topic/108046/qchart-background-image
    But I couldn't find the equivalent to
    chart->setPlotAreaBackgroundBrush(translated);
    chart->setPlotAreaBackgroundVisible(true);
    in QML

    Has someone an idea?
    Thanks



  • @Bert59 You have place image into the chartview... so it is over it.
    @fcarney Place image before the Chart, so it is behind!

    You can play with Z order to put image behind.

    ChartView {
    ...
           Image {
                id: image2
                anchors.fill: parent
                source: "qrc:/image/Image.jpg"
                opacity: 0.5
                z: -1
            }
    ...
    }
    


  • Can you set the background to transparent? Is it already transparent? Then place an image that fills the chart area, but is behind the chart?

    Image {
      anchors.fill: chartitem
    }
    Chart {
      id: chartitem
    }
    


  • Thank you for your feedback.

    Here is what I did:

    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.fill: parent
    
        ChartView {
            id: line
            backgroundColor: "transparent"
            Layout.fillHeight: true
            Layout.fillWidth: true
    
            Image{
                id: image2
                anchors.fill: line
                source: "qrc:/image/Image.jpg"
                opacity: 0.5
    
            }
    
            LineSeries {
                name: "LineSeries"
                XYPoint {
                    x: 0
                    y: 2
                }
    
                XYPoint {
                    x: 1
                    y: 1.2
                }
    
                XYPoint {
                    x: 2
                    y: 3.3
                }
    
                XYPoint {
                    x: 5
                    y: 2.1
                }
            }
       }
    
        RowLayout{
            Button{
                text: "Button 1"
                Layout.fillWidth: true
    
            }
    
            Button{
                text: "Button 2"
                Layout.fillWidth: true
            }
        }
    }
    

    }

    But the image is always on top of the ChartView and hides the plots.
    I can see the plots below by setting the opacity to less than 1.
    How can I put the image below the Chart?
    I tried z: 0, but it has no effect
    How can I resize the image to fit inside the axes of the chart?

    Thank you



  • @Bert59 You have place image into the chartview... so it is over it.
    @fcarney Place image before the Chart, so it is behind!

    You can play with Z order to put image behind.

    ChartView {
    ...
           Image {
                id: image2
                anchors.fill: parent
                source: "qrc:/image/Image.jpg"
                opacity: 0.5
                z: -1
            }
    ...
    }
    


  • Thank you,
    With z: -1 it works.
    I tried z: 0 which was not working. I didn' know that z can have negative values. I started learning QML just a month ago.

    Do you have an idea how I could scale the image to fit inside the axes limits?



  • @Bert59 said in How can I add a background image in a QML chart:

    Do you have an idea how I could scale the image to fit inside the axes limits?

    I think you can do it with property plotArea.
    Perhaps something like (have not tested it):

    ChartView {
    ...
           Image {
                id: image2
                x: plotArea.x
                y: plotArea.y
                width: plotArea.width
                height: plotArea.height
                source: "qrc:/image/Image.jpg"
                opacity: 0.5
                z: -1
            }
    ...
    }
    


  • It works.
    Thank you


Log in to reply