@syncfusion/ej2-charts - npm Package Compare versions

Comparing version 23.1.44 to 23.2.4

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 23.1.44
+*  version : 23.2.4
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "_from": "@syncfusion/ej2-charts@*",
-  "_id": "@syncfusion/ej2-charts@23.1.43",
+  "_id": "@syncfusion/ej2-charts@23.1.44",
   "_inBundle": false,
-  "_integrity": "sha512-UBcT69QDXnjL77n//ADD211mxdIdyBgeeQrwv1qqJrRl+yPR31Z7svyy/bu0wC1pgF4wEEfYIKJISNf7DAywvw==",
+  "_integrity": "sha512-TptoAaXHCEHtjErsCn2VQdRBe1iRqjL8u+z+1sjI0Ax9hnFSD65l0bzsrpop58meA4uCnnvCY6Fhp1TrI2V/tA==",
   "_location": "/@syncfusion/ej2-charts",
@@ -29,4 +29,4 @@ "_phantomChildren": {},
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-charts/-/ej2-charts-23.1.43.tgz",
-  "_shasum": "b34a2f534452452f3ccda658b7387790619f5c46",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-charts/-/ej2-charts-23.1.44.tgz",
+  "_shasum": "7f1ed491cb446a015802f93cec41863262e3571a",
   "_spec": "@syncfusion/ej2-charts@*",
@@ -39,11 +39,11 @@ "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.1.41",
-    "@syncfusion/ej2-calendars": "~23.1.41",
-    "@syncfusion/ej2-compression": "~23.1.36",
-    "@syncfusion/ej2-data": "~23.1.44",
-    "@syncfusion/ej2-excel-export": "~23.1.36",
-    "@syncfusion/ej2-file-utils": "~23.1.36",
-    "@syncfusion/ej2-navigations": "~23.1.44",
-    "@syncfusion/ej2-pdf-export": "~23.1.43",
-    "@syncfusion/ej2-svg-base": "~23.1.36"
+    "@syncfusion/ej2-base": "~23.2.4",
+    "@syncfusion/ej2-calendars": "~23.2.4",
+    "@syncfusion/ej2-compression": "~23.2.4",
+    "@syncfusion/ej2-data": "~23.2.4",
+    "@syncfusion/ej2-excel-export": "~23.2.4",
+    "@syncfusion/ej2-file-utils": "~23.2.4",
+    "@syncfusion/ej2-navigations": "~23.2.4",
+    "@syncfusion/ej2-pdf-export": "~23.2.4",
+    "@syncfusion/ej2-svg-base": "~23.2.4"
   },
@@ -77,5 +77,5 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "23.1.44",
+  "version": "23.2.4",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

src/chart/model/chart-interface.d.ts

@@ -88,2 +88,4 @@ import { Chart, Alignment } from '..';
 export interface IScrollEventArgs {
+    /** Defines the event cancel status. */
+    cancel?: boolean;
     /** Defines the name of the event. */
@@ -90,0 +92,0 @@ name?: string;

src/chart/series/chart-series-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, ChildProperty, Complex, Collection, DateFormatOptions, getValue, animationMode } from '@syncfusion/ej2-base';import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';import { StackValues, RectOption, ControlPoints, PolarArc, appendChildElement, appendClipElement } from '../../common/utils/helper';import { firstToLowerCase, ChartLocation, CircleOption, IHistogramValues, getColorByValue } from '../../common/utils/helper';import { Rect, SvgRenderer, CanvasRenderer } from '@syncfusion/ej2-svg-base';import { ChartSeriesType, ChartShape, LegendShape, LabelPosition, SeriesValueType, EmptyPointMode, SplineType, ShapeType } from '../utils/enum';import { ChartDrawType, DataLabelIntersectAction } from '../utils/enum';import { BorderModel, FontModel, MarginModel, AnimationModel, EmptyPointSettingsModel, OffsetModel } from '../../common/model/base-model';import { ConnectorModel } from '../../common/model/base-model';import { CornerRadiusModel, DragSettingsModel } from '../../common/model/base-model';import { ErrorBarType, ErrorBarDirection, ErrorBarMode, TrendlineTypes } from '../utils/enum';import { Border, Font, Margin, Animation, EmptyPointSettings, CornerRadius, Connector, DragSettings } from '../../common/model/base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Chart } from '../chart';import { Axis, Column, Row } from '../axis/axis';import { Data } from '../../common/model/data';import { Offset } from '../../common/model/base';import { ISeriesRenderEventArgs } from '../../chart/model/chart-interface';import { seriesRender } from '../../common/model/constants';import { Alignment, SeriesCategories } from '../../common/utils/enum';import { BoxPlotMode, Segment } from '../utils/enum';import { sort, getVisiblePoints, setRange } from '../../common/utils/helper';import { Browser } from '@syncfusion/ej2-base';import { StockSeries } from '../../stock-chart/index';
+import { Property, ChildProperty, Complex, Collection, DateFormatOptions, getValue, animationMode } from '@syncfusion/ej2-base';import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';import { StackValues, RectOption, ControlPoints, PolarArc, appendChildElement, appendClipElement } from '../../common/utils/helper';import { firstToLowerCase, ChartLocation, CircleOption, IHistogramValues, getColorByValue } from '../../common/utils/helper';import { Rect, SvgRenderer, CanvasRenderer } from '@syncfusion/ej2-svg-base';import { ChartSeriesType, ChartShape, LegendShape, LabelPosition, SeriesValueType, EmptyPointMode, SplineType, ShapeType, StepPosition } from '../utils/enum';import { ChartDrawType, DataLabelIntersectAction } from '../utils/enum';import { BorderModel, FontModel, MarginModel, AnimationModel, EmptyPointSettingsModel, OffsetModel } from '../../common/model/base-model';import { ConnectorModel } from '../../common/model/base-model';import { CornerRadiusModel, DragSettingsModel } from '../../common/model/base-model';import { ErrorBarType, ErrorBarDirection, ErrorBarMode, TrendlineTypes } from '../utils/enum';import { Border, Font, Margin, Animation, EmptyPointSettings, CornerRadius, Connector, DragSettings } from '../../common/model/base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Chart } from '../chart';import { Axis, Column, Row } from '../axis/axis';import { Data } from '../../common/model/data';import { Offset } from '../../common/model/base';import { ISeriesRenderEventArgs } from '../../chart/model/chart-interface';import { seriesRender } from '../../common/model/constants';import { Alignment, SeriesCategories } from '../../common/utils/enum';import { BoxPlotMode, Segment } from '../utils/enum';import { sort, getVisiblePoints, setRange } from '../../common/utils/helper';import { Browser } from '@syncfusion/ej2-base';import { StockSeries } from '../../stock-chart/index';
 
@@ -1227,2 +1227,12 @@ /**
     /**
+     * Defines the position for the steps in the step line, step area, and step range area chart types. 
+     * * Left: Steps start from the left side of the 2nd point. 
+     * * Center: Steps start between the data points. 
+     * * Right: Steps start from the right side of the 1st point. 
+     *
+     * @default 'Left'
+     */
+    step?: StepPosition;
+
+    /**
      * Defines the appearance of line connecting adjacent points in waterfall charts.
@@ -1229,0 +1239,0 @@ */

src/chart/series/chart-series.d.ts

@@ -7,3 +7,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 import { Rect } from '@syncfusion/ej2-svg-base';
-import { ChartSeriesType, ChartShape, LegendShape, LabelPosition, SeriesValueType, SplineType, ShapeType } from '../utils/enum';
+import { ChartSeriesType, ChartShape, LegendShape, LabelPosition, SeriesValueType, SplineType, ShapeType, StepPosition } from '../utils/enum';
 import { ChartDrawType, DataLabelIntersectAction } from '../utils/enum';
@@ -1210,2 +1210,11 @@ import { BorderModel, FontModel, MarginModel, AnimationModel, EmptyPointSettingsModel, OffsetModel } from '../../common/model/base-model';
     /**
+     * Defines the position for the steps in the step line, step area, and step range area chart types.
+     * * Left: Steps start from the left side of the 2nd point.
+     * * Center: Steps start between the data points.
+     * * Right: Steps start from the right side of the 1st point.
+     *
+     * @default 'Left'
+     */
+    step: StepPosition;
+    /**
      * Defines the appearance of line connecting adjacent points in waterfall charts.
@@ -1212,0 +1221,0 @@ */

src/chart/series/chart-series.js

@@ -1452,2 +1452,5 @@ var __extends = (this && this.__extends) || (function () {
     __decorate([
+        Property('Left')
+    ], Series.prototype, "step", void 0);
+    __decorate([
         Complex({ color: 'black', width: 2 }, Connector)
@@ -1454,0 +1457,0 @@ ], Series.prototype, "connector", void 0);

src/chart/series/line-base.d.ts

@@ -0,1 +1,2 @@
+import { ChartLocation } from '../../common/utils/helper';
 import { PathOption } from '@syncfusion/ej2-svg-base';
@@ -6,2 +7,3 @@ import { Axis } from '../axis/axis';
 import { AnimationModel } from '../../common/model/base-model';
+import { StepPosition } from '../utils/enum';
 /**
@@ -70,2 +72,3 @@ * Base for line type series.
     withinYRange(point: Points, yAxis: Axis): boolean;
+    GetStepLineDirection(currentPoint: ChartLocation, previousPoint: ChartLocation, stepLineType: StepPosition, command?: string): string;
     /**
@@ -72,0 +75,0 @@ * To get first and last visible points

src/chart/series/line-base.js

@@ -164,2 +164,18 @@ /* eslint-disable no-trailing-spaces */
     };
+    LineBase.prototype.GetStepLineDirection = function (currentPoint, previousPoint, stepLineType, command) {
+        if (command === void 0) { command = 'L'; }
+        if (stepLineType === 'Right') {
+            return (command + ' ' +
+                (previousPoint.x) + ' ' + (currentPoint.y) + ' L ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
+        }
+        else if (stepLineType === 'Center') {
+            var centerX = previousPoint.x + (currentPoint.x - previousPoint.x) / 2;
+            return (command + ' ' +
+                (centerX) + ' ' + (previousPoint.y) + ' L ' + (centerX) + ' ' + (currentPoint.y) + ' L ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
+        }
+        else {
+            return (command + ' ' +
+                (currentPoint.x) + ' ' + (previousPoint.y) + ' L ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
+        }
+    };
     /**
@@ -166,0 +182,0 @@ * To get first and last visible points

src/chart/series/range-step-area-series.js

@@ -35,2 +35,3 @@ var __extends = (this && this.__extends) || (function () {
     RangeStepAreaSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {
+        this.prevPoint = null;
         var point;
@@ -88,6 +89,4 @@ var currentPoint;
                         : this.prevPoint.low, xAxis, yAxis, isInverted);
-                    direction += (command + ' ' +
-                        (currentPoint.x) + ' ' + (secondPoint.y) + command + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
-                    this.borderDirection += (command + ' ' +
-                        (currentPoint.x) + ' ' + (secondPoint.y) + command + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
+                    direction += (this.GetStepLineDirection(currentPoint, secondPoint, series.step, command));
+                    this.borderDirection += (this.GetStepLineDirection(currentPoint, secondPoint, series.step, command));
                 }
@@ -101,2 +100,4 @@ else if (series.emptyPointSettings.mode === 'Gap') {
                 closed = false;
+                command = ' L';
+                this.prevPoint = point;
                 if ((i + 1 < visiblePoints.length && !visiblePoints[i + 1].visible)
@@ -107,7 +108,7 @@ || i === visiblePoints.length - 1) {
                     command = 'M';
-                    direction = direction.concat(' ' + 'Z');
+                    direction = direction.concat(' ' + 'Z ');
                     closed = true;
+                    this.prevPoint = null;
+                    start = null;
                 }
-                command = ' L';
-                this.prevPoint = point;
             }
@@ -161,11 +162,8 @@ else {
                         : this.prevPoint.high, xAxis, yAxis, isInverted);
-                    direction += ('L' + ' ' +
-                        (currentPoint.x) + ' ' + (secondPoint.y) + ' L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
+                    direction += (this.GetStepLineDirection(currentPoint, secondPoint, series.step));
                     if (j === i) {
-                        this.borderDirection += 'M' + ' ' +
-                            (currentPoint.x) + ' ' + (currentPoint.y) + ' L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ';
+                        this.borderDirection += (this.GetStepLineDirection(currentPoint, secondPoint, series.step, 'M'));
                     }
                     else {
-                        this.borderDirection += 'L' + ' ' +
-                            (currentPoint.x) + ' ' + (secondPoint.y) + ' L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ';
+                        this.borderDirection += (this.GetStepLineDirection(currentPoint, secondPoint, series.step, 'L'));
                     }
@@ -172,0 +170,0 @@ }

src/chart/series/stacking-step-area-series.d.ts

@@ -8,2 +8,3 @@ import { Series } from './chart-series';
 export declare class StackingStepAreaSeries extends LineBase {
+    private prevStep;
     /**
@@ -10,0 +11,0 @@ * Render the Stacking step area series.

src/chart/series/stacking-step-area-series.js

@@ -40,2 +40,3 @@ var __extends = (this && this.__extends) || (function () {
         var direction = '';
+        var borderDirection = '';
         var stackedvalue = stackSeries.stackedValues;
@@ -75,2 +76,3 @@ var visiblePoint = this.enableComplexProperty(stackSeries);
                     direction += ('L' + ' ' + (currentPointLocation.x) + ' ' + (currentPointLocation.y) + ' ');
+                    borderDirection += ('M' + ' ' + (currentPointLocation.x) + ' ' + (currentPointLocation.y) + ' ');
                 }
@@ -80,4 +82,4 @@ if (prevPoint != null) {
                     secondPoint = getPoint(prevPoint.xValue, stackedvalue.endValues[prevPoint.index], xAxis, yAxis, isInverted);
-                    direction += ('L' + ' ' + (currentPointLocation.x) + ' ' + (secondPoint.y) +
-                        ' L' + ' ' + (currentPointLocation.x) + ' ' + (currentPointLocation.y) + ' ');
+                    direction += (this.GetStepLineDirection(currentPointLocation, secondPoint, stackSeries.step));
+                    borderDirection += (this.GetStepLineDirection(currentPointLocation, secondPoint, stackSeries.step));
                 }
@@ -87,2 +89,3 @@ else if (stackSeries.emptyPointSettings.mode === 'Gap') {
                     direction += 'L' + ' ' + (currentPointLocation.x) + ' ' + (currentPointLocation.y) + ' ';
+                    borderDirection += 'L' + ' ' + (currentPointLocation.x) + ' ' + (currentPointLocation.y) + ' ';
                 }
@@ -94,3 +97,3 @@ visiblePoint[i].symbolLocations.push(getPoint(visiblePoint[i].xValue, stackedvalue.endValues[pointIndex], xAxis, yAxis, isInverted));
             // If we set the empty point mode is Gap or next point of the current point is false, we will close the series path.
-            if (visiblePoint[i + 1] && !visiblePoint[i + 1].visible && stackSeries.emptyPointSettings.mode !== 'Drop') {
+            if (visiblePoint[i + 1] && (!visiblePoint[i + 1].visible && start !== null) && stackSeries.emptyPointSettings.mode !== 'Drop') {
                 var previousPointIndex = void 0;
@@ -100,14 +103,16 @@ for (var j = i; j >= startPoint; j--) {
                     previousPointIndex = j === 0 ? 0 : visiblePoint[j - 1].index;
+                    currentPointLocation = getPoint(visiblePoint[pointIndex].xValue, stackedvalue.startValues[pointIndex], xAxis, yAxis, isInverted);
                     if (j !== 0 && (stackedvalue.startValues[pointIndex] < stackedvalue.startValues[previousPointIndex] ||
                         stackedvalue.startValues[pointIndex] > stackedvalue.startValues[previousPointIndex])) {
-                        currentPointLocation = getPoint(visiblePoint[pointIndex].xValue, stackedvalue.startValues[pointIndex], xAxis, yAxis, isInverted);
                         direction = direction.concat('L' + ' ' + (currentPointLocation.x) + ' ' + (currentPointLocation.y) + ' ');
-                        currentPointLocation = getPoint(visiblePoint[pointIndex].xValue, stackedvalue.startValues[previousPointIndex], xAxis, yAxis, isInverted);
+                        secondPoint = getPoint(visiblePoint[previousPointIndex].xValue, stackedvalue.startValues[previousPointIndex], xAxis, yAxis, isInverted);
                     }
                     else {
-                        currentPointLocation = getPoint(visiblePoint[pointIndex].xValue, stackedvalue.startValues[pointIndex], xAxis, yAxis, isInverted);
+                        secondPoint = getPoint(visiblePoint[pointIndex].xValue, stackedvalue.startValues[pointIndex], xAxis, yAxis, isInverted);
                     }
-                    direction = direction.concat('L' + ' ' + (currentPointLocation.x) + ' ' + (currentPointLocation.y) + ' ');
+                    if (visiblePoint[previousPointIndex].visible) {
+                        direction = direction.concat(this.GetStepLineDirection(secondPoint, currentPointLocation, this.prevStep));
+                    }
                 }
-                startPoint = i + 1;
+                startPoint = i + 2;
                 start = null;
@@ -124,2 +129,3 @@ prevPoint = null;
                 direction += ('L' + ' ' + (secondPoint.x) + ' ' + (secondPoint.y) + ' ');
+                borderDirection += ('L' + ' ' + (secondPoint.x) + ' ' + (secondPoint.y) + ' ');
                 start = { 'x': visiblePoint[pointsLength - 1].xValue + lineLength, 'y': stackedvalue.startValues[pointIndex] };
@@ -144,5 +150,8 @@ secondPoint = getPoint(start.x, start.y, xAxis, yAxis, isInverted);
                     point3 = getPoint(visiblePoint[validIndex].xValue, stackedvalue.startValues[pointIndex], xAxis, yAxis, isInverted);
-                    direction = direction.concat('L' + ' ' + (point2.x) + ' ' + (point3.y) + ' ');
+                    if (!(j !== 0 && !visiblePoint[j - 1].visible)) {
+                        direction = direction.concat(this.GetStepLineDirection(point3, point2, this.prevStep));
+                    }
                 }
             }
+            this.prevStep = stackSeries.step === 'Right' ? 'Left' : stackSeries.step === 'Left' ? 'Right' : stackSeries.step;
             options = new PathOption(stackSeries.chart.element.id + '_Series_' + stackSeries.index, stackSeries.interior, 0, 'transparent', stackSeries.opacity, stackSeries.dashArray, direction);
@@ -154,4 +163,3 @@ this.appendLinePath(options, stackSeries, '');
             if (stackSeries.border.width !== 0) {
-                emptyPointDirection = this.removeEmptyPointsBorder(this.getBorderDirection(direction));
-                options = new PathOption(stackSeries.chart.element.id + '_Series_border_' + stackSeries.index, 'transparent', stackSeries.border.width, stackSeries.border.color ? stackSeries.border.color : stackSeries.interior, 1, stackSeries.dashArray, emptyPointDirection);
+                options = new PathOption(stackSeries.chart.element.id + '_Series_border_' + stackSeries.index, 'transparent', stackSeries.border.width, stackSeries.border.color ? stackSeries.border.color : stackSeries.interior, 1, stackSeries.dashArray, borderDirection);
                 this.appendLinePath(options, stackSeries, '');
@@ -158,0 +166,0 @@ }

src/chart/series/step-area-series.js

@@ -71,4 +71,3 @@ var __extends = (this && this.__extends) || (function () {
                     secondPoint = getPoint(prevPoint.xValue, prevPoint.yValue, xAxis, yAxis, isInverted);
-                    direction += ('L' + ' ' +
-                        (currentPoint.x) + ' ' + (secondPoint.y) + ' L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
+                    direction = direction.concat(this.GetStepLineDirection(currentPoint, secondPoint, series.step));
                 }
@@ -75,0 +74,0 @@ else if (series.emptyPointSettings.mode === 'Gap') {

src/chart/series/step-line-series.js

@@ -56,4 +56,3 @@ var __extends = (this && this.__extends) || (function () {
                     point1 = getPoint(prevPoint.xValue, prevPoint.yValue, xAxis, yAxis, isInverted);
-                    direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ' + 'L' + ' ' +
-                        (point2.x) + ' ' + (point1.y) + ' L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');
+                    direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + this.GetStepLineDirection(point2, point1, series.step));
                     startPoint = 'L';
@@ -60,0 +59,0 @@ }

src/chart/utils/enum.d.ts

@@ -860,1 +860,14 @@ /**
 'Gradient';
+/**
+ * Defines the position for the steps in the step line, step area, and step range area chart types.
+ * * Left: Steps start from the left side of the 2nd point.
+ * * Center: Steps start between the data points.
+ * * Right: Steps start from the right side of the 1st point.
+ */
+export declare type StepPosition = 
+/** Steps start from the left side of the 2nd point.*/
+'Left' | 
+/** Steps start from the right side of the 1st point.*/
+'Right' | 
+/** Steps start between the data points.*/
+'Center';

src/common/scrollbar/scrollbar.js

@@ -112,2 +112,3 @@ /* eslint-disable @typescript-eslint/ban-types */
             this.setZoomFactorPosition(elem.thumbRectX, elem.thumbRectWidth, false);
+            this.axis.zoomPosition = this.zoomPosition < 0 ? 0 : this.zoomPosition > 0.9 ? 1 : this.zoomPosition;
             if (this.isLazyLoad) {
@@ -187,6 +188,4 @@ var thumbMove = elem.thumbRectX > this.previousRectX ? 'RightMove' : 'LeftMove';
         this.zoomFactor = (currentWidth + (currentScrollWidth >= this.width ? circleRadius + circleWidth : 0)) / axisSize;
-        axis.zoomFactor = isRequire ? this.zoomFactor : axis.zoomFactor;
         this.zoomPosition = currentScrollWidth > axisSize ? (1 - axis.zoomFactor) : currentX < (circleRadius + circleWidth) ? 0 :
             (currentX - (currentX - currentZPWidth <= 0 ? currentZPWidth : 0)) / axisSize;
-        axis.zoomPosition = this.zoomPosition < 0 ? 0 : this.zoomPosition > 0.9 ? 1 : this.zoomPosition;
     };
@@ -238,2 +237,3 @@ /**
                 this.setZoomFactorPosition(currentX, elem.thumbRectWidth, false);
+                this.axis.zoomPosition = this.zoomPosition < 0 ? 0 : this.zoomPosition > 0.9 ? 1 : this.zoomPosition;
             }
@@ -244,3 +244,2 @@ this.component.trigger(scrollChanged, this.getArgs(scrollChanged, range, zoomPosition, zoomFactor, currentRange));
             this.resizeThumb();
-            this.component.trigger(scrollChanged, this.getArgs(scrollChanged, range, zoomPosition, zoomFactor, currentRange));
         }
@@ -278,2 +277,4 @@ };
             this.setZoomFactorPosition(elem.thumbRectX, elem.thumbRectWidth);
+            this.axis.zoomFactor = this.zoomFactor;
+            this.axis.zoomPosition = this.zoomPosition < 0 ? 0 : this.zoomPosition > 0.9 ? 1 : this.zoomPosition;
         }
@@ -576,4 +577,25 @@ axis.zoomFactor = this.zoomFactor;
                 this.previousXY = mouseXY;
-                this.positionThumb(currentX, currentWidth);
                 this.setZoomFactorPosition(currentX, currentWidth);
+                var argsData = {
+                    axis: (this.component.isBlazor ? {} : this.axis),
+                    name: scrollChanged,
+                    range: this.axis.visibleRange,
+                    zoomFactor: this.zoomFactor,
+                    zoomPosition: this.zoomPosition,
+                    previousRange: this.axis.visibleRange,
+                    previousZoomFactor: this.axis.zoomFactor,
+                    previousZoomPosition: this.axis.zoomPosition,
+                    currentRange: null,
+                    cancel: false
+                };
+                this.component.trigger(scrollChanged, argsData);
+                if (!argsData.cancel) {
+                    this.positionThumb(currentX, currentWidth);
+                    this.axis.zoomFactor = argsData.zoomFactor;
+                    this.axis.zoomPosition = argsData.zoomPosition;
+                }
+                else {
+                    this.zoomFactor = argsData.previousZoomFactor;
+                    this.zoomPosition = argsData.previousZoomPosition;
+                }
             }
@@ -586,3 +608,2 @@ }
             this.previousXY = mouseXY;
-            this.positionThumb(this.startX, currentWidth);
             this.setZoomFactorPosition(this.startX, currentWidth);
@@ -592,2 +613,24 @@ if (!this.isLazyLoad) {
             }
+            var argsData = {
+                axis: (this.component.isBlazor ? {} : this.axis),
+                name: scrollChanged,
+                range: this.axis.visibleRange,
+                zoomFactor: this.zoomFactor,
+                zoomPosition: this.zoomPosition,
+                previousRange: this.axis.visibleRange,
+                previousZoomFactor: this.axis.zoomFactor,
+                previousZoomPosition: this.axis.zoomPosition,
+                currentRange: null,
+                cancel: false
+            };
+            this.component.trigger(scrollChanged, argsData);
+            if (!argsData.cancel) {
+                this.positionThumb(this.startX, currentWidth);
+                this.axis.zoomFactor = argsData.zoomFactor;
+                this.axis.zoomPosition = argsData.zoomPosition;
+            }
+            else {
+                this.zoomFactor = argsData.previousZoomFactor;
+                this.zoomPosition = argsData.previousZoomPosition;
+            }
         }
@@ -594,0 +637,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

30165924

increased by0.13%

Lines of code

219905

increased by0.11%

Dependency changes

• + Added@syncfusion/ej2-base@23.2.6(transitive)

• + Added@syncfusion/ej2-buttons@23.2.7(transitive)

• + Added@syncfusion/ej2-calendars@23.2.7(transitive)

• + Added@syncfusion/ej2-compression@23.2.4(transitive)

• + Added@syncfusion/ej2-data@23.2.4(transitive)

• + Added@syncfusion/ej2-excel-export@23.2.4(transitive)

• + Added@syncfusion/ej2-file-utils@23.2.4(transitive)

• + Added@syncfusion/ej2-icons@23.2.4(transitive)

• + Added@syncfusion/ej2-inputs@23.2.4(transitive)

• + Added@syncfusion/ej2-lists@23.2.4(transitive)

• + Added@syncfusion/ej2-navigations@23.2.7(transitive)

• + Added@syncfusion/ej2-pdf-export@23.2.6(transitive)

• + Added@syncfusion/ej2-popups@23.2.4(transitive)

• + Added@syncfusion/ej2-splitbuttons@23.2.4(transitive)

• + Added@syncfusion/ej2-svg-base@23.2.5(transitive)

• - Removed@syncfusion/ej2-base@23.1.43(transitive)

• - Removed@syncfusion/ej2-buttons@23.1.43(transitive)

• - Removed@syncfusion/ej2-calendars@23.1.41(transitive)

• - Removed@syncfusion/ej2-compression@23.1.36(transitive)

• - Removed@syncfusion/ej2-data@23.1.44(transitive)

• - Removed@syncfusion/ej2-excel-export@23.1.36(transitive)

• - Removed@syncfusion/ej2-file-utils@23.1.36(transitive)

• - Removed@syncfusion/ej2-icons@23.1.36(transitive)

• - Removed@syncfusion/ej2-inputs@23.1.43(transitive)

• - Removed@syncfusion/ej2-lists@23.1.43(transitive)

• - Removed@syncfusion/ej2-navigations@23.1.44(transitive)

• - Removed@syncfusion/ej2-pdf-export@23.1.43(transitive)

• - Removed@syncfusion/ej2-popups@23.1.45(transitive)

• - Removed@syncfusion/ej2-splitbuttons@23.1.43(transitive)

• - Removed@syncfusion/ej2-svg-base@23.1.36(transitive)

• Updated@syncfusion/ej2-base@~23.2.4

• Updated@syncfusion/ej2-calendars@~23.2.4

• Updated@syncfusion/ej2-compression@~23.2.4

• Updated@syncfusion/ej2-data@~23.2.4

• Updated@syncfusion/ej2-excel-export@~23.2.4

• Updated@syncfusion/ej2-file-utils@~23.2.4

• Updated@syncfusion/ej2-navigations@~23.2.4

• Updated@syncfusion/ej2-pdf-export@~23.2.4

• Updated@syncfusion/ej2-svg-base@~23.2.4