CircularGauge Style

[Traust]

Hi, I'm learning how to design dashboard and when I'm trying to use code from documentation for styling background, it doesn't work, every other part of this code works, but when i try to change background it doesn't work, it looks like it.

And it should look like this, so I'm wondering what's the problem?

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0


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


    Rectangle {
        width: 300
        height: 300
        color: "#494d53"

        CircularGauge {
            id: gauge
            anchors.centerIn: parent
            style: CircularGaugeStyle {
                id: style

                function degreesToRadians(degrees) {
                    return degrees * (Math.PI / 180);
                }

                background: Rectangle {
                    implicitHeight: gauge.height
                    implicitWidth: gauge.width
                    color: "black"
                    anchors.centerIn: parent
                    radius: 360

                    Image {
                        anchors.fill: parent
                        source: "qrc:/img/background.svg"
                        asynchronous: true
                        sourceSize {
                            width: width
                        }
                    }

                    Canvas {
                        property int value: gauge.value

                        anchors.fill: parent
                        onValueChanged: requestPaint()

                        function degreesToRadians(degrees) {
                          return degrees * (Math.PI / 180);
                        }

                        onPaint: {
                            var ctx = getContext("2d");
                            ctx.reset();
                            ctx.beginPath();
                            ctx.strokeStyle = "black"
                            ctx.lineWidth = outerRadius
                            ctx.arc(outerRadius,
                                  outerRadius,
                                  outerRadius - ctx.lineWidth / 2,
                                  degreesToRadians(valueToAngle(gauge.value) - 90),
                                  degreesToRadians(valueToAngle(gauge.maximumValue + 1) - 90));
                            ctx.stroke();
                        }
                    }
                }

                tickmark: Rectangle {
                    visible: styleData.value < 80 || styleData.value % 10 == 0
                    implicitWidth: outerRadius * 0.02
                    antialiasing: true
                    implicitHeight: outerRadius * 0.06
                    color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
                }

                minorTickmark: Rectangle {
                    visible: styleData.value < 80
                    implicitWidth: outerRadius * 0.01
                    antialiasing: true
                    implicitHeight: outerRadius * 0.03
                    color: "#e5e5e5"
                }

                tickmarkLabel:  Text {
                    font.pixelSize: Math.max(6, outerRadius * 0.1)
                    text: styleData.value
                    color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
                    antialiasing: true
                }

                needle: Rectangle {
                    y: outerRadius * 0.15
                    implicitWidth: outerRadius * 0.03
                    implicitHeight: outerRadius * 0.9
                    antialiasing: true
                    color: "#e5e5e5"
                }

                foreground: Item {
                    Rectangle {
                        width: outerRadius * 0.2
                        height: width
                        radius: width / 2
                        color: "#e5e5e5"
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }
}

[jsulm]

@Traust I think you need to set "anchors.fill :" so your gauge is actually using the whole space

[Traust]

Thanks, I'm surprised it was so easy