Circular Gauge, not centralized needle (offset)

[alizadeh91]

Hi, I want to style the CircularGauge as below:

As can be see, the needle and also tick origin centers are not sync (have some offset in vertical position). So this my problem. How can I implement this and create this offset in the needle component?

this is my code until now:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0

CircularGauge {
    id: gauge;
    style: CircularGaugeStyle {
        labelStepSize: 10
        tickmarkStepSize: 2;
        labelInset: outerRadius / 2.5
        tickmarkInset: outerRadius / 4.2
        minorTickmarkInset: outerRadius / 4.2
        minimumValueAngle: -50
        maximumValueAngle: 50

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

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

        needle: Item {
//            y: -outerRadius * 0.4;
            height: outerRadius * 0.8
            x: -needle.width / 2.0;
            antialiasing: true;
            Image {
                id: needle
                source: "qrc:/img/No4/needle.svg"
                height: parent.height
                width: height * 0.155
                asynchronous: true
                antialiasing: true
            }
        }

        foreground: Item {

            Image {
                id: needleCntr
                source: "qrc:/img/No4/needleTop.svg";
                anchors.fill: parent;
                antialiasing: true
            }

            Image {
                id: glassImg
                source: "qrc:/img/No4/glass.svg"
                anchors.centerIn: parent
                anchors.leftMargin: outerRadius * 0.12;
                anchors.rightMargin: outerRadius * 0.12;
                anchors.topMargin: outerRadius * 0.12;
                anchors.bottomMargin:  outerRadius * 0.12;
                antialiasing: true
                anchors.fill: parent;
                z: 20;
            }
        }

        tickmarkLabel:  null;

        tickmark: null;

        minorTickmark: null;
    }
}

and the result is:

You can see that the needle center is synced with background center. How can I create the offset.

[Pablo J. Rogina]

@alizadeh91 have you check the documentation about CircularGaugeStyle?

When defining your own needle component, the only properties that the style requires you to set are the implicitWidth and implicitHeight.

which looks like you're not setting.

Also this document refers to styling the needle and those mentioned properties.