@progress/kendo-charts 1.20.0-dev.202110131408 → 1.20.0-dev.202111190958

package/dist/es/core/logarithmic-axis.js

@@ -7,10 +7,11 @@ import createAxisTick from './utils/create-axis-tick';
 import createAxisGridLine from './utils/create-axis-grid-line';
 import limitCoordinate from './utils/limit-coordinate';
 
-import { DEFAULT_PRECISION, BLACK, X, Y } from '../common/constants';
-import { deepExtend, defined, inArray, limitValue, round, setDefaultOptions } from '../common';
+import { DEFAULT_PRECISION, BLACK } from '../common/constants';
+import { deepExtend, defined, inArray, limitValue, round, setDefaultOptions, valueOrDefault } from '../common';
 
 var DEFAULT_MAJOR_UNIT = 10;
+var MIN_VALUE_RANGE = 1e-6;
 
 var LogarithmicAxis = (function (Axis) {
     function LogarithmicAxis(seriesMin, seriesMax, options, chartService) {
@@ -59,51 +60,37 @@ var LogarithmicAxis = (function (Axis) {
         var options = ref.options;
         var logMin = ref.logMin;
         var logMax = ref.logMax;
-        var reverse = options.reverse;
-        var vertical = options.vertical;
         var base = options.majorUnit;
-        var valueAxis = vertical ? Y : X;
-        var lineBox = this.lineBox();
-        var lineStart = lineBox[valueAxis + (reverse ? 2 : 1)];
-        var lineSize = vertical ? lineBox.height() : lineBox.width();
-        var dir = reverse ? -1 : 1;
-        var step = dir * (lineSize / (logMax - logMin));
-        var slotBox = new Box(lineBox.x1, lineBox.y1, lineBox.x1, lineBox.y1);
-        var start = a;
-        var end = b;
-
-        if (!defined(start)) {
-            start = end || 1;
-        }
-
-        if (!defined(end)) {
-            end = start || 1;
-        }
+        var min = options.min;
+        var max = options.max;
+        var ref$1 = this.lineInfo();
+        var axis = ref$1.axis;
+        var axisDir = ref$1.axisDir;
+        var lineBox = ref$1.lineBox;
+        var lineSize = ref$1.lineSize;
+        var lineStart = ref$1.lineStart;
+        var step = axisDir * (lineSize / (logMax - logMin));
+        var start = valueOrDefault(a, b || 1);
+        var end = valueOrDefault(b, a || 1);
 
         if (start <= 0 || end <= 0) {
             return null;
         }
 
         if (limit) {
-            start = Math.max(Math.min(start, options.max), options.min);
-            end = Math.max(Math.min(end, options.max), options.min);
+            start = limitValue(start, min, max);
+            end = limitValue(end, min, max);
         }
 
         start = log(start, base);
         end = log(end, base);
 
-        var p1, p2;
-
-        if (vertical) {
-            p1 = logMax - Math.max(start, end);
-            p2 = logMax - Math.min(start, end);
-        } else {
-            p1 = Math.min(start, end) - logMin;
-            p2 = Math.max(start, end) - logMin;
-        }
+        var p1 = Math.min(start, end) - logMin;
+        var p2 = Math.max(start, end) - logMin;
 
-        slotBox[valueAxis + 1] = limitCoordinate(lineStart + step * (reverse ? p2 : p1));
-        slotBox[valueAxis + 2] = limitCoordinate(lineStart + step * (reverse ? p1 : p2));
+        var slotBox = new Box(lineBox.x1, lineBox.y1, lineBox.x1, lineBox.y1);
+        slotBox[axis + 1] = limitCoordinate(lineStart + step * (axisDir > 0 ? p1 : p2));
+        slotBox[axis + 2] = limitCoordinate(lineStart + step * (axisDir > 0 ? p2 : p1));
 
         return slotBox;
     };
@@ -113,17 +100,14 @@ var LogarithmicAxis = (function (Axis) {
         var options = ref.options;
         var logMin = ref.logMin;
         var logMax = ref.logMax;
-        var reverse = options.reverse;
-        var vertical = options.vertical;
         var base = options.majorUnit;
-        var lineBox = this.lineBox();
-        var dir = vertical === reverse ? 1 : -1;
-        var startEdge = dir === 1 ? 1 : 2;
-        var lineSize = vertical ? lineBox.height() : lineBox.width();
+        var ref$1 = this.lineInfo();
+        var axis = ref$1.axis;
+        var axisDir = ref$1.axisDir;
+        var lineStart = ref$1.lineStart;
+        var lineSize = ref$1.lineSize;
         var step = ((logMax - logMin) / lineSize);
-        var valueAxis = vertical ? Y : X;
-        var lineStart = lineBox[valueAxis + startEdge];
-        var offset = dir * (point[valueAxis] - lineStart);
+        var offset = axisDir * (point[axis] - lineStart);
         var valueOffset = offset * step;
 
         if (offset < 0 || offset > lineSize) {
@@ -140,16 +124,6 @@ var LogarithmicAxis = (function (Axis) {
         return { min: options.min, max: options.max };
     };
 
-    LogarithmicAxis.prototype.scaleRange = function scaleRange (delta) {
-        var base = this.options.majorUnit;
-        var offset = -delta;
-
-        return {
-            min: Math.pow(base, this.logMin - offset),
-            max: Math.pow(base, this.logMax + offset)
-        };
-    };
-
     LogarithmicAxis.prototype.translateRange = function translateRange (delta) {
         var ref = this;
         var options = ref.options;
@@ -259,7 +233,7 @@ var LogarithmicAxis = (function (Axis) {
     };
 
     LogarithmicAxis.prototype.traverseMajorTicksPositions = function traverseMajorTicksPositions (callback, tickOptions) {
-        var ref = this._lineOptions();
+        var ref = this.lineInfo();
         var lineStart = ref.lineStart;
         var step = ref.step;
         var ref$1 = this;
@@ -280,7 +254,7 @@ var LogarithmicAxis = (function (Axis) {
         var max = ref.max;
         var minorUnit = ref.minorUnit;
         var base = ref.majorUnit;
-        var ref$1 = this._lineOptions();
+        var ref$1 = this.lineInfo();
         var lineStart = ref$1.lineStart;
         var step = ref$1.step;
         var ref$2 = this;
@@ -333,24 +307,37 @@ var LogarithmicAxis = (function (Axis) {
         };
     };
 
-    LogarithmicAxis.prototype.zoomRange = function zoomRange (delta) {
+    LogarithmicAxis.prototype.scaleRange = function scaleRange (scale, cursor) {
+        var ref = this.options;
+        var base = ref.majorUnit;
+        var logMin = log(this.options.min, base);
+        var logMax = log(this.options.max, base);
+        var position = Math.abs(this.pointOffset(cursor));
+        var range = logMax - logMin;
+        var delta = this.scaleToDelta(scale, range);
+        var min = Math.pow(base, logMin + position * delta);
+        var max = Math.pow(base, logMax - (1 - position) * delta);
+
+        if (max - min < MIN_VALUE_RANGE) {
+            max = min + MIN_VALUE_RANGE;
+        }
+
+        return {
+            min: min,
+            max: max
+        };
+    };
+
+    LogarithmicAxis.prototype.zoomRange = function zoomRange (scale, cursor) {
+        var range = this.scaleRange(scale, cursor);
         var ref = this;
-        var options = ref.options;
         var totalMin = ref.totalMin;
         var totalMax = ref.totalMax;
-        var newRange = this.scaleRange(delta);
-        var min = limitValue(newRange.min, totalMin, totalMax);
-        var max = limitValue(newRange.max, totalMin, totalMax);
-        var base = options.majorUnit;
-        var acceptOptionsRange = max > min && options.min && options.max && (round(log(options.max, base) - log(options.min, base), DEFAULT_PRECISION) < 1);
-        var acceptNewRange = !(options.min === totalMin && options.max === totalMax) && round(log(max, base) - log(min, base), DEFAULT_PRECISION) >= 1;
-
-        if (acceptOptionsRange || acceptNewRange) {
-            return {
-                min: min,
-                max: max
-            };
-        }
+
+        return {
+            min: limitValue(range.min, totalMin, totalMax),
+            max: limitValue(range.max, totalMin, totalMax)
+        };
     };
 
     LogarithmicAxis.prototype._minorIntervalOptions = function _minorIntervalOptions (power) {
@@ -368,23 +355,11 @@ var LogarithmicAxis = (function (Axis) {
         };
     };
 
-    LogarithmicAxis.prototype._lineOptions = function _lineOptions () {
-        var ref = this.options;
-        var reverse = ref.reverse;
-        var vertical = ref.vertical;
-        var valueAxis = vertical ? Y : X;
-        var lineBox = this.lineBox();
-        var dir = vertical === reverse ? 1 : -1;
-        var startEdge = dir === 1 ? 1 : 2;
-        var lineSize = vertical ? lineBox.height() : lineBox.width();
-        var step = dir * (lineSize / (this.logMax - this.logMin));
-        var lineStart = lineBox[valueAxis + startEdge];
+    LogarithmicAxis.prototype.lineInfo = function lineInfo () {
+        var info = Axis.prototype.lineInfo.call(this);
+        info.step = info.axisDir * (info.lineSize / (this.logMax - this.logMin));
 
-        return {
-            step: step,
-            lineStart: lineStart,
-            lineBox: lineBox
-        };
+        return info;
     };
 
     return LogarithmicAxis;
@@ -445,8 +420,8 @@ function throwNegativeValuesError() {
     throw new Error("Non positive values cannot be used for a logarithmic axis");
 }
 
-function log(y, x) {
-    return Math.log(y) / Math.log(x);
+function log(x, base) {
+    return Math.log(x) / Math.log(base);
 }
 
 setDefaultOptions(LogarithmicAxis, {

package/dist/es/core/numeric-axis.js

@@ -3,8 +3,8 @@ import Axis from './axis';
 import AxisLabel from './axis-label';
 import Box from './box';
 
-import { BLACK, DEFAULT_PRECISION, COORD_PRECISION, X, Y } from '../common/constants';
-import { deepExtend, defined, limitValue, round, setDefaultOptions } from '../common';
+import { BLACK, DEFAULT_PRECISION, COORD_PRECISION } from '../common/constants';
+import { deepExtend, defined, limitValue, round, setDefaultOptions, valueOrDefault } from '../common';
 
 import autoMajorUnit from './utils/auto-major-unit';
 import autoAxisMin from './utils/auto-axis-min';
@@ -73,18 +73,17 @@ var NumericAxis = (function (Axis) {
 
     NumericAxis.prototype.getTickPositions = function getTickPositions (unit, skipUnit) {
         var options = this.options;
-        var vertical = options.vertical;
-        var reverse = options.reverse;
-        var lineBox = this.lineBox();
-        var lineSize = vertical ? lineBox.height() : lineBox.width();
+        var ref = this.lineInfo();
+        var axisDir = ref.axisDir;
+        var axisOrigin = ref.axisOrigin;
+        var lineBox = ref.lineBox;
+        var lineSize = ref.lineSize;
         var range = options.max - options.min;
         var scale = lineSize / range;
         var step = unit * scale;
         var divisions = this.getDivisions(unit);
-        var dir = (vertical ? -1 : 1) * (reverse ? -1 : 1);
-        var startEdge = dir === 1 ? 1 : 2;
         var positions = [];
-        var pos = lineBox[(vertical ? Y : X) + startEdge];
+        var pos = lineBox[axisOrigin];
         var skipStep = 0;
 
         if (skipUnit) {
@@ -96,7 +95,7 @@ var NumericAxis = (function (Axis) {
                 positions.push(round(pos, COORD_PRECISION));
             }
 
-            pos = pos + step * dir;
+            pos = pos + step * axisDir;
         }
 
         return positions;
@@ -114,71 +113,44 @@ var NumericAxis = (function (Axis) {
         if ( limit === void 0 ) limit = false;
 
         var options = this.options;
-        var vertical = options.vertical;
-        var reverse = options.reverse;
-        var valueAxis = vertical ? Y : X;
-        var lineBox = this.lineBox();
-        var lineStart = lineBox[valueAxis + (reverse ? 2 : 1)];
-        var lineSize = vertical ? lineBox.height() : lineBox.width();
-        var dir = reverse ? -1 : 1;
-        var step = dir * (lineSize / (options.max - options.min));
-        var slotBox = new Box(lineBox.x1, lineBox.y1, lineBox.x1, lineBox.y1);
+        var ref = this.lineInfo();
+        var axis = ref.axis;
+        var axisDir = ref.axisDir;
+        var lineBox = ref.lineBox;
+        var lineSize = ref.lineSize;
+        var lineStart = ref.lineStart;
+        var step = axisDir * (lineSize / (options.max - options.min));
 
-        var start = a;
-        var end = b;
-
-        if (!defined(start)) {
-            start = end || 0;
-        }
-
-        if (!defined(end)) {
-            end = start || 0;
-        }
+        var start = valueOrDefault(a, b || 0);
+        var end = valueOrDefault(b, a || 0);
 
         if (limit) {
-            start = Math.max(Math.min(start, options.max), options.min);
-            end = Math.max(Math.min(end, options.max), options.min);
+            start = limitValue(start, options.min, options.max);
+            end = limitValue(end, options.min, options.max);
         }
 
-        var p1, p2;
+        var p1 = Math.min(start, end) - options.min;
+        var p2 = Math.max(start, end) - options.min;
 
-        if (vertical) {
-            p1 = options.max - Math.max(start, end);
-            p2 = options.max - Math.min(start, end);
-        } else {
-            p1 = Math.min(start, end) - options.min;
-            p2 = Math.max(start, end) - options.min;
-        }
-
-        slotBox[valueAxis + 1] = limitCoordinate(lineStart + step * (reverse ? p2 : p1));
-        slotBox[valueAxis + 2] = limitCoordinate(lineStart + step * (reverse ? p1 : p2));
+        var slotBox = new Box(lineBox.x1, lineBox.y1, lineBox.x1, lineBox.y1);
+        slotBox[axis + 1] = limitCoordinate(lineStart + step * (axisDir > 0 ? p1 : p2));
+        slotBox[axis + 2] = limitCoordinate(lineStart + step * (axisDir > 0 ? p2 : p1));
 
         return slotBox;
     };
 
     NumericAxis.prototype.getValue = function getValue (point) {
         var options = this.options;
-        var vertical = options.vertical;
-        var reverse = options.reverse;
         var max = Number(options.max);
         var min = Number(options.min);
-        var valueAxis = vertical ? Y : X;
-        var lineBox = this.lineBox();
-        var lineStart = lineBox[valueAxis + (reverse ? 2 : 1)];
-        var lineSize = vertical ? lineBox.height() : lineBox.width();
-        var dir = reverse ? -1 : 1;
-        var offset = dir * (point[valueAxis] - lineStart);
-        var step = (max - min) / lineSize;
-        var valueOffset = offset * step;
-
-        if (offset < 0 || offset > lineSize) {
+        var offset = this.pointOffset(point);
+        var valueOffset = offset * (max - min);
+
+        if (offset < 0 || offset > 1) {
             return null;
         }
 
-        var value = vertical ?
-                max - valueOffset :
-                min + valueOffset;
-
+        var value = min + valueOffset;
         return round(value, DEFAULT_PRECISION);
     };
 
@@ -188,10 +160,10 @@ var NumericAxis = (function (Axis) {
         var reverse = options.reverse;
         var max = options.max;
         var min = options.min;
-        var lineBox = this.lineBox();
-        var size = vertical ? lineBox.height() : lineBox.width();
+        var ref = this.lineInfo();
+        var lineSize = ref.lineSize;
         var range = max - min;
-        var scale = size / range;
+        var scale = lineSize / range;
         var offset = round(delta / scale, DEFAULT_PRECISION);
 
         if ((vertical || reverse) && !(vertical && reverse )) {
@@ -205,16 +177,6 @@ var NumericAxis = (function (Axis) {
         };
     };
 
-    NumericAxis.prototype.scaleRange = function scaleRange (delta) {
-        var options = this.options;
-        var offset = -delta * options.majorUnit;
-
-        return {
-            min: options.min - offset,
-            max: options.max + offset
-        };
-    };
-
     NumericAxis.prototype.labelsCount = function labelsCount () {
         return this.getDivisions(this.options.majorUnit);
     };
@@ -251,20 +213,35 @@ var NumericAxis = (function (Axis) {
         }
     };
 
-    NumericAxis.prototype.zoomRange = function zoomRange (delta) {
+    NumericAxis.prototype.scaleRange = function scaleRange (scale, cursor) {
+        var position = Math.abs(this.pointOffset(cursor));
+        var range = this.options.max - this.options.min;
+        var delta = this.scaleToDelta(scale, range);
+        var minDelta = position * delta;
+        var maxDelta = (1 - position) * delta;
+        var min = round(this.options.min + minDelta, DEFAULT_PRECISION);
+        var max = round(this.options.max - maxDelta, DEFAULT_PRECISION);
+
+        if (max - min < MIN_VALUE_RANGE) {
+            max = min + MIN_VALUE_RANGE;
+        }
+
+        return {
+            min: min,
+            max: max
+        };
+    };
+
+    NumericAxis.prototype.zoomRange = function zoomRange (scale, cursor) {
         var ref = this;
         var totalMin = ref.totalMin;
         var totalMax = ref.totalMax;
-        var newRange = this.scaleRange(delta);
-        var min = limitValue(newRange.min, totalMin, totalMax);
-        var max = limitValue(newRange.max, totalMin, totalMax);
+        var range = this.scaleRange(scale, cursor);
 
-        if (this.isValidRange(min, max)) {
-            return {
-                min: min,
-                max: max
-            };
-        }
+        return {
+            min: limitValue(range.min, totalMin, totalMax),
+            max: limitValue(range.max, totalMin, totalMax)
+        };
     };
 
     NumericAxis.prototype.isValidRange = function isValidRange (min, max) {

package/dist/es/stock/navigator.js

@@ -286,6 +286,7 @@ var Navigator = (function (Class) {
 
         var fromIx = mainAxis.categoryIndex(selection.options.from);
         var toIx = mainAxis.categoryIndex(selection.options.to);
+        var coords = this.chart._eventCoordinates(e.originalEvent);
 
         e.originalEvent.preventDefault();
 
@@ -294,11 +295,11 @@ var Navigator = (function (Class) {
         }
 
         if (toIx - fromIx > 1) {
-            selection.expand(delta);
+            selection.zoom(delta, coords);
             this.readSelection();
         } else {
             axis.options.min = select.from;
-            select.from = axis.scaleRange(-e.delta).min;
+            select.from = axis.scaleRange(-e.delta * this.chart._mousewheelZoomRate(), coords).min;
         }
 
         if (liveDrag) {

package/dist/es2015/chart/chart.js

@@ -22,12 +22,13 @@ import { ChartPane, ChartPlotArea, findAxisByName } from './api-elements';
 
 import { X, Y, VALUE, DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SERIES_OPACITY } from '../common/constants';
 import { addClass, Class, setDefaultOptions, deepExtend, defined, find, isObject, isFunction, elementSize, elementOffset,
-         elementScale, elementStyles, eventCoordinates, bindEvents, unbindEvents, mousewheelDelta, FontLoader, inArray, last, round, HashMap } from '../common';
+         elementScale, elementStyles, eventCoordinates, bindEvents, unbindEvents, mousewheelDelta, FontLoader, inArray, last, round,
+         HashMap, valueOrDefault } from '../common';
 
 import { dateComparer } from '../date-utils';
 
 import { DRAG_START, DRAG, DRAG_END, ZOOM_START, ZOOM, ZOOM_END, SELECT_START, SELECT, SELECT_END, PLOT_AREA_HOVER, PLOT_AREA_LEAVE,
-    RENDER, CATEGORY, PIE, DONUT, FUNNEL, COLUMN, MOUSEWHEEL, MOUSEWHEEL_DELAY, SHOW_TOOLTIP, SERIES_HOVER } from './constants';
+    RENDER, CATEGORY, PIE, DONUT, FUNNEL, COLUMN, MOUSEWHEEL, MOUSEWHEEL_DELAY, MOUSEWHEEL_ZOOM_RATE, SHOW_TOOLTIP, SERIES_HOVER } from './constants';
 
 import './animations';
 import './register-charts';
@@ -651,12 +652,13 @@ class Chart extends Class {
                 this._gestureDistance = e.distance;
                 const args = { delta: scaleDelta, axisRanges: axisRanges(this._plotArea.axes), originalEvent: e };
                 if (this._zooming || !this.trigger(ZOOM_START, args)) {
+                    const coords = this._eventCoordinates(e);
 
                     if (!this._zooming) {
                         this._zooming = true;
                     }
 
-                    const ranges = args.axisRanges = mousewheelZoom.updateRanges(scaleDelta);
+                    const ranges = args.axisRanges = mousewheelZoom.updateRanges(scaleDelta, coords);
                     if (ranges && !this.trigger(ZOOM, args)) {
                         mousewheelZoom.zoom();
                     }
@@ -787,6 +789,12 @@ class Chart extends Class {
         }
     }
 
+    _mousewheelZoomRate() {
+        const zoomable = this.options.zoomable;
+        const mousewheel = (zoomable || {}).mousewheel || {};
+        return valueOrDefault(mousewheel.rate, MOUSEWHEEL_ZOOM_RATE);
+    }
+
     _mousewheel(e) {
         const delta = mousewheelDelta(e);
         const mousewheelZoom = this._mousewheelZoom;
@@ -811,7 +819,7 @@ class Chart extends Class {
                     clearTimeout(this._mwTimeout);
                 }
 
-                args.axisRanges = mousewheelZoom.updateRanges(delta);
+                args.axisRanges = mousewheelZoom.updateRanges(delta, coords);
                 if (args.axisRanges && !this.trigger(ZOOM, args)) {
                     mousewheelZoom.zoom();
                 }
@@ -844,7 +852,7 @@ class Chart extends Class {
                     const currentAxis = axes[i];
                     const axisName = currentAxis.options.name;
                     if (axisName) {
-                        ranges[axisName] = currentAxis.scaleRange(-totalDelta);
+                        ranges[axisName] = currentAxis.scaleRange(-totalDelta * this._mousewheelZoomRate(), coords);
                     }
                 }
 
@@ -1156,8 +1164,9 @@ class Chart extends Class {
         for (let i = 0; i < elements.length; i++) {
             const element = elements[i];
             const currSeries = element.series || series;
+            const shouldHighlight = currSeries && (currSeries.highlight || {}).visible;
 
-            if (currSeries && element.visual) {
+            if (shouldHighlight && element.visual) {
                 const opacity = series ? series.opacity : element.series.opacity;
                 if (currSeries !== activeSeries || reset) {
                     element.visual.opacity(reset ? 1 : opacity);

package/dist/es2015/chart/constants.js

@@ -94,6 +94,7 @@ const OUTSIDE_END = "outsideEnd";
 
 const MOUSEWHEEL = "DOMMouseScroll mousewheel";
 const MOUSEWHEEL_DELAY = 150;
+const MOUSEWHEEL_ZOOM_RATE = 0.3;
 
 export {
     INITIAL_ANIMATION_DURATION, FADEIN,
@@ -115,7 +116,8 @@ export {
     LOGARITHMIC, DRAG, DRAG_START, DRAG_END, ZOOM_START, ZOOM, ZOOM_END,
     SELECT_START, SELECT, SELECT_END, PANE_RENDER, GAP,
     DONUT, INSIDE_END, INSIDE_BASE, OUTSIDE_END,
-    MOUSEWHEEL, MOUSEWHEEL_DELAY, SHOW_TOOLTIP, HIDE_TOOLTIP,
+    MOUSEWHEEL, MOUSEWHEEL_DELAY, MOUSEWHEEL_ZOOM_RATE,
+    SHOW_TOOLTIP, HIDE_TOOLTIP,
     EQUALLY_SPACED_SERIES, ABOVE, BELOW,
     HEATMAP
 };

package/dist/es2015/chart/pan-and-zoom/mousewheel-zoom.js

@@ -3,16 +3,25 @@ import toChartAxisRanges from './to-chart-axis-ranges';
 
 import { X, Y } from '../../common/constants';
 import { Class, deepExtend } from '../../common';
+import { limitValue } from '../../drawing-utils';
+
+// Limit the zoom rate between 1% and 90% per mousewheel event.
+// At zoom rates close to 100% the axis range quickly becomes 0.
+const MIN_RATE = 0.01;
+const MAX_RATE = 0.9;
+const DEFAULT_RATE = 0.3;
 
 class MousewheelZoom extends Class {
     constructor(chart, options) {
         super();
 
         this.chart = chart;
-        this.options = deepExtend({}, this.options, options);
+        this.options = deepExtend({
+            rate: DEFAULT_RATE
+        }, this.options, options);
     }
 
-    updateRanges(delta) {
+    updateRanges(delta, coords) {
         const lock = (this.options.lock || "").toLowerCase();
         const axisRanges = [];
         const axes = this.chart._plotArea.axes;
@@ -22,7 +31,8 @@ class MousewheelZoom extends Class {
             const vertical = axis.options.vertical;
 
             if (!(lock === X && !vertical) && !(lock === Y && vertical) && axis.zoomRange) {
-                const range = axis.zoomRange(-delta);
+                const rate = limitValue(this.options.rate, MIN_RATE, MAX_RATE);
+                const range = axis.zoomRange(-delta * rate, coords);
 
                 if (range) {
                     axisRanges.push({
@@ -55,4 +65,4 @@ class MousewheelZoom extends Class {
     }
 }
 
-export default MousewheelZoom;
+export default MousewheelZoom;

package/dist/es2015/chart/selection.js

@@ -4,7 +4,7 @@ import { DateCategoryAxis, Point } from '../core';
 
 import { MOUSEWHEEL_DELAY, MOUSEWHEEL, SELECT_START, SELECT, SELECT_END } from './constants';
 
-import { LEFT, RIGHT, MIN_VALUE, MAX_VALUE } from '../common/constants';
+import { LEFT, RIGHT, MIN_VALUE, MAX_VALUE, X } from '../common/constants';
 import { addClass, Class, removeClass, deepExtend, elementStyles, eventElement, setDefaultOptions, limitValue, round, bindEvents, unbindEvents, mousewheelDelta, hasClasses } from '../common';
 import { parseDate } from '../date-utils';
 
@@ -542,6 +542,45 @@ class Selection extends Class {
         }
     }
 
+    zoom(delta, coords) {
+        const options = this.options;
+        const min = this._index(options.min);
+        const max = this._index(options.max);
+        const from = this._index(options.from);
+        const to = this._index(options.to);
+        let range = { from: from, to: to };
+        const oldRange = deepExtend({}, range);
+
+        const { reverse } = this.categoryAxis.options;
+        const origin = X + (reverse ? '2' : '1');
+        const lineBox = this.categoryAxis.lineBox();
+        const relative = Math.abs(lineBox[origin] - coords[X]);
+        const size = lineBox.width();
+        const position = round(relative / size, 2);
+        const minDelta = round(position * delta);
+        const maxDelta = round((1 - position) * delta);
+
+        if (this._state) {
+            range = this._state.range;
+        }
+
+        range.from = limitValue(
+            limitValue(from - minDelta, 0, to - 1),
+            min, max
+        );
+
+        range.to = limitValue(
+            limitValue(to + maxDelta, range.from + 1, max),
+            min,
+            max
+        );
+
+        if (range.from !== oldRange.from || range.to !== oldRange.to) {
+            this.set(range.from, range.to);
+            return true;
+        }
+    }
+
     trigger(name, args) {
         return (this.observer || this.chart).trigger(name, args);
     }