diff --git a/nymea-app/ui/customviews/StateChart.qml b/nymea-app/ui/customviews/StateChart.qml
index 6034a715..e5707291 100644
--- a/nymea-app/ui/customviews/StateChart.qml
+++ b/nymea-app/ui/customviews/StateChart.qml
@@ -230,13 +230,24 @@ Item {
         }
 
         Item {
+            id: chartContainer
             Layout.fillWidth: true
             Layout.fillHeight: true
 
+            readonly property int yAxisLabelAreaWidth: labelsLayout.visible
+                                                       ? Math.max(Style.smallMargins * 2, Math.max(minValueLabelMetrics.width, maxValueLabelMetrics.width) + Style.smallMargins * 2)
+                                                       : 0
+
+            // Rectangle {
+            //     anchors.fill: parent
+            //     color: Style.tileBackgroundColor
+            //     radius: Style.cornerRadius
+            // }
 
             ChartView {
                 id: chartView
                 anchors.fill: parent
+                anchors.leftMargin: chartContainer.yAxisLabelAreaWidth
                 //                backgroundColor: "transparent"
                 margins.left: 0
                 margins.right: 0
@@ -259,15 +270,27 @@ Item {
 
                 Label {
                     anchors.centerIn: parent
-                    visible: !logsModel.busy && logsModel.count == 0
+                    visible: !logsModel.busy && logsModel.count === 0
                     text: qsTr("No data")
                     font: Style.smallFont
                     opacity: .5
                 }
 
+                TextMetrics {
+                    id: minValueLabelMetrics
+                    font: Style.extraSmallFont
+                    text: root.stateType ? Types.toUiValue(valueAxis.min, root.stateType.unit).toFixed(labelsLayout.precision) + " " + Types.toUiUnit(root.stateType.unit) : ""
+                }
+
+                TextMetrics {
+                    id: maxValueLabelMetrics
+                    font: Style.extraSmallFont
+                    text: root.stateType ? Types.toUiValue(valueAxis.max, root.stateType.unit).toFixed(labelsLayout.precision) + " " + Types.toUiUnit(root.stateType.unit) : ""
+                }
+
                 Label {
-                    x: chartView.x + chartView.plotArea.x + (chartView.plotArea.width - width) / 2
-                    y: chartView.y + chartView.plotArea.y + Style.smallMargins
+                    x: chartView.plotArea.x + (chartView.plotArea.width - width) / 2
+                    y: chartView.plotArea.y + Style.smallMargins
                     text: {
                         switch (d.sampleRate) {
                         case NewLogsModel.SampleRate1Min:
@@ -286,6 +309,7 @@ Item {
                     opacity: ((new Date().getTime() - d.now.getTime()) / d.sampleRate / 60000) > d.visibleValues ? .5 : 0
                     Behavior on opacity { NumberAnimation {} }
                 }
+
                 ValueAxis {
                     id: valueAxis
                     min: logsModel.minValue == undefined || logsModel.minValue == 0
@@ -305,32 +329,6 @@ Item {
                     labelsColor: Style.foregroundColor
 
                 }
-                // Overriding the labels with our own as printf struggles with special chars
-                Item {
-                    id: labelsLayout
-                    x: Style.smallMargins
-                    y: chartView.plotArea.y
-                    height: chartView.plotArea.height
-                    width: chartView.plotArea.x - x
-                    visible: root.stateType.type.toLowerCase() != "bool" && logsModel.minValue != logsModel.maxValue
-                    property double range: Math.abs(valueAxis.max - valueAxis.min)
-                    property double stepSize: range / (valueAxis.tickCount - 1)
-                    property int precision: valueAxis.max - valueAxis.min < 5 ? 2 : 0
-
-                    Repeater {
-                        model: valueAxis.tickCount
-                        delegate: Label {
-                            y: parent.height / (valueAxis.tickCount - 1) * index - font.pixelSize / 2
-                            width: parent.width - Style.smallMargins
-                            horizontalAlignment: Text.AlignRight
-                            property double offset: (valueAxis.tickCount - index - 1) * labelsLayout.stepSize
-                            property double value: valueAxis.min + offset
-                            text: root.stateType ? Types.toUiValue(value, root.stateType.unit).toFixed(labelsLayout.precision) + " " + Types.toUiUnit(root.stateType.unit) : ""
-                            verticalAlignment: Text.AlignTop
-                            font: Style.extraSmallFont
-                        }
-                    }
-                }
 
                 DateTimeAxis {
                     id: dateTimeAxis
@@ -414,13 +412,40 @@ Item {
                 }
             }
 
+            // Overriding the labels with our own as printf struggles with special chars
+            Item {
+                id: labelsLayout
+                x: Style.smallMargins
+                y: chartView.y + chartView.plotArea.y
+                height: chartView.plotArea.height
+                width: Math.max(0, chartContainer.yAxisLabelAreaWidth - Style.smallMargins)
+                visible: root.stateType && root.stateType.type.toLowerCase() != "bool" && logsModel.minValue != logsModel.maxValue
+                property double range: Math.abs(valueAxis.max - valueAxis.min)
+                property double stepSize: range / (valueAxis.tickCount - 1)
+                property int precision: valueAxis.max - valueAxis.min < 5 ? 2 : 0
+
+                Repeater {
+                    model: valueAxis.tickCount
+                    delegate: Label {
+                        y: parent.height / (valueAxis.tickCount - 1) * index - font.pixelSize / 2
+                        width: parent.width - Style.smallMargins
+                        horizontalAlignment: Text.AlignRight
+                        property double offset: (valueAxis.tickCount - index - 1) * labelsLayout.stepSize
+                        property double value: valueAxis.min + offset
+                        text: root.stateType ? Types.toUiValue(value, root.stateType.unit).toFixed(labelsLayout.precision) + " " + Types.toUiUnit(root.stateType.unit) : ""
+                        verticalAlignment: Text.AlignTop
+                        font: Style.extraSmallFont
+                    }
+                }
+            }
+
             MouseArea {
                 id: mouseArea
                 anchors.fill: parent
-                anchors.leftMargin: chartView.plotArea.x
-                anchors.topMargin: chartView.plotArea.y
-                anchors.rightMargin: chartView.width - chartView.plotArea.width - chartView.plotArea.x
-                anchors.bottomMargin: chartView.height - chartView.plotArea.height - chartView.plotArea.y
+                anchors.leftMargin: chartView.x + chartView.plotArea.x
+                anchors.topMargin: chartView.y + chartView.plotArea.y
+                anchors.rightMargin: chartContainer.width - (chartView.x + chartView.plotArea.x + chartView.plotArea.width)
+                anchors.bottomMargin: chartContainer.height - (chartView.y + chartView.plotArea.y + chartView.plotArea.height)
 
                 hoverEnabled: true
                 preventStealing: tooltipping || dragging