QML Gauge how to make initial value? - qt

Question

I'm trying to make Gauge's indicator start from 0, not from -5000. I managed to make it start from 0 to 5000. But as soon as I set any negative value, the indicator is not displayed. Help me please.
import QtQuick 2.12
import QtQuick.Window 2.12
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
import QtCharts 2.3
Window {
id: winapp
visible: true
width: 1000
height: 630
color: "#1b2153"
title: qsTr("FirstProject")
Gauge {
id: gauge1
x: 20
y: 53
width: 44
height: 547
anchors.bottom: parent.bottom
anchors.bottomMargin: 30
value: 1246
minimumValue: -5000
maximumValue: 5000
tickmarkStepSize: 500
formatValue: function(value) {
return value.toFixed(0);
}
property double minBarValue: 0
style: GaugeStyle{
valueBar: Item {
implicitWidth: 16
Rectangle {
width: parent.width
height: (gauge1.value === gauge1.minimumValue) ? 0 : parent.height / (gauge1.value - gauge1.minimumValue) * (gauge1.value - gauge1.minBarValue)
}
}
}
}
}
indicator image

Answer 1

I noticed that when values are negative, the calculated gauge height becomes negative. That is why no gauge is visible. Accounting for that can be achieved fairly easy like this for example:
import QtQuick 2.12
import QtQuick.Window 2.12
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
import QtCharts 2.3
Window {
id: winapp
visible: true
width: 1000
height: 630
color: "#1b2153"
title: qsTr("FirstProject")
Gauge {
id: gauge1
x: 20
y: 53
width: 44
height: 547
anchors.bottom: parent.bottom
anchors.bottomMargin: 30
value: 500
minimumValue: -5000
maximumValue: 5000
tickmarkStepSize: 500
formatValue: function(value) {
return value.toFixed(0);
}
property double minBarValue: 0
style: GaugeStyle{
valueBar: Item {
implicitWidth: 16
Rectangle {
width: parent.width
height: {
var maxSpan = Math.abs(gauge1.maximumValue) + Math.abs(gauge1.minimumValue)
var fill = Math.abs(gauge1.value)
var fillPercent = fill/maxSpan
var fillHeight = gauge1.height * fillPercent
return fillHeight - fillHeight/50
}
Component.onCompleted: {
if (gauge1.value < 0) {
y = -height
}
}
}
}
}
}
}