How can I add a background image in a QML chart

[Bert59]

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

[KroMignon]

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

[fcarney]

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
}

[Bert59]

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

[KroMignon]

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

[Bert59]

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?

[KroMignon]

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

[Bert59]

It works.
Thank you