diff --git a/htdocs/index.html b/htdocs/index.html
index 21c7044..350636c 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -467,6 +467,12 @@
                 Show tooltip programmatically
               </a>
             </div>
+            <div class="col-md-4">
+              <h3>Zoom</h3>
+              <a href="./samples/api_zoom.html">
+                Zoom programmatically
+              </a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/htdocs/samples/api_zoom.html b/htdocs/samples/api_zoom.html
new file mode 100644
index 0000000..d0a349b
--- /dev/null
+++ b/htdocs/samples/api_zoom.html
@@ -0,0 +1,76 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            generateData(100)
+          ],
+        },
+        zoom: {
+          enabled: true,
+          initialRange: [30, 60],
+          onzoomstart: function (event) {
+            console.log("onzoomstart", event);
+          },
+          onzoom: function (domain) {
+            console.log("onzoom", domain);
+          },
+          onzoomend: function (domain) {
+            console.log("onzoomend", domain);
+          },
+        },
+        subchart: { show: true }
+      });
+
+      function generateData(n) {
+        var column = ['sample'];
+        for (var i = 0; i < n; i++) {
+          column.push(Math.random() * 500);
+        }
+        return column;
+      }
+
+     // with subchart
+     setTimeout(function () {
+         chart.zoom([45,75]);
+     }, 1000);
+
+     setTimeout(function () {
+         chart.zoom([25,90]);
+     }, 2000);
+
+     setTimeout(function () {
+         chart.unzoom();
+     }, 3000);
+
+     // without subchart
+     setTimeout(function () {
+         chart.internal.config.subchart_show = false;
+         chart.flush();
+     }, 4000);
+
+     setTimeout(function () {
+         chart.zoom([45,75]);
+     }, 5000);
+
+     setTimeout(function () {
+         chart.zoom([25,90]);
+     }, 6000);
+
+     setTimeout(function () {
+         chart.unzoom();
+     }, 7000);
+
+    </script>
+  </body>
+</html>
diff --git a/src/api.zoom.js b/src/api.zoom.js
index cbcf6bf..286912b 100644
--- a/src/api.zoom.js
+++ b/src/api.zoom.js
@@ -7,11 +7,16 @@ c3_chart_fn.zoom = function (domain) {
         if ($$.isTimeSeries()) {
             domain = domain.map(function (x) { return $$.parseDate(x); });
         }
-        $$.brush.extent(domain);
-        $$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale});
+        if ($$.config.subchart_show) {
+            $$.brush.selectionAsValue(domain);
+        }
+        else {
+            $$.updateXDomain(null, true, false, false, domain);
+            $$.redraw({withY: $$.config.zoom_rescale, withSubchart: false});
+        }
         $$.config.zoom_onzoom.call(this, $$.x.orgDomain());
     }
-    return $$.brush.extent();
+    return domain;
 };
 c3_chart_fn.zoom.enable = function (enabled) {
     var $$ = this.internal;
@@ -20,8 +25,13 @@ c3_chart_fn.zoom.enable = function (enabled) {
 };
 c3_chart_fn.unzoom = function () {
     var $$ = this.internal;
-    $$.brush.clear().update();
-    $$.redraw({withUpdateXDomain: true});
+    if ($$.config.subchart_show) {
+        $$.brush.clear();
+    }
+    else {
+        $$.updateXDomain(null, true, false, false, $$.subX.domain());
+        $$.redraw({withY: $$.config.zoom_rescale, withSubchart: false});
+    }
 };
 
 c3_chart_fn.zoom.max = function (max) {
diff --git a/src/subchart.js b/src/subchart.js
index ee6f956..becb141 100644
--- a/src/subchart.js
+++ b/src/subchart.js
@@ -6,11 +6,13 @@ c3_chart_internal_fn.initBrush = function (scale) {
     var $$ = this, d3 = $$.d3;
     // TODO: dynamically change brushY/brushX according to axis_rotated.
     $$.brush = ($$.config.axis_rotated ? d3.brushY() : d3.brushX()).on("brush", function () {
-        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") { return; }
+        var event = d3.event.sourceEvent;
+        if (event && event.type === "zoom") { return; }
         $$.redrawForBrush();
     }).on("end", function () {
-        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") { return; }
-        if ($$.brush.empty() && d3.event.sourceEvent.type !== 'end') { $$.brush.clear(); }
+        var event = d3.event.sourceEvent;
+        if (event && event.type === "zoom") { return; }
+        if ($$.brush.empty() && event && event.type !== 'end') { $$.brush.clear(); }
     });
     $$.brush.updateExtent = function () {
         var range = this.scale.range(), extent;
@@ -42,7 +44,7 @@ c3_chart_internal_fn.initBrush = function (scale) {
         if (selectionAsValue) {
             if ($$.context) {
                 selection = [this.scale(selectionAsValue[0]), this.scale(selectionAsValue[1])];
-                $$.brush.move($$.context.select('.' + CLASS.brush), selection);
+                $$.brush.move($$.context.select('.' + CLASS.brush).transition(), selection);
             }
             return [];
         }
@@ -86,8 +88,7 @@ c3_chart_internal_fn.initSubchart = function () {
     $$.axes.subx = context.append("g")
         .attr("class", CLASS.axisX)
         .attr("transform", $$.getTranslate('subx'))
-        .attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis)
-        .style("visibility", config.subchart_axis_x_show ? visibility : 'hidden');
+        .attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis);
 };
 c3_chart_internal_fn.initSubchartBrush = function () {
     var $$ = this;
