Added noClipY option

README.md

@@ -12,6 +12,8 @@ var defaultOptions = {
                       // resetFnc() will reset zoom.
   pointClipOffset: 5  // Offset from chart rect that will be used for the point clip mask.
                       // Should be equal to the radius of .ct-point points.
+  noClipY: false      // Only clip the x axis.
+  autoZoomY: false    // Auto zoom y axis. Can be set to true/false or object {high: false/true, low: false/true}.
 };
 ```
 

src/scripts/chartist-plugin-zoom.js

@@ -1,23 +1,23 @@
 /**
  * Chartist.js zoom plugin.
- *
+ * 
  */
 (function (window, document, Chartist) {
   'use strict';
 
   var defaultOptions = {
     // onZoom
     // resetOnRightMouseBtn
-    pointClipOffset: 5
+    pointClipOffset: 5,
+    noClipY: false,
+    autoZoomY: {high: false, low: false},
   };
 
   Chartist.plugins = Chartist.plugins || {};
   Chartist.plugins.zoom = function (options) {
-
     options = Chartist.extend({}, defaultOptions, options);
-
+    
     return function zoom(chart) {
-
       if (!(chart instanceof Chartist.Line)) {
         return;
       }
@@ -26,7 +26,10 @@
       var downPosition;
       var onZoom = options.onZoom;
       var ongoingTouches = [];
-
+      if(options.autoZoomY === true){
+        options.autoZoomY = {high: true, low: true};
+      }
+
       chart.on('draw', function (data) {
         var type = data.type;
         var mask = type === 'point' ? 'point-mask' : 'line-mask';
@@ -191,6 +194,30 @@
             chart.options.axisX.highLow = { low: project(x1, axisX), high: project(x2, axisX) };
             chart.options.axisY.highLow = { low: project(y1, axisY), high: project(y2, axisY) };
 
+            if(options.noClipY && (options.autoZoomY.high || options.autoZoomY.low)){
+              var x_low = chart.options.axisX.highLow.low;
+              var x_high = chart.options.axisX.highLow.high;
+              var max_y = null;
+              var min_y = null;
+              var series = chart.data.series;
+              for(var i=0; i < series.length; ++i){
+                var points = series[i].data;
+                var l = binarySearch_x(points, x_low) + 1;
+                for(var j=l; j < points.length; ++j){
+                  if(points[j].x > x_high) break;
+                  if(points[j].y > max_y || min_y == null) max_y = points[j].y;
+                  if(points[j].y < min_y || min_y == null) min_y = points[j].y;
+                }
+                var prev_j = Math.max(l-1, 0);
+                if(min_y === max_y){
+                  max_y = Math.max(points[l].y, points[prev_j].y);
+                  min_y = Math.min(points[l].y, points[prev_j].y);
+                  if(min_y == max_y) max_y = min_y + 0.1; // prevents chartist from creating NaNs when range == 0 
+                }
+              }
+              if( options.autoZoomY.high ) chart.options.axisY.highLow.high = max_y; 
+              if( options.autoZoomY.low ) chart.options.axisY.highLow.low = min_y;
+            }
             chart.update(chart.data, chart.options);
             onZoom && onZoom(chart, reset);
           }
@@ -205,66 +232,84 @@
           }
         }
       }
+
+      function hide(rect) {
+        rect.attr({ style: 'display:none' });
+      }
+
+      function show(rect) {
+        rect.attr({ style: 'display:block' });
+      }
+
+      function getRect(firstPoint, secondPoint) {
+        var x = firstPoint.x;
+        var y = firstPoint.y;
+        var width = secondPoint.x - x;
+        var height = secondPoint.y - y;
+        if (width < 0) {
+          width = -width;
+          x = secondPoint.x;
+        }
+        if(options.noClipY){
+          y = chartRect.y2;
+          height = chartRect.y1 - y;
+        }
+        else if (height < 0) {
+          height = -height;
+          y = secondPoint.y;
+        }
+        return {
+          x: x,
+          y: y,
+          width: width,
+          height: height
+        };
+      }
+
+      function position(event, svg) {
+        return transform(event.clientX, event.clientY, svg);
+      }
+
+      function transform(x, y, svgElement) {
+        var svg = svgElement.tagName === 'svg' ? svgElement : svgElement.ownerSVGElement;
+        var matrix = svg.getScreenCTM();
+        var point = svg.createSVGPoint();
+        point.x = x;
+        point.y = y;
+        point = point.matrixTransform(matrix.inverse());
+        return point || { x: 0, y: 0 };
+      }
+
+      function project(value, axis) {
+        var max = axis.bounds.max;
+        var min = axis.bounds.min;
+        if (axis.scale && axis.scale.type === 'log') {
+          var base = axis.scale.base;
+          return Math.pow(base,
+              value * baseLog(max / min, base) / axis.axisLength) * min;
+        }
+        return (value * axis.bounds.range / axis.axisLength) + min;
+      }
+
+      function baseLog(val, base) {
+        return Math.log(val) / Math.log(base);
+      }
+
+      function binarySearch_x(ar, el) {
+        var m = 0;
+        var n = ar.length - 1;
+        while (m <= n) {
+          var k = (n + m) >> 1;
+          if (el > ar[k].x) {
+            m = k + 1;
+          } else if(el < ar[k].x) {
+            n = k - 1;
+          } else {
+            return k;
+          }
+        }
+        return m - 1;
+      }
     };
-
   };
-
-  function hide(rect) {
-    rect.attr({ style: 'display:none' });
-  }
-
-  function show(rect) {
-    rect.attr({ style: 'display:block' });
-  }
-
-  function getRect(firstPoint, secondPoint) {
-    var x = firstPoint.x;
-    var y = firstPoint.y;
-    var width = secondPoint.x - x;
-    var height = secondPoint.y - y;
-    if (width < 0) {
-      width = -width;
-      x = secondPoint.x;
-    }
-    if (height < 0) {
-      height = -height;
-      y = secondPoint.y;
-    }
-    return {
-      x: x,
-      y: y,
-      width: width,
-      height: height
-    };
-  }
-
-  function position(event, svg) {
-    return transform(event.clientX, event.clientY, svg);
-  }
-
-  function transform(x, y, svgElement) {
-    var svg = svgElement.tagName === 'svg' ? svgElement : svgElement.ownerSVGElement;
-    var matrix = svg.getScreenCTM();
-    var point = svg.createSVGPoint();
-    point.x = x;
-    point.y = y;
-    point = point.matrixTransform(matrix.inverse());
-    return point || { x: 0, y: 0 };
-  }
-
-  function project(value, axis) {
-    var max = axis.bounds.max;
-    var min = axis.bounds.min;
-    if (axis.scale && axis.scale.type === 'log') {
-      var base = axis.scale.base;
-      return Math.pow(base,
-        value * baseLog(max / min, base) / axis.axisLength) * min;
-    }
-    return (value * axis.bounds.range / axis.axisLength) + min;
-  }
-
-  function baseLog(val, base) {
-    return Math.log(val) / Math.log(base);
-  }
-
 } (window, document, Chartist));