diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js
index dccaf1a8..d1812f22 100644
--- a/src/components/Charts/mixins/resize.js
+++ b/src/components/Charts/mixins/resize.js
@@ -7,20 +7,17 @@ export default {
     }
   },
   mounted() {
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize()
-      }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
-
-    this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-    this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    this.initListener()
+  },
+  activated() {
+    this.resize()
+    this.initListener()
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.__resizeHandler)
-
-    this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
   },
   methods: {
     // use $_ for mixins properties
@@ -29,6 +26,25 @@ export default {
       if (e.propertyName === 'width') {
         this.__resizeHandler()
       }
+    },
+    initListener() {
+      this.__resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.__resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.__resizeHandler)
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      if (this.chart) {
+        this.chart.resize()
+      }
     }
   }
 }