diff --git a/package.json b/package.json
index 6cd21c00e0f66fc2836002d71052b58192be632f..60d472a34aa0170418bdccbd5c323f9e954647c7 100755
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "react-test-renderer": "^15.6.1",
     "redbox-react": "^1.3.2",
     "roadhog": "^1.0.2",
-    "roadhog-api-doc": "^0.1.5",
+    "roadhog-api-doc": "^0.1.8",
     "stylelint": "^8.1.0",
     "stylelint-config-standard": "^17.0.0"
   },
diff --git a/src/components/ActiveChart/index.js b/src/components/ActiveChart/index.js
index 1ab1cd54cb8b9de2a79aadda68686cb05e245dd0..e615d66239c427f4549a5a46f71bf8f882c5f0c2 100644
--- a/src/components/ActiveChart/index.js
+++ b/src/components/ActiveChart/index.js
@@ -22,13 +22,17 @@ export default class ActiveChart extends PureComponent {
   }
 
   componentDidMount() {
-    setInterval(() => {
+    this.timer = setInterval(() => {
       this.setState({
         activeData: getActiveData(),
       });
     }, 1000);
   }
 
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
   render() {
     const { activeData = [] } = this.state;
 
diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js
index 765f5eb457d72bd4f4dcd1d2daf0ac8444d47ebb..89fe1ae7756907982bbb46e5e787dd26a2191a16 100644
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@@ -14,6 +14,12 @@ class Bar extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
@@ -68,6 +74,8 @@ class Bar extends PureComponent {
     });
     chart.interval().position('x*y').color(color);
     chart.render();
+
+    this.chart = chart;
   }
 
   render() {
diff --git a/src/components/Charts/Gauge/index.js b/src/components/Charts/Gauge/index.js
index dcd3779c1a08bca1e502508fddbe99dbae37ad10..d89543ebb1839973395a0f8d4ac742d779062d68 100644
--- a/src/components/Charts/Gauge/index.js
+++ b/src/components/Charts/Gauge/index.js
@@ -16,6 +16,12 @@ class Gauge extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js
index 12fe4c45f33740fafff0bbc468c8bdd60cc18532..7d12aedd3e7c0c4e545e43df0150afe54474f6b5 100644
--- a/src/components/Charts/MiniArea/index.js
+++ b/src/components/Charts/MiniArea/index.js
@@ -14,6 +14,12 @@ class MiniArea extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
@@ -79,6 +85,8 @@ class MiniArea extends PureComponent {
       chart.line().position('x*y').color(color).shape('smooth');
     }
     chart.render();
+
+    this.chart = chart;
   }
 
   render() {
diff --git a/src/components/Charts/MiniBar/index.js b/src/components/Charts/MiniBar/index.js
index d71517f84fc6b86be90d32d43ccb47e33fd62bcd..a3f32b20db3487c5972d82095ca19b3c27f4bf73 100644
--- a/src/components/Charts/MiniBar/index.js
+++ b/src/components/Charts/MiniBar/index.js
@@ -14,6 +14,12 @@ class MiniBar extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
@@ -61,6 +67,8 @@ class MiniBar extends PureComponent {
     });
     chart.interval().position('x*y').color(color);
     chart.render();
+
+    this.chart = chart;
   }
 
   render() {
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index af3f68a5e18906af6e75430819c701617b77adfa..fb83f9521c7d5096e1f6f40007e55b9b46839c4e 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -20,6 +20,12 @@ class Pie extends Component {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js
index 12640774de940a9ed9832b85a753419e46c89272..f52d194741dd1a23f84df5467f9f90a8e7d69625 100644
--- a/src/components/Charts/Radar/index.js
+++ b/src/components/Charts/Radar/index.js
@@ -20,6 +20,12 @@ class Radar extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
diff --git a/src/components/Charts/WaterWave/index.js b/src/components/Charts/WaterWave/index.js
index f2dab6583975d74b15a701c29a930bd0afe52dae..575dce14f05626d9eae3a684200167904239019f 100644
--- a/src/components/Charts/WaterWave/index.js
+++ b/src/components/Charts/WaterWave/index.js
@@ -16,12 +16,18 @@ class WaterWave extends PureComponent {
     this.renderChart();
     this.resize();
 
-    window.addEventListener('resize', () => {
-      this.resize();
-    });
+    window.addEventListener('resize', this.resize);
   }
 
-  resize() {
+  componentWillUnmount() {
+    cancelAnimationFrame(this.timer);
+    if (this.node) {
+      this.node.innerHTML = '';
+    }
+    window.removeEventListener('resize', this.resize);
+  }
+
+  resize = () => {
     const { height } = this.props;
     const realWidth = this.root.parentNode.offsetWidth;
     if (realWidth < this.props.height) {
@@ -39,6 +45,7 @@ class WaterWave extends PureComponent {
   renderChart() {
     const { percent, color = '#19AFFA' } = this.props;
     const data = percent / 100;
+    const self = this;
 
     if (!this.node || !data) {
       return;
@@ -163,7 +170,7 @@ class WaterWave extends PureComponent {
         sp += 0.07;
         drawSin();
       }
-      requestAnimationFrame(render);
+      self.timer = requestAnimationFrame(render);
     }
 
     render();
diff --git a/src/components/TimelineChart/index.js b/src/components/TimelineChart/index.js
index c5b185cddb0c184355f2046ce64e5afac96b5b75..3e319aeb7757713d61945c17c64b3eda027436e3 100644
--- a/src/components/TimelineChart/index.js
+++ b/src/components/TimelineChart/index.js
@@ -14,6 +14,15 @@ class TimelineChart extends Component {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    if (this.slider) {
+      this.slider.destroy();
+    }
+  }
+
   sliderId = `timeline-chart-slider-${Math.random() * 1000}`
 
   handleRef = (n) => {
@@ -75,6 +84,8 @@ class TimelineChart extends Component {
     chart.line().position('x*y1').color('#4FAAEB');
     chart.line().position('x*y2').color('#9AD681');
 
+    this.chart = chart;
+
     /* eslint new-cap:0 */
     const slider = new Slider({
       domId: this.sliderId,
@@ -84,6 +95,8 @@ class TimelineChart extends Component {
       charts: [chart],
     });
     slider.render();
+
+    this.slider = slider;
   }
 
   render() {