From 0cbc5cd43b50a27e1ef0f2f9a704ad518acb15c6 Mon Sep 17 00:00:00 2001
From: Boyi C <cby@cby.me>
Date: Tue, 24 Apr 2018 14:19:46 +0800
Subject: [PATCH] Add example for dynamic resize.

---
 README.md | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/README.md b/README.md
index a98c023..c586998 100644
--- a/README.md
+++ b/README.md
@@ -48,4 +48,63 @@ Timeline chart library for Chart.js.
 },
 ```
 
+Example for dynamic resize by dataset count:
+```javascript
+resizeChart() {
+    if (!this._chart) return;
+    // Chart not ready
+    if (this.$.chartTarget.clientWidth === 0) {
+        if (this._resizeTimer === undefined) {
+            this._resizeTimer = setInterval(this.resizeChart.bind(this), 10);
+            return;
+        }
+    }
+
+    clearInterval(this._resizeTimer);
+    this._resizeTimer = undefined;
+
+    this._resizeChart();
+}
+
+_resizeChart() {
+    const chartTarget = this.$.chartTarget;
+
+    const options = this.data;
+    const data = options.data;
+
+    if (data.datasets.length === 0) {
+        return;
+    }
+
+    if (!this.isTimeline) {
+        this._chart.resize();
+        return;
+    }
+
+    // Recalculate chart height for Timeline chart
+    var axis = this._chart.boxes.filter(x => x.position === 'bottom')[0];
+    if (axis && axis.height > 0) {
+        this._axisHeight = axis.height;
+    }
+    if (!this._axisHeight) {
+        chartTarget.style.height = '100px';
+        chartTarget.height = '100px';
+        this._chart.resize();
+        axis = this._chart.boxes.filter(x => x.position === 'bottom')[0];
+        if (axis && axis.height > 0) {
+            this._axisHeight = axis.height;
+        }
+    }
+    if (this._axisHeight) {
+        const cnt = data.datasets.length;
+        const targetHeight = ((30 * cnt) + this._axisHeight) + 'px';
+        if (chartTarget.style.height !== targetHeight) {
+            chartTarget.style.height = targetHeight;
+            chartTarget.height = targetHeight;
+        }
+        this._chart.resize();
+    }
+}
+```
+
 Usage: https://github.com/fanthos/chartjs-chart-timeline/wiki