diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/oh-chart-page.vue b/bundles/org.openhab.ui/web/src/components/widgets/chart/oh-chart-page.vue
index 5fd00c073f..e3b6ec0b2e 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/oh-chart-page.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/oh-chart-page.vue
@@ -1,11 +1,24 @@
 <template>
-  <oh-chart class="oh-chart-page-chart" :context="this.context" />
+  <oh-chart 
+    class="oh-chart-page-chart" 
+    :class="{ 'with-tabbar': context.tab, 'with-toolbar': context.analyzer }"
+    :context="this.context" />
 </template>
 
 <style lang="stylus">
 .oh-chart-page-chart
+  position absolute !important
   background-color white
-  height: 100% !important
+  overflow-x hidden
+  top calc(var(--f7-safe-area-top) + var(--f7-navbar-height))
+  width 100%
+  height calc(100% - var(--f7-safe-area-top) - var(--f7-navbar-height)) !important
+  &.with-tabbar
+    height calc(100% - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-tabbar-labels-height)) !important
+  &.with-toolbar
+    height calc(100% - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-toolbar-height)) !important
+  &.sheet-opened
+    height calc(100% - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-sheet-height)) !important
 </style>
 
 <script>