@syncfusion/ej2-charts - npm Package Compare versions

Comparing version 16.3.34 to 16.4.40-beta

CHANGELOG.md

@@ -15,2 +15,38 @@ <!-- markdownlint-disable MD010 -->
 
+- Support for grid line animation has been provided.
+- Support has been provided to load data on-demand.
+
+### Accumulation chart
+
+#### New Features
+
+- The center option has been provided to the accumulation chart.
+- Support has been provided for different radius in pie slice.
+
+### Stock Chart
+
+Stock Chart component is used to track and visualize stock price of any company over a specific period using charting and range tools. All stock elements are rendered by using Scalable Vector
+Graphics (SVG).
+
+- **Data Binding** - Binds the data with local and remote data source.
+- **Chart** - To represent the selected data and its supports candle, hilo, OHLC, line, spline and area type series.
+- **Range Selector** - To select the smaller range from a larger collection.
+- **Data Types** - Supports three different types of data, namely Numerical, Datetime, and Logarithmic.
+- **Animation** - Chart series and slider will be animated when rendering and changing the selected data.
+- **Period Selector** - Supports period selector to select data based on predefined periods.
+- **Tooltip** - Supports tooltip for the selected data.
+- **Export** - Supports to print the chart directly from the browser and exports in both JPEG and PNG format.
+
+### Chart
+
+#### Bug Fixes
+
+- Default tooltip format for box and whisker is corrected.
+
+## 16.3.33 (2018-11-20)
+
+### Chart
+
+#### New Features
+
 - Margin options are added to legend.
@@ -20,3 +56,3 @@
 
-- Series DataSource change chart refresh issue fixed.
+- Chart is now refreshing on changing the dataSource in series directive.
 - Axis label is now rendering properly, when we have the interval in decimals.
@@ -23,0 +59,0 @@

dist/global/index.d.ts

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

package.json

 {
   "name": "@syncfusion/ej2-charts",
-  "version": "16.3.34",
+  "version": "16.4.40-beta",
   "description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.",
@@ -8,10 +8,10 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.3.34",
-    "@syncfusion/ej2-data": "~16.3.34",
-    "@syncfusion/ej2-svg-base": "~16.3.34",
-    "@syncfusion/ej2-pdf-export": "~16.3.34",
-    "@syncfusion/ej2-file-utils": "~16.3.34",
-    "@syncfusion/ej2-compression": "~16.3.34",
-    "@syncfusion/ej2-navigations": "~16.3.34",
-    "@syncfusion/ej2-calendars": "~16.3.34"
+    "@syncfusion/ej2-base": "~16.4.40-beta",
+    "@syncfusion/ej2-data": "~16.4.40-beta",
+    "@syncfusion/ej2-svg-base": "~16.4.40-beta",
+    "@syncfusion/ej2-pdf-export": "~16.4.40-beta",
+    "@syncfusion/ej2-file-utils": "~16.4.40-beta",
+    "@syncfusion/ej2-compression": "~16.4.40-beta",
+    "@syncfusion/ej2-navigations": "~16.4.40-beta",
+    "@syncfusion/ej2-calendars": "~16.4.40-beta"
   },
@@ -18,0 +18,0 @@ "devDependencies": {

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

@@ -1,2 +0,2 @@
-import { Property, Component, Complex, Collection, NotifyPropertyChanges, INotifyPropertyChanged, SvgRenderer } from '@syncfusion/ej2-base';import { ModuleDeclaration, Internationalization, Event, EmitType, Browser, EventHandler, Touch } from '@syncfusion/ej2-base';import { remove, extend, isNullOrUndefined } from '@syncfusion/ej2-base';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Font, Margin, Border, TooltipSettings, Indexes } from '../common/model/base';import { AccumulationSeries, AccPoints } from './model/acc-base';import { AccumulationType, AccumulationSelectionMode } from './model/enum';import { IAccSeriesRenderEventArgs, IAccTextRenderEventArgs, IAccTooltipRenderEventArgs } from './model/pie-interface';import { IAccAnimationCompleteEventArgs, IAccPointRenderEventArgs, IAccLoadedEventArgs } from './model/pie-interface';import { Theme, getThemeColor } from '../common/model/theme';import { ILegendRenderEventArgs, IMouseEventArgs, IPointEventArgs } from '../common/model/interface';import {  IAnnotationRenderEventArgs } from '../common/model/interface';import { load, seriesRender, legendRender, textRender, tooltipRender, pointClick } from '../common/model/constants';import { pointMove, chartMouseClick, chartMouseDown } from '../common/model/constants';import { chartMouseLeave, chartMouseMove, chartMouseUp, resized } from '../common/model/constants';import { FontModel, MarginModel, BorderModel, IndexesModel, TooltipSettingsModel } from '../common/model/base-model';import { AccumulationSeriesModel} from './model/acc-base-model';import { LegendSettings } from '../common/legend/legend';import { AccumulationLegend } from './renderer/legend';import { LegendSettingsModel } from '../common/legend/legend-model';import { Rect, ChartLocation, Size, subtractRect, indexFinder, appendChildElement, redrawElement } from '../common/utils/helper';import { measureText, RectOption, showTooltip } from '../common/utils/helper';import { textElement, TextOption, createSvg, calculateSize, removeElement, firstToLowerCase } from '../common/utils/helper';import { getElement, titlePositionX } from '../common/utils/helper';import { Data } from '../common/model/data';import { AccumulationTooltip } from './user-interaction/tooltip';import { AccumulationBase } from './renderer/accumulation-base';import { PieSeries } from './renderer/pie-series';import { AccumulationDataLabel } from './renderer/dataLabel';import { FunnelSeries } from './renderer/funnel-series';import { PyramidSeries } from './renderer/pyramid-series';import { AccumulationSelection } from './user-interaction/selection';import { AccumulationTheme } from './model/enum';import { AccumulationAnnotationSettingsModel } from './model/acc-base-model';import { AccumulationAnnotationSettings } from './model/acc-base';import { AccumulationAnnotation } from './annotation/annotation';import { IPrintEventArgs } from '../common/model/interface';import { ExportUtils } from '../common/utils/export';import { ExportType, Alignment } from '../common/utils/enum';import { getTitle } from '../common/utils/helper';import {Index} from '../common/model/base';import { IThemeStyle, Chart, RangeNavigator } from '../index';import { IAccResizeEventArgs } from './model/pie-interface';import { DataManager } from '@syncfusion/ej2-data';
+import { Property, Component, Complex, Collection, NotifyPropertyChanges, INotifyPropertyChanged, SvgRenderer } from '@syncfusion/ej2-base';import { ModuleDeclaration, Internationalization, Event, EmitType, Browser, EventHandler, Touch } from '@syncfusion/ej2-base';import { remove, extend, isNullOrUndefined } from '@syncfusion/ej2-base';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Font, Margin, Border, TooltipSettings, Indexes } from '../common/model/base';import { AccumulationSeries, AccPoints, PieCenter } from './model/acc-base';import { AccumulationType, AccumulationSelectionMode } from './model/enum';import { IAccSeriesRenderEventArgs, IAccTextRenderEventArgs, IAccTooltipRenderEventArgs } from './model/pie-interface';import { IAccAnimationCompleteEventArgs, IAccPointRenderEventArgs, IAccLoadedEventArgs } from './model/pie-interface';import { Theme, getThemeColor } from '../common/model/theme';import { ILegendRenderEventArgs, IMouseEventArgs, IPointEventArgs } from '../common/model/interface';import {  IAnnotationRenderEventArgs } from '../common/model/interface';import { load, seriesRender, legendRender, textRender, tooltipRender, pointClick } from '../common/model/constants';import { pointMove, chartMouseClick, chartMouseDown } from '../common/model/constants';import { chartMouseLeave, chartMouseMove, chartMouseUp, resized } from '../common/model/constants';import { FontModel, MarginModel, BorderModel, IndexesModel, TooltipSettingsModel } from '../common/model/base-model';import { AccumulationSeriesModel, PieCenterModel} from './model/acc-base-model';import { LegendSettings } from '../common/legend/legend';import { AccumulationLegend } from './renderer/legend';import { LegendSettingsModel } from '../common/legend/legend-model';import { Rect, ChartLocation, Size, subtractRect, indexFinder, appendChildElement, redrawElement } from '../common/utils/helper';import { measureText, RectOption, showTooltip } from '../common/utils/helper';import { textElement, TextOption, createSvg, calculateSize, removeElement, firstToLowerCase } from '../common/utils/helper';import { getElement, titlePositionX } from '../common/utils/helper';import { Data } from '../common/model/data';import { AccumulationTooltip } from './user-interaction/tooltip';import { AccumulationBase } from './renderer/accumulation-base';import { PieSeries } from './renderer/pie-series';import { AccumulationDataLabel } from './renderer/dataLabel';import { FunnelSeries } from './renderer/funnel-series';import { PyramidSeries } from './renderer/pyramid-series';import { AccumulationSelection } from './user-interaction/selection';import { AccumulationTheme } from './model/enum';import { AccumulationAnnotationSettingsModel } from './model/acc-base-model';import { AccumulationAnnotationSettings } from './model/acc-base';import { AccumulationAnnotation } from './annotation/annotation';import { IPrintEventArgs } from '../common/model/interface';import { ExportUtils } from '../common/utils/export';import { ExportType, Alignment } from '../common/utils/enum';import { getTitle } from '../common/utils/helper';import {Index} from '../common/model/base';import { IThemeStyle, Chart, RangeNavigator } from '../index';import { IAccResizeEventArgs } from './model/pie-interface';import { DataManager } from '@syncfusion/ej2-data';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -32,2 +32,7 @@
     /**
+     * Center of pie
+     */
+    center?: PieCenterModel;
+
+    /**
     * Specifies the dataSource for the AccumulationChart. It can be an array of JSON objects or an instance of DataManager.
@@ -34,0 +39,0 @@ * ```html

src/accumulation-chart/accumulation.d.ts

@@ -15,3 +15,3 @@ /**
 import { FontModel, MarginModel, BorderModel, IndexesModel, TooltipSettingsModel } from '../common/model/base-model';
-import { AccumulationSeriesModel } from './model/acc-base-model';
+import { AccumulationSeriesModel, PieCenterModel } from './model/acc-base-model';
 import { AccumulationLegend } from './renderer/legend';
@@ -104,2 +104,6 @@ import { LegendSettingsModel } from '../common/legend/legend-model';
     /**
+     * Center of pie
+     */
+    center: PieCenterModel;
+    /**
      * Specifies the dataSource for the AccumulationChart. It can be an array of JSON objects or an instance of DataManager.
@@ -333,3 +337,3 @@ * ```html
     /** @private */
-    center: ChartLocation;
+    origin: ChartLocation;
     /** @private */
@@ -336,0 +340,0 @@ readonly type: AccumulationType;

src/accumulation-chart/accumulation.js

@@ -27,3 +27,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Font, Margin, Border, TooltipSettings, Indexes } from '../common/model/base';
-import { AccumulationSeries } from './model/acc-base';
+import { AccumulationSeries, PieCenter } from './model/acc-base';
 import { Theme, getThemeColor } from '../common/model/theme';
@@ -506,5 +506,5 @@ import { load, pointClick } from '../common/model/constants';
         this.renderBorder();
-        this.renderTitle();
         this.createSecondaryElement();
         this.renderSeries();
+        this.renderTitle();
         this.renderLegend();
@@ -862,2 +862,5 @@ appendChildElement(this.element, this.svgObject, this.redraw);
     __decorate([
+        Complex({}, PieCenter)
+    ], AccumulationChart.prototype, "center", void 0);
+    __decorate([
         Property('')
@@ -864,0 +867,0 @@ ], AccumulationChart.prototype, "dataSource", void 0);

src/accumulation-chart/model/acc-base-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, ChildProperty, Complex, createElement } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { Border, Font, Animation, Index, EmptyPointSettings, Connector } from '../../common/model/base';import { Rect, ChartLocation, stringToNumber, PathOption, Size, appendChildElement } from '../../common/utils/helper';import { AccumulationType, AccumulationLabelPosition, PyramidModes } from '../model/enum';import { IAccSeriesRenderEventArgs, IAccPointRenderEventArgs } from '../model/pie-interface';import { LegendShape } from '../../chart/utils/enum';import { Data } from '../../common/model/data';import { seriesRender, pointRender } from '../../common/model/constants';import { getSeriesColor } from '../../common/model/theme';import { FontModel, BorderModel, AnimationModel, EmptyPointSettingsModel, ConnectorModel } from '../../common/model/base-model';import { AccumulationChart } from '../accumulation';import { getElement, firstToLowerCase } from '../../common/utils/helper';import { Units, Alignment, Regions, Position, SeriesCategories } from '../../common/utils/enum';import { GroupModes } from './enum';
+import { Property, ChildProperty, Complex, createElement } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { Border, Font, Animation, Index, EmptyPointSettings, Connector } from '../../common/model/base';import { Rect, ChartLocation, stringToNumber, PathOption, Size, appendChildElement} from '../../common/utils/helper';import { AccumulationType, AccumulationLabelPosition, PyramidModes } from '../model/enum';import { IAccSeriesRenderEventArgs, IAccPointRenderEventArgs } from '../model/pie-interface';import { LegendShape } from '../../chart/utils/enum';import { Data } from '../../common/model/data';import { seriesRender, pointRender } from '../../common/model/constants';import { getSeriesColor } from '../../common/model/theme';import { FontModel, BorderModel, AnimationModel, EmptyPointSettingsModel, ConnectorModel } from '../../common/model/base-model';import { AccumulationChart } from '../accumulation';import { getElement, firstToLowerCase } from '../../common/utils/helper';import { Units, Alignment, Regions, Position, SeriesCategories } from '../../common/utils/enum';import { GroupModes } from './enum';
 
@@ -151,2 +151,21 @@ /**
 /**
+ * Interface for a class PieCenter
+ */
+export interface PieCenterModel {
+
+    /**
+     * X value of the center.
+     * @default '50%'
+     */
+    x?: string;
+
+    /**
+     * Y value of the center.
+     * @default '50%'
+     */
+    y?: string;
+
+}
+
+/**
  * Interface for a class AccPoints
@@ -211,3 +230,3 @@ */
     /**
-     * The provided value will be considered as a Tooltip Mapping name 
+     * The provided value will be considered as a Tooltip Mapping name
      * @default ''
@@ -214,0 +233,0 @@ */

src/accumulation-chart/model/acc-base.d.ts

@@ -130,2 +130,17 @@ /**
 /**
+ * Center value of the Pie series.
+ */
+export declare class PieCenter extends ChildProperty<PieCenter> {
+    /**
+     * X value of the center.
+     * @default '50%'
+     */
+    x: string;
+    /**
+     * Y value of the center.
+     * @default '50%'
+     */
+    y: string;
+}
+/**
  * Points model for the series.
@@ -139,2 +154,3 @@ */
     tooltip: string;
+    sliceRadius: string;
     originalText: string;
@@ -141,0 +157,0 @@ /** @private */

src/accumulation-chart/model/acc-base.js

@@ -107,2 +107,19 @@ var __extends = (this && this.__extends) || (function () {
 /**
+ * Center value of the Pie series.
+ */
+var PieCenter = /** @class */ (function (_super) {
+    __extends(PieCenter, _super);
+    function PieCenter() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('50%')
+    ], PieCenter.prototype, "x", void 0);
+    __decorate([
+        Property('50%')
+    ], PieCenter.prototype, "y", void 0);
+    return PieCenter;
+}(ChildProperty));
+export { PieCenter };
+/**
  * Points model for the series.
@@ -257,2 +274,3 @@ */
         clubPoint.text = clubPoint.originalText = clubPoint.x + ': ' + this.sumOfClub;
+        clubPoint.sliceRadius = '80%';
         return clubPoint;
@@ -307,2 +325,4 @@ };
         point.tooltip = getValue(this.tooltipMappingName || '', data[i]);
+        point.sliceRadius = getValue(this.radius, data[i]);
+        point.sliceRadius = isNullOrUndefined(point.sliceRadius) ? '80%' : point.sliceRadius;
         this.setAccEmptyPoint(point, i, data, colors);
@@ -309,0 +329,0 @@ return point;

src/accumulation-chart/model/enum.d.ts

@@ -58,4 +58,12 @@ /**
 'Bootstrap' | 
-/**  Render a accumulation chart with Highcontrast theme. */
-'Highcontrast';
+/**  Render a accumulation chart with Highcontrast Light theme. */
+'HighcontrastLight' | 
+/**  Render a accumulation chart with MaterialDark theme. */
+'MaterialDark' | 
+/**  Render a accumulation chart with FabricDark theme. */
+'FabricDark' | 
+/**  Render a accumulation chart with HighcontrastDark theme. */
+'Highcontrast' | 
+/**  Render a accumulation chart with BootstrapDark theme. */
+'BootstrapDark';
 /**
@@ -62,0 +70,0 @@ * Defines the empty point mode of the chart.

src/accumulation-chart/renderer/accumulation-base.d.ts

@@ -47,2 +47,7 @@ import { ChartLocation } from '../../common/utils/helper';
     /**
+     * To check various radius pie
+     * @private
+     */
+    protected isVariousRadius(): boolean;
+    /**
      * To process the explode on accumulation chart loading
@@ -49,0 +54,0 @@ * @private

src/accumulation-chart/renderer/accumulation-base.js

@@ -80,2 +80,9 @@ /**
     /**
+     * To check various radius pie
+     * @private
+     */
+    AccumulationBase.prototype.isVariousRadius = function () {
+        return this.accumulation.pieSeriesModule.isRadiusMapped;
+    };
+    /**
      * To process the explode on accumulation chart loading
@@ -82,0 +89,0 @@ * @private

src/accumulation-chart/renderer/dataLabel.js

@@ -45,3 +45,6 @@ var __extends = (this && this.__extends) || (function () {
     AccumulationDataLabel.prototype.getDataLabelPosition = function (point, dataLabel, textSize, points, parent, id) {
-        var radius = this.isCircular() ? this.labelRadius : this.getLabelDistance(point, dataLabel);
+        var radius = this.isCircular() ? (!this.isVariousRadius() ? this.accumulation.pieSeriesModule.labelRadius :
+            this.accumulation.pieSeriesModule.getLabelRadius(this.accumulation.visibleSeries[0], point)) :
+            this.getLabelDistance(point, dataLabel);
+        //let radius: number = this.isCircular() ? this.labelRadius : this.getLabelDistance(point, dataLabel);
         this.getLabelRegion(point, dataLabel.position, textSize, radius, this.marginValue);
@@ -152,3 +155,3 @@ point.labelAngle = point.midAngle;
             clearTimeout(this.clearTooltip);
-            this.clearTooltip = setTimeout(function () { removeElement(_this.accumulation.element.id + '_EJ2_Datalabel_Tooltip'); }, 1000);
+            this.clearTooltip = +setTimeout(function () { removeElement(_this.accumulation.element.id + '_EJ2_Datalabel_Tooltip'); }, 1000);
         }
@@ -343,3 +346,6 @@ };
         var connector = dataLabel.connectorStyle;
-        var labelRadius = this.isCircular() ? this.labelRadius : this.getLabelDistance(point, dataLabel);
+        var labelRadius = this.isCircular() ? (!this.isVariousRadius() ? this.labelRadius :
+            this.accumulation.pieSeriesModule.getLabelRadius(this.accumulation.visibleSeries[0], point)) :
+            this.getLabelDistance(point, dataLabel);
+        //let labelRadius: number = this.isCircular() ? this.labelRadius : this.getLabelDistance(point, dataLabel);
         var start = this.getConnectorStartPoint(point, connector);
@@ -351,3 +357,5 @@ var labelAngle = end || point.midAngle;
             if (this.isCircular()) {
-                var r = labelRadius - this.radius;
+                var r = labelRadius - (this.isVariousRadius() ? stringToNumber(point.sliceRadius, this.accumulation.pieSeriesModule.seriesRadius) :
+                    this.radius);
+                //let r: number = labelRadius - this.radius;
                 middle = degreeToLocation(labelAngle, labelRadius - (r / 2), this.center);
@@ -468,3 +476,5 @@ return 'M ' + start.x + ' ' + start.y + ' Q ' + middle.x + ' ' + middle.y + ' ' + endPoint.x + ' ' + endPoint.y;
         else {
-            return degreeToLocation(point.midAngle, this.radius, this.center);
+            //return degreeToLocation(point.midAngle, this.radius, this.center);
+            return degreeToLocation(point.midAngle, (this.isVariousRadius() ? stringToNumber(point.sliceRadius, this.accumulation.pieSeriesModule.seriesRadius) :
+                this.radius), this.center);
         }
@@ -476,4 +486,6 @@ };
     AccumulationDataLabel.prototype.getConnectorStartPoint = function (point, connector) {
-        return this.isCircular() ? degreeToLocation(point.midAngle, this.radius - connector.width, this.center) :
-            this.getLabelLocation(point);
+        // return this.isCircular() ? degreeToLocation(point.midAngle, this.radius - connector.width, this.center) :
+        //     this.getLabelLocation(point);
+        return this.isCircular() ? degreeToLocation(point.midAngle, (this.isVariousRadius() ? stringToNumber(point.sliceRadius, this.accumulation.pieSeriesModule.seriesRadius) :
+            this.radius) - connector.width, this.center) : this.getLabelLocation(point);
     };
@@ -480,0 +492,0 @@ /**

src/accumulation-chart/renderer/pie-base.d.ts

 import { AccumulationChart } from '../accumulation';
 import { ChartLocation, Rect } from '../../common/utils/helper';
 import { AccumulationLabelPosition } from '../model/enum';
-import { AccumulationSeries } from '../model/acc-base';
+import { AccumulationSeries, AccPoints } from '../model/acc-base';
 import { AccumulationBase } from './accumulation-base';
+import { AccumulationSeriesModel } from '../model/acc-base-model';
 /**
@@ -16,2 +17,5 @@ * PieBase class used to do pie base calculations.
     labelRadius: number;
+    isRadiusMapped: boolean;
+    seriesRadius: number;
+    size: number;
     /**
@@ -22,2 +26,3 @@ * To initialize the property values.
     initProperties(chart: AccumulationChart, series: AccumulationSeries): void;
+    getLabelRadius(series: AccumulationSeriesModel, point: AccPoints): number;
     /**
@@ -24,0 +29,0 @@ * To find the center of the accumulation.

src/accumulation-chart/renderer/pie-base.js

@@ -35,8 +35,33 @@ var __extends = (this && this.__extends) || (function () {
         this.accumulation = chart;
-        var size = Math.min(chart.initialClipRect.width, chart.initialClipRect.height);
+        this.size = Math.min(chart.initialClipRect.width, chart.initialClipRect.height);
         this.initAngles(series);
-        this.radius = stringToNumber(series.radius, size / 2);
-        this.innerRadius = stringToNumber(series.innerRadius, this.radius);
-        this.labelRadius = series.dataLabel.position === 'Inside' ? (((this.radius - this.innerRadius) / 2) + this.innerRadius) :
-            (this.radius + stringToNumber(series.dataLabel.connectorStyle.length || '4%', size / 2));
+        var r = parseInt(series.radius, 10);
+        if ((series.radius.indexOf('%') !== -1 || typeof r === 'number') && !isNaN(r)) {
+            this.isRadiusMapped = false;
+            this.radius = stringToNumber(series.radius, this.size / 2);
+            this.innerRadius = stringToNumber(series.innerRadius, this.radius);
+            this.labelRadius = series.dataLabel.position === 'Inside' ? (((this.radius - this.innerRadius) / 2) + this.innerRadius) :
+                (this.radius + stringToNumber(series.dataLabel.connectorStyle.length || '4%', this.size / 2));
+        }
+        else {
+            var radiusCollection = [];
+            this.isRadiusMapped = true;
+            for (var i = 0; i < Object.keys(series.points).length; i++) {
+                if (series.points[i].sliceRadius.indexOf('%') !== -1) {
+                    radiusCollection[i] = stringToNumber(series.points[i].sliceRadius, this.size / 2);
+                }
+                else {
+                    radiusCollection[i] = parseInt(series.points[i].sliceRadius, 10);
+                }
+            }
+            var minRadius = Math.min.apply(null, radiusCollection);
+            var maxRadius = Math.max.apply(null, radiusCollection);
+            this.radius = this.seriesRadius = maxRadius;
+            this.innerRadius = stringToNumber(series.innerRadius, this.seriesRadius);
+            this.innerRadius = this.innerRadius > minRadius ? (this.innerRadius / 2) : this.innerRadius;
+        }
+        // this.radius = stringToNumber(series.radius, size / 2);
+        // this.innerRadius = stringToNumber(series.innerRadius, this.radius);
+        // this.labelRadius = series.dataLabel.position === 'Inside' ? (((this.radius - this.innerRadius) / 2) + this.innerRadius) :
+        //     (this.radius + stringToNumber(series.dataLabel.connectorStyle.length || '4%', size / 2));
         chart.explodeDistance = series.explode ? stringToNumber(series.explodeOffset, this.radius) : 0;
@@ -47,2 +72,11 @@ this.findCenter(chart, series);
     };
+    /*
+     * To get label radius of the pie.
+     * @private
+     */
+    PieBase.prototype.getLabelRadius = function (series, point) {
+        return series.dataLabel.position === 'Inside' ?
+            ((((stringToNumber(point.sliceRadius, this.radius) - this.innerRadius)) / 2) + this.innerRadius) :
+            (stringToNumber(point.sliceRadius, this.seriesRadius) + stringToNumber(series.dataLabel.connectorStyle.length || '4%', this.size / 2));
+    };
     /**
@@ -55,4 +89,4 @@ * To find the center of the accumulation.
         this.center = {
-            x: stringToNumber('50%', accumulation.initialClipRect.width) + (accumulation.initialClipRect.x),
-            y: stringToNumber('50%', accumulation.initialClipRect.height) + (accumulation.initialClipRect.y)
+            x: stringToNumber(accumulation.center.x, accumulation.initialClipRect.width) + (accumulation.initialClipRect.x),
+            y: stringToNumber(accumulation.center.y, accumulation.initialClipRect.height) + (accumulation.initialClipRect.y)
         };
@@ -63,3 +97,3 @@ var accumulationRect = this.getSeriesBound(series);
         this.center.y += (this.center.y - accumulationRectCenter.y);
-        this.accumulation.center = this.center;
+        this.accumulation.origin = this.center;
     };
@@ -66,0 +100,0 @@ /**

src/accumulation-chart/renderer/pie-series.js

@@ -14,3 +14,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-import { PathOption, degreeToLocation, getElement, linear } from '../../common/utils/helper';
+import { PathOption, degreeToLocation, getElement, linear, stringToNumber } from '../../common/utils/helper';
 import { PieBase } from '../renderer/pie-base';
@@ -35,2 +35,3 @@ import { Animation, createElement } from '@syncfusion/ej2-base';
         var start = Math.PI / 180 * ((90 - (360 - this.startAngle)) - 90);
+        this.radius = this.isRadiusMapped ? stringToNumber(point.sliceRadius, this.seriesRadius) : this.radius;
         option.d = this.getPathOption(point, degree, this.startAngle % 360, yValue);
@@ -82,3 +83,4 @@ point.midAngle = (this.startAngle - (degree / 2)) % 360;
         }
-        var path = this.getPathArc(this.center, startAngle % 360, (startAngle + degree) % 360, this.radius, this.innerRadius);
+        var path = this.getPathArc(this.center, startAngle % 360, (startAngle + degree) % 360, this.isRadiusMapped ? stringToNumber(point.sliceRadius, this.seriesRadius) : this.radius, this.innerRadius);
+        //let path: string = this.getPathArc(this.center, startAngle % 360, (startAngle + degree) % 360, this.radius, this.innerRadius);
         this.startAngle += degree;
@@ -85,0 +87,0 @@ return path;

src/accumulation-chart/user-interaction/tooltip.js

@@ -77,4 +77,4 @@ var __extends = (this && this.__extends) || (function () {
             if (this.pushData(data, isFirst, tooltipDiv, false)) {
-                if (this.triggerEvent(data, isFirst, this.getTooltipText(data, chart.tooltip), this.findHeader(data))) {
-                    this.createTooltip(chart, isFirst, data.point.symbolLocation, data.series.clipRect, data.point, ['Circle'], 0, rect, null, data.point);
+                if (this.triggerEvent(data, isFirst, this.getTooltipText(data, chart.tooltip))) {
+                    this.createTooltip(chart, isFirst, this.findHeader(data), data.point.symbolLocation, data.series.clipRect, data.point, ['Circle'], 0, rect, null, data.point);
                 }
@@ -81,0 +81,0 @@ else {

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

@@ -1,2 +0,2 @@
-import { Property, Complex, ChildProperty, Collection, extend } from '@syncfusion/ej2-base';import { FontModel, BorderModel } from '../../common/model/base-model';import { Font, Border } from '../../common/model/base';import { Orientation, ChartRangePadding, SkeletonType, AxisPosition } from '../utils/enum';import { EdgeLabelPlacement, ValueType, IntervalType, LabelPlacement, LabelIntersectAction } from '../utils/enum';import { Size, Rect, measureText, rotateTextSize, firstToLowerCase, valueToCoefficient, inside } from '../../common/utils/helper';import { DoubleRange } from '../utils/double-range';import { Chart } from '../chart';import { Series } from '../series/chart-series';import { Double } from '../axis/double-axis';import { DateTime } from '../axis/date-time-axis';import { Category } from '../axis/category-axis';import { DateTimeCategory } from '../axis/date-time-category-axis';import { Theme } from '../../common/model/theme';import { IAxisRangeCalculatedEventArgs } from '../../common/model/interface';import { axisRangeCalculated } from '../../common/model/constants';import { StripLineSettings, MultiLevelLabels, LabelBorder } from '../model/chart-base';import { StripLineSettingsModel, MultiLevelLabelsModel, LabelBorderModel } from '../model/chart-base-model';import { textWrap } from '../../common/utils/helper';import { ScrollBar } from '../../common/scrollbar/scrollbar';
+import { Property, Complex, ChildProperty, Collection, extend } from '@syncfusion/ej2-base';import { FontModel, BorderModel } from '../../common/model/base-model';import { Font, Border } from '../../common/model/base';import { Orientation, ChartRangePadding, SkeletonType, AxisPosition } from '../utils/enum';import { EdgeLabelPlacement, ValueType, IntervalType, LabelPlacement, LabelIntersectAction } from '../utils/enum';import { Size, Rect, measureText, rotateTextSize, firstToLowerCase, valueToCoefficient, inside } from '../../common/utils/helper';import { DoubleRange } from '../utils/double-range';import { Chart } from '../chart';import { Series } from '../series/chart-series';import { Double } from '../axis/double-axis';import { DateTime } from '../axis/date-time-axis';import { Category } from '../axis/category-axis';import { DateTimeCategory } from '../axis/date-time-category-axis';import { Theme } from '../../common/model/theme';import { IAxisRangeCalculatedEventArgs } from '../../common/model/interface';import { axisRangeCalculated } from '../../common/model/constants';import { StripLineSettings, MultiLevelLabels, LabelBorder, ScrollbarSettings } from '../model/chart-base';import { StripLineSettingsModel, MultiLevelLabelsModel, LabelBorderModel, ScrollbarSettingsModel  } from '../model/chart-base-model';import { textWrap } from '../../common/utils/helper';import { ScrollBar } from '../../common/scrollbar/scrollbar';
 
@@ -287,3 +287,3 @@ /**
      * when the chart area is divided into multiple plot areas by using `columns`.
-     * ```html 
+     * ```html
      * <div id='Chart'></div>
@@ -300,3 +300,3 @@ * ```
      *     }],
-     * ... 
+     * ...
      * });
@@ -312,3 +312,3 @@ * chart.appendTo('#Chart');
      * Specifies the index of the row where the axis is associated, when the chart area is divided into multiple plot areas by using `rows`.
-     * ```html 
+     * ```html
      * <div id='Chart'></div>
@@ -628,2 +628,7 @@ * ```
 
+    /**
+     * Option to customize scrollbar with lazy loading
+     */
+    scrollbarSettings?: ScrollbarSettingsModel;
+
 }
@@ -630,0 +635,0 @@

src/chart/axis/axis.d.ts

@@ -15,3 +15,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 import { DateTimeCategory } from '../axis/date-time-category-axis';
-import { StripLineSettingsModel, MultiLevelLabelsModel, LabelBorderModel } from '../model/chart-base-model';
+import { StripLineSettingsModel, MultiLevelLabelsModel, LabelBorderModel, ScrollbarSettingsModel } from '../model/chart-base-model';
 import { ScrollBar } from '../../common/scrollbar/scrollbar';
@@ -518,2 +518,6 @@ /**
     border: LabelBorderModel;
+    /**
+     * Option to customize scrollbar with lazy loading
+     */
+    scrollbarSettings: ScrollbarSettingsModel;
     /** @private */
@@ -572,2 +576,4 @@ visibleRange: VisibleRangeModel;
     isChart: boolean;
+    /** @private */
+    maxPointLength: number;
     constructor(parent: any, propName: string, defaultValue: Object, isArray?: boolean);
@@ -574,0 +580,0 @@ /**

src/chart/axis/axis.js

@@ -27,3 +27,3 @@ var __extends = (this && this.__extends) || (function () {
 import { axisRangeCalculated } from '../../common/model/constants';
-import { StripLineSettings, MultiLevelLabels, LabelBorder } from '../model/chart-base';
+import { StripLineSettings, MultiLevelLabels, LabelBorder, ScrollbarSettings } from '../model/chart-base';
 import { textWrap } from '../../common/utils/helper';
@@ -388,4 +388,10 @@ var axisPadding = 10;
             var end = void 0;
-            start = this.actualRange.min + this.zoomPosition * this.actualRange.delta;
-            end = start + this.zoomFactor * this.actualRange.delta;
+            if (!this.isInversed) {
+                start = this.actualRange.min + this.zoomPosition * this.actualRange.delta;
+                end = start + this.zoomFactor * this.actualRange.delta;
+            }
+            else {
+                start = this.actualRange.max - (this.zoomPosition * this.actualRange.delta);
+                end = start - (this.zoomFactor * this.actualRange.delta);
+            }
             if (start < baseRange.min) {
@@ -437,3 +443,3 @@ end = end + (baseRange.min - start);
                 if (chart.requireInvertedAxis) {
-                    padding = (this.isStack100 ? 'Round' : 'Normal');
+                    padding = (this.isStack100 || this.baseModule.chart.stockChart ? 'Round' : 'Normal');
                 }
@@ -446,3 +452,3 @@ else {
                 if (!chart.requireInvertedAxis) {
-                    padding = (this.isStack100 ? 'Round' : 'Normal');
+                    padding = (this.isStack100 || this.baseModule.chart.stockChart ? 'Round' : 'Normal');
                 }
@@ -723,2 +729,5 @@ else {
     ], Axis.prototype, "border", void 0);
+    __decorate([
+        Complex({}, ScrollbarSettings)
+    ], Axis.prototype, "scrollbarSettings", void 0);
     return Axis;
@@ -725,0 +734,0 @@ }(ChildProperty));

src/chart/axis/cartesian-panel.d.ts

@@ -61,3 +61,3 @@ import { Chart } from '../chart';
      * Measure the row size.
-     * @return {void}
+     * @param rect
      */
@@ -72,3 +72,3 @@ private calculateColumnSize;
     /**
-     * To render scrollbar
+     * To render the axis scrollbar
      * @param chart
@@ -78,10 +78,45 @@ * @param axis
     private renderScrollbar;
+    /**
+     * To find the axis position
+     * @param axis
+     */
     private findAxisPosition;
+    /**
+     * To render the bootom line of the columns and rows
+     * @param definition
+     * @param index
+     * @param isRow
+     */
     private drawBottomLine;
+    /**
+     * To render the axis line
+     * @param axis
+     * @param index
+     * @param plotX
+     * @param plotY
+     * @param parent
+     * @param rect
+     */
     private drawAxisLine;
+    /**
+     * To render the yAxis grid line
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
+     */
     private drawYAxisGridLine;
+    /**
+     * To check the border of the axis
+     * @param axis
+     * @param index
+     * @param value
+     */
     private isBorder;
     /**
-     * To render the axis label.
-     * @return {void}
+     * To render the yAxis label
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
      * @private
@@ -91,14 +126,48 @@ */
     /**
-     * To render the axis label border.
-     * @return {void}
-     * @private
+     * To render the yAxis label border.
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
      */
     private drawYAxisBorder;
+    /**
+     * To render the yAxis title
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
+     */
     private drawYAxisTitle;
+    /**
+     * xAxis grid line calculation performed here
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
+     */
     private drawXAxisGridLine;
+    /**
+     * To calcualte the axis minor line
+     * @param axis
+     * @param tempInterval
+     * @param rect
+     * @param labelIndex
+     */
     private drawAxisMinorLine;
+    /**
+     * To find the numeric value of the log
+     * @param axis
+     * @param logPosition
+     * @param logInterval
+     * @param value
+     * @param labelIndex
+     */
     private findLogNumeric;
     /**
-     * To render the axis label.
-     * @return {void}
+     * To render the xAxis Labels
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
      * @private
@@ -108,19 +177,62 @@ */
     /**
-     * To render the axis label border.
-     * @return {void}
-     * @private
+     * To render the x-axis label border.
+     * @param axis
+     * @param index
+     * @param parent
+     * @param axisRect
      */
     private drawXAxisBorder;
     /**
-     * To create border element for axis.
-     * @return {void}
-     * @private
+     * To create border element of the axis
+     * @param axis
+     * @param index
+     * @param labelBorder
+     * @param parent
      */
     private createAxisBorderElement;
+    /**
+     * To find the axis label of the intersect action
+     * @param axis
+     * @param label
+     * @param width
+     */
     private findAxisLabel;
+    /**
+     * X-Axis Title function performed
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
+     */
     private drawXAxisTitle;
-    private renderTickLine;
+    /**
+     * To render the axis grid and tick lines(Both Major and Minor)
+     * @param axis
+     * @param index
+     * @param gridDirection
+     * @param gridModel
+     * @param gridId
+     * @param gridIndex
+     * @param parent
+     * @param themeColor
+     * @param dashArray
+     */
     private renderGridLine;
+    /**
+     * To Find the parent node of the axis
+     * @param chart
+     * @param label
+     * @param axis
+     * @param index
+     */
     private findParentNode;
+    /**
+     * Create Zooming Labels Function Called here
+     * @param chart
+     * @param labelElement
+     * @param axis
+     * @param index
+     * @param rect
+     */
     private createZoomingLabel;
 }

src/chart/axis/cartesian-panel.js

@@ -97,8 +97,9 @@ import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
         var axisType;
+        var ele = 16; // scrollbar element height is 16.
         for (var _i = 0, _a = definition.axes; _i < _a.length; _i++) {
             var axis_1 = _a[_i];
             axis_1.scrollBarHeight = chart.scrollBarModule && chart.zoomSettings.enableScrollbar && chart.zoomModule.isZoomed
-                && (axis_1.zoomFactor < 1 || axis_1.zoomPosition > 0) ? 16 : 0;
-            axis_1.scrollBarHeight = chart.delayRedraw ? (axis_1.zoomingScrollBar && axis_1.zoomingScrollBar.svgObject &&
-                axis_1.zoomingScrollBar.svgObject.childElementCount) ? 16 : 0 : axis_1.scrollBarHeight;
+                && (axis_1.zoomFactor < 1 || axis_1.zoomPosition > 0) ? ele : 0;
+            axis_1.scrollBarHeight = chart.scrollBarModule && (chart.zoomModule && chart.zoomSettings.enableScrollbar &&
+                chart.zoomModule.isZoomed && (axis_1.zoomFactor < 1 || axis_1.zoomPosition > 0) || axis_1.scrollbarSettings.enable) ? ele : 0;
             axis_1.getModule(chart);
@@ -338,3 +339,3 @@ axis_1.baseModule.calculateRangeAndInterval(size, axis_1);
      * Measure the row size.
-     * @return {void}
+     * @param rect
      */
@@ -412,3 +413,3 @@ CartesianAxisLayoutPanel.prototype.calculateColumnSize = function (rect) {
             }
-            if (chart.scrollBarModule && chart.zoomSettings.enableScrollbar) {
+            if (chart.scrollBarModule && (chart.zoomSettings.enableScrollbar || axis.scrollbarSettings.enable)) {
                 this.renderScrollbar(chart, axis);
@@ -435,3 +436,3 @@ }
     /**
-     * To render scrollbar
+     * To render the axis scrollbar
      * @param chart
@@ -441,9 +442,11 @@ * @param axis
     CartesianAxisLayoutPanel.prototype.renderScrollbar = function (chart, axis) {
-        if (chart.zoomModule.isZoomed && (axis.zoomFactor < 1 || axis.zoomPosition > 0) && !axis.zoomingScrollBar.isScrollUI) {
+        var isZoomed = isNullOrUndefined(chart.zoomModule) ? false : chart.zoomModule.isZoomed;
+        if (((isZoomed && (axis.zoomFactor < 1 || axis.zoomPosition > 0)) || (axis.scrollbarSettings.enable &&
+            (axis.zoomFactor <= 1 || axis.zoomPosition >= 0))) && !axis.zoomingScrollBar.isScrollUI) {
             if (!chart.scrollElement) {
                 chart.scrollElement = redrawElement(chart.redraw, chart.element.id + '_scrollElement') || createElement('div', { id: chart.element.id + '_scrollElement' });
             }
-            appendChildElement(chart.scrollElement, axis.zoomingScrollBar.render(), true);
+            appendChildElement(chart.scrollElement, axis.zoomingScrollBar.render(true), true);
         }
-        else if (axis.zoomFactor === 1 && axis.zoomPosition === 0 && axis.zoomingScrollBar.svgObject) {
+        else if (axis.zoomFactor === 1 && axis.zoomPosition === 0 && axis.zoomingScrollBar.svgObject && !axis.scrollbarSettings.enable) {
             axis.zoomingScrollBar.destroy();
@@ -455,5 +458,15 @@ }
     };
+    /**
+     * To find the axis position
+     * @param axis
+     */
     CartesianAxisLayoutPanel.prototype.findAxisPosition = function (axis) {
         return axis.crossAt !== null && axis.isInside(axis.crossInAxis.visibleRange);
     };
+    /**
+     * To render the bootom line of the columns and rows
+     * @param definition
+     * @param index
+     * @param isRow
+     */
     CartesianAxisLayoutPanel.prototype.drawBottomLine = function (definition, index, isRow) {
@@ -493,11 +506,20 @@ var chart = this.chart;
     };
+    /**
+     * To render the axis line
+     * @param axis
+     * @param index
+     * @param plotX
+     * @param plotY
+     * @param parent
+     * @param rect
+     */
     CartesianAxisLayoutPanel.prototype.drawAxisLine = function (axis, index, plotX, plotY, parent, rect) {
         var chart = this.chart;
         var optionsLine = {};
+        var element = getElement(chart.element.id + 'AxisLine_' + index);
+        var direction = element ? element.getAttribute('d') : '';
         optionsLine = {
             'id': chart.element.id + 'AxisLine_' + index,
-            x1: rect.x - plotX,
-            y1: rect.y - plotY,
-            x2: rect.x + rect.width + plotX,
-            y2: rect.y + rect.height + plotY,
+            'd': 'M ' + (rect.x - plotX) + ' ' + (rect.y - plotY) +
+                ' L ' + (rect.x + rect.width + plotX) + ' ' + (rect.y + rect.height + plotY),
             'stroke-dasharray': axis.lineStyle.dashArray,
@@ -507,7 +529,13 @@ 'stroke-width': axis.lineStyle.width,
         };
-        this.htmlObject = chart.renderer.drawLine(optionsLine);
-        parent.appendChild(this.htmlObject);
+        this.htmlObject = chart.renderer.drawPath(optionsLine);
+        appendChildElement(parent, this.htmlObject, chart.redraw, true, 'x', 'y', null, direction);
     };
+    /**
+     * To render the yAxis grid line
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
+     */
     CartesianAxisLayoutPanel.prototype.drawYAxisGridLine = function (axis, index, parent, rect) {
-        var chart = this.chart;
         var tempInterval;
@@ -517,5 +545,3 @@ var pointY = 0;
         var majorTick = '';
-        var minorGird = '';
-        var minorTick = '';
-        var minorDirection;
+        var minorGridDirection;
         var tickSize = axis.opposedPosition ? axis.majorTickLines.height : -axis.majorTickLines.height;
@@ -530,5 +556,8 @@ var axisLineSize = (axis.opposedPosition) ? axis.lineStyle.width / 2 : -axis.lineStyle.width / 2;
         var length = axis.visibleLabels.length;
+        var chart = this.chart;
         if (axis.valueType.indexOf('Category') && axis.labelPlacement === 'BetweenTicks' && length > 0) {
             length += 1;
         }
+        var minorGridLines = axis.minorGridLines;
+        var minorTickLines = axis.minorTickLines;
         //Gridlines
@@ -542,17 +571,23 @@ for (var i = 0; i < length; i++) {
                 if ((inside(tempInterval, axis.visibleRange)) || this.isBorder(axis, i, pointY)) {
-                    majorGrid = majorGrid.concat('M ' + this.seriesClipRect.x + ' ' + (pointY) +
-                        ' L ' + (this.seriesClipRect.x + this.seriesClipRect.width) + ' ' + pointY + ' ');
+                    majorGrid = 'M ' + this.seriesClipRect.x + ' ' + (pointY) +
+                        ' L ' + (this.seriesClipRect.x + this.seriesClipRect.width) + ' ' + pointY;
+                    this.renderGridLine(axis, index, majorGrid, axis.majorGridLines, '_MajorGridLine_', i, this.element, chart.themeStyle.majorGridLine, axis.majorGridLines.dashArray);
                 }
-                majorTick = majorTick.concat('M ' + (rect.x + axisLineSize + (isTickInside ? scrollBarHeight : 0)) + ' ' + pointY +
-                    ' L ' + (ticks) + ' ' + pointY + ' ');
+                majorTick = 'M ' + (rect.x + axisLineSize + (isTickInside ? scrollBarHeight : 0)) + ' ' + pointY +
+                    ' L ' + (ticks) + ' ' + pointY;
+                this.renderGridLine(axis, index, majorTick, axis.majorTickLines, '_MajorTickLine_', i, parent, chart.themeStyle.majorTickLine);
+                if ((minorGridLines.width > 0 || minorTickLines.width > 0) && axis.minorTicksPerInterval > 0) {
+                    minorGridDirection = this.drawAxisMinorLine(axis, tempInterval, rect, i);
+                    this.renderGridLine(axis, index, minorGridDirection[0], minorGridLines, '_MinorGridLine_', i, this.element, chart.themeStyle.minorGridLine, minorGridLines.dashArray);
+                    this.renderGridLine(axis, index, minorGridDirection[1], minorTickLines, '_MinorTickLine_', i, parent, chart.themeStyle.minorTickLine);
+                }
             }
-            if ((axis.minorGridLines.width > 0 || axis.minorTickLines.width > 0) && axis.minorTicksPerInterval > 0) {
-                minorDirection = this.drawAxisMinorLine(axis, tempInterval, minorGird, minorTick, rect, i);
-                minorGird = minorDirection[0];
-                minorTick = minorDirection[1];
-            }
         }
-        this.renderGridLine(axis, index, majorGrid, minorGird);
-        this.renderTickLine(axis, index, majorTick, minorTick, parent);
     };
+    /**
+     * To check the border of the axis
+     * @param axis
+     * @param index
+     * @param value
+     */
     CartesianAxisLayoutPanel.prototype.isBorder = function (axis, index, value) {
@@ -579,4 +614,7 @@ var chart = this.chart;
     /**
-     * To render the axis label.
-     * @return {void}
+     * To render the yAxis label
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
      * @private
@@ -591,3 +629,2 @@ */
         var isLabelInside = axis.labelPosition === 'Inside';
-        var isTickInside = axis.tickPosition === 'Inside';
         var isOpposed = axis.opposedPosition;
@@ -603,3 +640,3 @@ var tickSpace = axis.labelPosition === axis.tickPosition ? axis.majorTickLines.height : 0;
             elementSize = axis.visibleLabels[i].size;
-            pointY = valueToCoefficient(axis.visibleLabels[i].value, axis) * rect.height;
+            pointY = (valueToCoefficient(axis.visibleLabels[i].value, axis) * rect.height) + (chart.stockChart ? 5 : 0);
             pointY = Math.floor((pointY * -1) + (rect.y + rect.height));
@@ -627,6 +664,6 @@ options = new TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY + (elementSize.height / 4), anchor, axis.visibleLabels[i].text);
             }
-            textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement, false, false).setAttribute('text-content', options.text);
+            textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement, false, chart.redraw, true, true).setAttribute('text-content', options.text);
         }
         if (!chart.delayRedraw) {
-            parent.appendChild(labelElement);
+            appendChildElement(parent, labelElement, chart.redraw);
         }
@@ -638,5 +675,7 @@ else if (axis.visible) {
     /**
-     * To render the axis label border.
-     * @return {void}
-     * @private
+     * To render the yAxis label border.
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
      */
@@ -707,2 +746,9 @@ CartesianAxisLayoutPanel.prototype.drawYAxisBorder = function (axis, index, parent, rect) {
     };
+    /**
+     * To render the yAxis title
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
+     */
     CartesianAxisLayoutPanel.prototype.drawYAxisTitle = function (axis, index, parent, rect) {
@@ -723,4 +769,10 @@ var chart = this.chart;
     };
+    /**
+     * xAxis grid line calculation performed here
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
+     */
     CartesianAxisLayoutPanel.prototype.drawXAxisGridLine = function (axis, index, parent, rect) {
-        var chart = this.chart;
         var tempInterval;
@@ -730,4 +782,2 @@ var pointX = 0;
         var majorTick = '';
-        var minorGird = '';
-        var minorTick = '';
         var minorDirection;
@@ -743,2 +793,3 @@ var tickSize = (axis.opposedPosition) ? -axis.majorTickLines.height : axis.majorTickLines.height;
         var ticks = isTickInside ? (rect.y - tickSize - axisLineSize) : (rect.y + tickSize + axisLineSize + scrollBarHeight);
+        var chart = this.chart;
         if (axis.valueType.indexOf('Category') > -1 && length > 0 && axis.labelPlacement === 'BetweenTicks') {
@@ -760,18 +811,25 @@ length += 1;
                 if (inside(tempInterval, axis.visibleRange) || this.isBorder(axis, i, pointX)) {
-                    majorGrid = majorGrid.concat('M ' + pointX + ' ' + (this.seriesClipRect.y + this.seriesClipRect.height) +
-                        ' L ' + pointX + ' ' + this.seriesClipRect.y + ' ');
+                    majorGrid = 'M ' + pointX + ' ' + (this.seriesClipRect.y + this.seriesClipRect.height) +
+                        ' L ' + pointX + ' ' + this.seriesClipRect.y;
+                    this.renderGridLine(axis, index, majorGrid, axis.majorGridLines, '_MajorGridLine_', i, this.element, chart.themeStyle.majorGridLine, axis.majorGridLines.dashArray);
                 }
-                majorTick = majorTick.concat('M ' + (pointX) + ' ' + (rect.y + axisLineSize + (isTickInside ? scrollBarHeight : 0))
-                    + ' L ' + (pointX) + ' ' + ticks + ' ');
+                majorTick = 'M ' + (pointX) + ' ' + (rect.y + axisLineSize + (isTickInside ? scrollBarHeight : 0))
+                    + ' L ' + (pointX) + ' ' + ticks;
+                this.renderGridLine(axis, index, majorTick, axis.majorTickLines, '_MajorTickLine_', i, parent, chart.themeStyle.majorTickLine);
+                if (axis.minorTicksPerInterval > 0 && (axis.minorGridLines.width > 0 || axis.minorTickLines.width > 0)) {
+                    minorDirection = this.drawAxisMinorLine(axis, tempInterval, rect, i);
+                    this.renderGridLine(axis, index, minorDirection[0], axis.minorGridLines, '_MinorGridLine_', i, this.element, chart.themeStyle.minorGridLine, axis.minorGridLines.dashArray);
+                    this.renderGridLine(axis, index, minorDirection[1], axis.minorTickLines, '_MinorTickLine_', i, parent, chart.themeStyle.minorTickLine);
+                }
             }
-            if (axis.minorTicksPerInterval > 0 && (axis.minorGridLines.width > 0 || axis.minorTickLines.width > 0)) {
-                minorDirection = this.drawAxisMinorLine(axis, tempInterval, minorGird, minorTick, rect, i);
-                minorTick = minorDirection[1];
-                minorGird = minorDirection[0];
-            }
         }
-        this.renderGridLine(axis, index, majorGrid, minorGird);
-        this.renderTickLine(axis, index, majorTick, minorTick, parent);
     };
-    CartesianAxisLayoutPanel.prototype.drawAxisMinorLine = function (axis, tempInterval, minorGird, minorTick, rect, labelIndex) {
+    /**
+     * To calcualte the axis minor line
+     * @param axis
+     * @param tempInterval
+     * @param rect
+     * @param labelIndex
+     */
+    CartesianAxisLayoutPanel.prototype.drawAxisMinorLine = function (axis, tempInterval, rect, labelIndex) {
         var value = tempInterval;
@@ -790,2 +848,4 @@ var coor = 0;
         var ticksY = isTickInside ? (rect.x + tickSize) : (rect.x - tickSize);
+        var minorGird = '';
+        var minorTick = '';
         if (axis.valueType === 'Logarithmic') {
@@ -808,4 +868,5 @@ logStart = Math.pow(axis.logBase, value - range.interval);
                     coor = (Math.floor(position + rect.x));
+                    var scrollBarHeight = 16;
                     minorTick = minorTick.concat('M' + ' ' + coor + ' ' + (rect.y)
-                        + 'L ' + coor + ' ' + ticksX);
+                        + 'L ' + coor + ' ' + (ticksX + scrollBarHeight));
                 }
@@ -822,5 +883,5 @@ }
                     minorGird = minorGird.concat('M' + ' ' + (this.seriesClipRect.x) + ' ' + coor
-                        + 'L ' + (this.seriesClipRect.x + this.seriesClipRect.width) + ' ' + coor);
+                        + 'L ' + (this.seriesClipRect.x + this.seriesClipRect.width) + ' ' + coor + ' ');
                     coor = (Math.floor(position + rect.y + rect.height));
-                    minorTick = minorTick.concat('M' + ' ' + rect.x + ' ' + coor + 'L ' + ticksY + ' ' + coor);
+                    minorTick = minorTick.concat('M' + ' ' + rect.x + ' ' + coor + 'L ' + ticksY + ' ' + coor + ' ');
                 }
@@ -834,2 +895,10 @@ logPosition += logInterval;
     };
+    /**
+     * To find the numeric value of the log
+     * @param axis
+     * @param logPosition
+     * @param logInterval
+     * @param value
+     * @param labelIndex
+     */
     CartesianAxisLayoutPanel.prototype.findLogNumeric = function (axis, logPosition, logInterval, value, labelIndex) {
@@ -857,4 +926,7 @@ var range = axis.visibleRange;
     /**
-     * To render the axis label.
-     * @return {void}
+     * To render the xAxis Labels
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
      * @private
@@ -868,5 +940,3 @@ */
         var labelElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisLabels' + index });
-        var labelPosition = axis.labelPosition;
         var islabelInside = axis.labelPosition === 'Inside';
-        var isTickInside = axis.tickPosition === 'Inside';
         var isOpposed = axis.opposedPosition;
@@ -887,4 +957,4 @@ var tickSpace = axis.labelPosition === axis.tickPosition ? axis.majorTickLines.height : 0;
         var label;
-        var scrollBarHeight = !islabelInside && isNullOrUndefined(axis.crossesAt) && (axis.zoomFactor < 1 || axis.zoomPosition > 0)
-            ? axis.scrollBarHeight : 0;
+        var scrollBarHeight = axis.scrollbarSettings.enable || (!islabelInside && isNullOrUndefined(axis.crossesAt)
+            && (axis.zoomFactor < 1 || axis.zoomPosition > 0)) ? axis.scrollBarHeight : 0;
         for (var i = 0, len = length; i < len; i++) {
@@ -951,3 +1021,3 @@ label = axis.visibleLabels[i];
             }
-            textElement(options, label.labelStyle, label.labelStyle.color || chart.themeStyle.axisLabel, labelElement, (axis.opposedPosition !== (axis.labelPosition === 'Inside'))).setAttribute('style', 'cursor: default');
+            textElement(options, label.labelStyle, label.labelStyle.color || chart.themeStyle.axisLabel, labelElement, (axis.opposedPosition !== (axis.labelPosition === 'Inside')), chart.redraw, true).setAttribute('style', 'cursor: default');
         }
@@ -962,5 +1032,7 @@ if (!chart.delayRedraw) {
     /**
-     * To render the axis label border.
-     * @return {void}
-     * @private
+     * To render the x-axis label border.
+     * @param axis
+     * @param index
+     * @param parent
+     * @param axisRect
      */
@@ -1033,11 +1105,21 @@ CartesianAxisLayoutPanel.prototype.drawXAxisBorder = function (axis, index, parent, axisRect) {
     /**
-     * To create border element for axis.
-     * @return {void}
-     * @private
+     * To create border element of the axis
+     * @param axis
+     * @param index
+     * @param labelBorder
+     * @param parent
      */
     CartesianAxisLayoutPanel.prototype.createAxisBorderElement = function (axis, index, labelBorder, parent) {
+        var element = getElement(this.chart.element.id + '_BorderLine_' + index);
+        var direction = element ? element.getAttribute('d') : '';
         var borderElement = this.chart.renderer.drawPath(new PathOption(this.chart.element.id + '_BorderLine_' + index, 'transparent', axis.border.width, axis.border.color || this.chart.themeStyle.axisLine, 1, '', labelBorder));
         borderElement.setAttribute('style', 'pointer-events: none');
-        parent.appendChild(borderElement);
+        appendChildElement(parent, borderElement, this.chart.redraw, true, 'x', 'y', null, direction, true);
     };
+    /**
+     * To find the axis label of the intersect action
+     * @param axis
+     * @param label
+     * @param width
+     */
     CartesianAxisLayoutPanel.prototype.findAxisLabel = function (axis, label, width) {
@@ -1051,2 +1133,9 @@ switch (axis.labelIntersectAction) {
     };
+    /**
+     * X-Axis Title function performed
+     * @param axis
+     * @param index
+     * @param parent
+     * @param rect
+     */
     CartesianAxisLayoutPanel.prototype.drawXAxisTitle = function (axis, index, parent, rect) {
@@ -1066,30 +1155,34 @@ var chart = this.chart;
     };
-    CartesianAxisLayoutPanel.prototype.renderTickLine = function (axis, index, majorTick, minorTick, parent) {
+    /**
+     * To render the axis grid and tick lines(Both Major and Minor)
+     * @param axis
+     * @param index
+     * @param gridDirection
+     * @param gridModel
+     * @param gridId
+     * @param gridIndex
+     * @param parent
+     * @param themeColor
+     * @param dashArray
+     */
+    CartesianAxisLayoutPanel.prototype.renderGridLine = function (axis, index, gridDirection, gridModel, gridId, gridIndex, parent, themeColor, dashArray) {
+        if (dashArray === void 0) { dashArray = null; }
         var options;
         var chart = this.chart;
-        if (axis.majorTickLines.width > 0 && axis.visible) {
-            options = new PathOption(chart.element.id + '_MajorTickLine_' + index, 'transparent', axis.majorTickLines.width, axis.majorTickLines.color || chart.themeStyle.majorTickLine, null, null, majorTick);
-            this.htmlObject = chart.renderer.drawPath(options);
-            parent.appendChild(this.htmlObject);
+        var direction;
+        var element;
+        if (gridModel.width > 0 && axis.visible && gridDirection) {
+            element = getElement(chart.element.id + gridId + index + '_' + gridIndex);
+            direction = element ? element.getAttribute('d') : null;
+            this.htmlObject = chart.renderer.drawPath(new PathOption(chart.element.id + gridId + index + '_' + gridIndex, 'transparent', gridModel.width, gridModel.color || themeColor, null, dashArray, gridDirection));
+            appendChildElement(parent, this.htmlObject, chart.redraw, true, 'x', 'y', null, direction, true);
         }
-        if (axis.minorTickLines.width > 0 && axis.visible) {
-            options = new PathOption(chart.element.id + '_MinorTickLine_' + index, 'transparent', axis.minorTickLines.width, axis.minorTickLines.color || chart.themeStyle.minorTickLine, null, null, minorTick);
-            this.htmlObject = chart.renderer.drawPath(options);
-            parent.appendChild(this.htmlObject);
-        }
     };
-    CartesianAxisLayoutPanel.prototype.renderGridLine = function (axis, index, majorGrid, minorGird) {
-        var chart = this.chart;
-        var options;
-        if (axis.majorGridLines.width > 0) {
-            options = new PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, axis.majorGridLines.dashArray, majorGrid);
-            this.htmlObject = chart.renderer.drawPath(options);
-            this.element.appendChild(this.htmlObject);
-        }
-        if (axis.minorGridLines.width > 0) {
-            options = new PathOption(chart.element.id + '_MinorGridLine_' + index, 'transparent', axis.minorGridLines.width, axis.minorGridLines.color || chart.themeStyle.minorGridLine, null, axis.minorGridLines.dashArray, minorGird);
-            this.htmlObject = chart.renderer.drawPath(options);
-            this.element.appendChild(this.htmlObject);
-        }
-    };
+    /**
+     * To Find the parent node of the axis
+     * @param chart
+     * @param label
+     * @param axis
+     * @param index
+     */
     CartesianAxisLayoutPanel.prototype.findParentNode = function (chart, label, axis, index) {
@@ -1106,2 +1199,10 @@ if (axis.crossAt === null) {
     };
+    /**
+     * Create Zooming Labels Function Called here
+     * @param chart
+     * @param labelElement
+     * @param axis
+     * @param index
+     * @param rect
+     */
     CartesianAxisLayoutPanel.prototype.createZoomingLabel = function (chart, labelElement, axis, index, rect) {
@@ -1108,0 +1209,0 @@ var parentNode = this.findParentNode(chart, labelElement, axis, index);

src/chart/axis/date-time-axis.js

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {
 import { NiceInterval } from '../axis/axis-helper';
-import { extend, getValue } from '@syncfusion/ej2-base';
+import { extend, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
@@ -209,3 +209,4 @@ * `DateTime` module is used to render datetime axis.
         };
-        if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {
+        var isLazyLoad = isNullOrUndefined(axis.zoomingScrollBar) ? false : axis.zoomingScrollBar.isLazyLoad;
+        if ((axis.zoomFactor < 1 || axis.zoomPosition > 0) && !isLazyLoad) {
             axis.calculateVisibleRange(size);
@@ -212,0 +213,0 @@ axis.visibleRange.interval = (axis.enableAutoIntervalOnZooming) ?

src/chart/axis/double-axis.js

@@ -99,2 +99,3 @@ import { getMinPointsDelta, getActualDesiredIntervalsCount, setRange, triggerLabelRender } from '../../common/utils/helper';
                 this.paddingInterval = 0;
+                axis.maxPointLength = series_1.points.length;
                 if (((series_1.type.indexOf('Column') > -1 || series_1.type.indexOf('Histogram') > -1) && axis.orientation === 'Horizontal')
@@ -222,3 +223,4 @@ || (series_1.type.indexOf('Bar') > -1 && axis.orientation === 'Vertical')) {
         };
-        if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {
+        var isLazyLoad = isNullOrUndefined(axis.zoomingScrollBar) ? false : axis.zoomingScrollBar.isLazyLoad;
+        if ((axis.zoomFactor < 1 || axis.zoomPosition > 0) && !isLazyLoad) {
             axis.calculateVisibleRange(size);
@@ -225,0 +227,0 @@ axis.visibleRange.interval = (axis.enableAutoIntervalOnZooming && axis.valueType !== 'Category') ?

src/chart/axis/logarithmic-axis.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 import { logBase, withIn } from '../../common/utils/helper';
-import { extend, getValue } from '@syncfusion/ej2-base';
+import { extend, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
@@ -68,3 +68,4 @@ * `Logarithmic` module is used to render log axis.
         };
-        if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {
+        var isLazyLoad = isNullOrUndefined(axis.zoomingScrollBar) ? false : axis.zoomingScrollBar.isLazyLoad;
+        if ((axis.zoomFactor < 1 || axis.zoomPosition > 0) && !isLazyLoad) {
             axis.calculateVisibleRange(size);
@@ -71,0 +72,0 @@ axis.visibleRange.interval = (axis.enableAutoIntervalOnZooming) ?

src/chart/axis/multi-level-labels.js

 import { isNullOrUndefined } from '@syncfusion/ej2-base';
-import { textWrap, TextOption, PathOption } from '../../common/utils/helper';
+import { textWrap, TextOption, PathOption, appendClipElement, getElement, appendChildElement } from '../../common/utils/helper';
 import { valueToCoefficient, measureText, textTrim, textElement } from '../../common/utils/helper';
@@ -98,4 +98,4 @@ import { axisMultiLabelRender } from '../../common/model/constants';
         var opposedPosition = axis.opposedPosition;
-        var scrollBarHeight = isOutside && isNullOrUndefined(axis.crossesAt) ? axis.scrollBarHeight : 0;
-        scrollBarHeight = scrollBarHeight * (opposedPosition ? -1 : 1);
+        var scrollBarHeight = axis.scrollbarSettings.enable || (isOutside && isNullOrUndefined(axis.crossesAt)) ?
+            axis.scrollBarHeight : 0;
         clipY = ((opposedPosition && !isOutside) || (!opposedPosition && isOutside)) ?
@@ -143,3 +143,3 @@ (axisRect.y + startY - axis.majorTickLines.width) : (axisRect.y - startY - axis.multiLevelLabelHeight);
                         }
-                        textElement(options, argsData.textStyle, argsData.textStyle.color || _this.chart.themeStyle.axisLabel, labelElement);
+                        textElement(options, argsData.textStyle, argsData.textStyle.color || _this.chart.themeStyle.axisLabel, labelElement, false, _this.chart.redraw, true);
                         if (multiLevel.border.width > 0 && multiLevel.border.type !== 'WithoutBorder') {
@@ -182,6 +182,6 @@ pathRect = _this.renderXAxisLabelBorder(level, endX - startX - padding, axis, startX, startY, labelSize, options, axisRect, argsData.alignment, pathRect, isOutside, opposedPosition);
                 height = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? height : -height;
-                path += 'M' + x + ' ' + y + 'L' + x + ' ' + (y + height) +
-                    'M' + (x + width) + ' ' + y + 'L' + (x + width) + ' ' + (y + height);
-                path += (groupLabel.border.type !== 'WithoutTopandBottomBorder') ? ('L' + ' ' + (x) + ' ' + (y + height) + ' ') : ' ';
-                path += groupLabel.border.type === 'Rectangle' ? ('M' + x + ' ' + y + 'L' + (x + width) + ' ' + y) : ' ';
+                path += 'M ' + x + ' ' + y + ' L ' + x + ' ' + (y + height) +
+                    ' M ' + (x + width) + ' ' + y + ' L ' + (x + width) + ' ' + (y + height);
+                path += (groupLabel.border.type !== 'WithoutTopandBottomBorder') ? (' L' + ' ' + (x) + ' ' + (y + height) + ' ') : ' ';
+                path += groupLabel.border.type === 'Rectangle' ? (' M ' + x + ' ' + y + ' L ' + (x + width) + ' ' + y) : ' ';
                 break;
@@ -202,6 +202,6 @@ case 'Brace':
                 height = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? height : -height;
-                path += 'M' + x + ' ' + y + 'L' + x + ' ' + (y + height / 2) +
-                    'M' + x + ' ' + (y + height / 2) + 'L' + (value - 2) + ' ' + (y + height / 2) +
-                    'M' + (value1) + ' ' + (y + height / 2) + 'L' + (x + width) + ' ' + (y + height / 2) +
-                    'M' + (x + width) + ' ' + (y + height / 2) + 'L' + (x + width) + ' ' + (y);
+                path += ' M ' + x + ' ' + y + ' L ' + x + ' ' + (y + height / 2) +
+                    ' M ' + x + ' ' + (y + height / 2) + ' L ' + (value - 2) + ' ' + (y + height / 2) +
+                    ' M ' + (value1) + ' ' + (y + height / 2) + ' L ' + (x + width) + ' ' + (y + height / 2) +
+                    ' M ' + (x + width) + ' ' + (y + height / 2) + ' L ' + (x + width) + ' ' + (y);
                 break;
@@ -220,10 +220,10 @@ case 'CurlyBrace':
                 if (alignment === 'Center') {
-                    path += 'M' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + 5) + ' ' + (y + padding) + ' ' + (x + 10) + ' ' +
-                        (y + padding) + 'L' + (x + width / 2 - 5) + ' ' + (y + padding) + 'L' + (x + width / 2) + ' ' + (y + padding1) +
-                        'L' + (x + width / 2 + 5) + ' ' + (y + padding) + 'L' + (x + width - 10) + ' ' + (y + padding) + ' C ' +
+                    path += ' M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + 5) + ' ' + (y + padding) + ' ' + (x + 10) + ' ' +
+                        (y + padding) + ' L ' + (x + width / 2 - 5) + ' ' + (y + padding) + ' L ' + (x + width / 2) + ' ' + (y + padding1) +
+                        ' L ' + (x + width / 2 + 5) + ' ' + (y + padding) + ' L ' + (x + width - 10) + ' ' + (y + padding) + ' C ' +
                         (x + width - 10) + ' ' + (y + padding) + ' ' + (x + width) + ' ' + (y + padding2) + ' ' + (x + width) + ' ' + (y);
                 }
                 else if (alignment === 'Near') {
-                    path += 'M' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + 5) + ' ' + (y + padding) + ' ' + (x + 10) + ' ' +
-                        (y + padding) + 'L' + (x + 15) + ' ' + (y + padding1) + 'L' + (x + 20) + ' ' + (y + padding) + 'L' +
+                    path += ' M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + 5) + ' ' + (y + padding) + ' ' + (x + 10) + ' ' +
+                        (y + padding) + ' L ' + (x + 15) + ' ' + (y + padding1) + ' L ' + (x + 20) + ' ' + (y + padding) + ' L ' +
                         (x + width - 10) + ' ' + (y + padding) + ' C ' + (x + width - 10) + ' ' + (y + padding) + ' ' + (x + width) + ' '
@@ -233,5 +233,5 @@ + (y + padding2) + ' ' + (x + width) + ' ' + (y);
                 else {
-                    path += 'M' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + 5) + ' ' + (y + padding) + ' ' + (x + 10) + ' ' +
-                        (y + padding) + 'L' + (x + width - 20) + ' ' + (y + padding) + 'L' + (x + width - 15) + ' ' + (y + padding1) +
-                        'L' + (x + width - 10) + ' ' + (y + padding) + 'L' + (x + width - 10) + ' ' + (y + padding) + ' C '
+                    path += ' M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + 5) + ' ' + (y + padding) + ' ' + (x + 10) + ' ' +
+                        (y + padding) + ' L ' + (x + width - 20) + ' ' + (y + padding) + ' L ' + (x + width - 15) + ' ' + (y + padding1) +
+                        ' L ' + (x + width - 10) + ' ' + (y + padding) + ' L ' + (x + width - 10) + ' ' + (y + padding) + ' C '
                         + (x + width - 10) + ' ' + (y + padding) + ' ' + (x + width) + ' ' + (y + padding2) + ' ' + (x + width) + ' ' + (y);
@@ -317,3 +317,3 @@ }
                                 categoryLabel.maximumTextWidth), argsData.text, argsData.textStyle) : options.text;
-                        textElement(options, argsData.textStyle, argsData.textStyle.color || _this.chart.themeStyle.axisLabel, labelElement);
+                        textElement(options, argsData.textStyle, argsData.textStyle.color || _this.chart.themeStyle.axisLabel, labelElement, _this.chart.redraw, true);
                         if (multiLevel.border.width > 0 && multiLevel.border.type !== 'WithoutBorder') {
@@ -354,10 +354,11 @@ path = _this.renderYAxisLabelBorder(level, gap, axis, endY, startX, startY, labelSize, options, rect, argsData.alignment, path, isOutside, opposedPosition);
                 width = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? -width : width;
-                path += 'M' + x + ' ' + y + 'L' + (x + width) + ' ' + y +
-                    'M' + x + ' ' + (y + height) + 'L' + (x + width) + ' ' + (y + height);
-                path += (groupLabel.border.type !== 'WithoutTopandBottomBorder') ? ('L' + ' ' + (x + width) + ' ' + y + ' ') : ' ';
-                path += (groupLabel.border.type === 'Rectangle') ? ('M' + (x) + ' ' + (y + height) + 'L' + ' ' + (x) + ' ' + y + ' ') : ' ';
+                path += ' M ' + x + ' ' + y + ' L ' + (x + width) + ' ' + y +
+                    ' M ' + x + ' ' + (y + height) + ' L ' + (x + width) + ' ' + (y + height);
+                path += (groupLabel.border.type !== 'WithoutTopandBottomBorder') ? (' L ' + ' ' + (x + width) + ' ' + y + ' ') : ' ';
+                path += (groupLabel.border.type === 'Rectangle') ?
+                    (' M' + (x) + ' ' + (y + height) + ' L ' + ' ' + (x) + ' ' + y + ' ') : ' ';
                 break;
             case 'Brace':
                 width = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? width : -width;
-                path += 'M ' + (x) + ' ' + y + ' L ' + (x - width / 2) + ' ' + y + ' L ' + (x - width / 2) + ' ' +
+                path += ' M ' + (x) + ' ' + y + ' L ' + (x - width / 2) + ' ' + y + ' L ' + (x - width / 2) + ' ' +
                     (textOptions.y - labelSize.height / 2 - 4) + ' M ' + (x - width / 2) + ' ' +
@@ -379,3 +380,3 @@ (textOptions.y + labelSize.height / 4 + 2) +
                 if (alignment === 'Center') {
-                    path += 'M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + padding) + ' ' + y + ' ' + (x + padding) + ' ' + (y + 10)
+                    path += ' M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + padding) + ' ' + y + ' ' + (x + padding) + ' ' + (y + 10)
                         + ' L ' + (x + padding) + ' ' + (y + (height - 10) / 2) + ' L ' + (x + padding1) + ' ' + (y + (height - 10) / 2 + 5)
@@ -387,3 +388,3 @@ + ' L ' + (x + padding) + ' ' + (y + (height - 10) / 2 + 10) + ' L ' + (x + padding) + ' ' + (y + (height - 10)) +
                 else if (alignment === 'Far') {
-                    path += 'M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + padding) + ' ' + y + ' ' + (x + padding) + ' ' + (y + 10)
+                    path += ' M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + padding) + ' ' + y + ' ' + (x + padding) + ' ' + (y + 10)
                         + ' L ' + (x + padding) + ' ' + (y + height - 20) + ' ' + ' L ' + (x + padding1) + ' ' + (y + (height - 15)) +
@@ -395,3 +396,3 @@ ' L ' + (x + padding) + ' ' + (y + (height - 10)) + ' L ' + (x + padding) + ' ' + (y + (height - 10)) +
                 else {
-                    path += 'M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + padding) + ' ' + y + ' ' + (x + padding) + ' ' + (y + 10)
+                    path += ' M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + padding) + ' ' + y + ' ' + (x + padding) + ' ' + (y + 10)
                         + ' L ' + (x + padding1) + ' ' + (y + 15) +
@@ -416,3 +417,3 @@ ' L ' + (x + padding) + ' ' + (y + 20) + ' L ' + (x + padding) + ' ' + (y + (height - 10)) +
         });
-        this.multiElements.appendChild(this.chart.renderer.drawClipPath({
+        this.multiElements.appendChild(appendClipElement(this.chart.redraw, {
             'id': clipId,
@@ -425,3 +426,3 @@ 'x': x,
             'stroke-width': 1, 'stroke': 'Gray'
-        }));
+        }, this.chart.renderer));
     };
@@ -434,5 +435,7 @@ /**
     MultiLevelLabel.prototype.createBorderElement = function (borderIndex, axisIndex, axis, path) {
+        var element = getElement(this.chart.element.id + axisIndex + '_Axis_MultiLevelLabel_Rect_' + borderIndex);
+        var direction = element ? element.getAttribute('d') : '';
         var borderElement = this.chart.renderer.drawPath(new PathOption(this.chart.element.id + axisIndex + '_Axis_MultiLevelLabel_Rect_' + borderIndex, 'Transparent', axis.multiLevelLabels[borderIndex].border.width, axis.multiLevelLabels[borderIndex].border.color || this.chart.themeStyle.axisLine, 1, '', path));
         borderElement.setAttribute('style', 'pointer-events: none');
-        this.multiElements.appendChild(borderElement);
+        appendChildElement(this.multiElements, borderElement, this.chart.redraw, true, 'x', 'y', null, direction);
     };
@@ -439,0 +442,0 @@ /**

src/chart/axis/polar-radar-panel.js

@@ -18,3 +18,3 @@ var __extends = (this && this.__extends) || (function () {
 import { LineBase } from '../series/line-base';
-import { textElement, valueToPolarCoefficient, CoefficientToVector } from '../../common/utils/helper';
+import { textElement, ChartLocation, valueToPolarCoefficient, CoefficientToVector, getElement } from '../../common/utils/helper';
 /**
@@ -204,3 +204,3 @@ * Specifies the Polar Axis Layout.
             options = new TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY + (elementSize.height / 4), anchor, axis.visibleLabels[i].text);
-            textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement);
+            textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement, false, chart.redraw, true, true);
         }
@@ -227,8 +227,12 @@ chart.yAxisElements.appendChild(labelElement);
         };
+        var previousValue;
+        var element;
         if (axis.majorGridLines.width > 0) {
             if (chart.visibleSeries[0].type === 'Polar') {
                 for (var j = 0; j < axis.visibleLabels.length; j++) {
+                    element = getElement(chart.element.id + '_MajorGridLine_' + index + '_' + j);
+                    previousValue = element ? element.getAttribute('r') : null;
                     radius = chart.radius * valueToCoefficient(axis.visibleLabels[j].value, axis);
-                    options = new CircleOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', border, axis.majorGridLines.width, this.centerX, this.centerY, radius);
-                    this.element.appendChild(chart.renderer.drawCircle(options));
+                    options = new CircleOption(chart.element.id + '_MajorGridLine_' + index + '_' + j, 'transparent', border, axis.majorGridLines.width, this.centerX, this.centerY, radius);
+                    appendChildElement(this.element, chart.renderer.drawCircle(options), chart.redraw, true, 'r', 'r', new ChartLocation(+previousValue, +previousValue), null, true);
                 }
@@ -239,2 +243,3 @@ }
                     radius = chart.radius * valueToCoefficient(axis.visibleLabels[j].value, axis);
+                    majorGrid = '';
                     for (var i = 0, len = chart.primaryXAxis.visibleLabels.length; i < len; i++) {
@@ -252,7 +257,9 @@ vector = CoefficientToVector(valueToPolarCoefficient(chart.primaryXAxis.visibleLabels[i].value, chart.primaryXAxis), this.startAngle);
                         y2 = this.centerY + radius * vector2.y;
-                        majorGrid = majorGrid.concat('M' + ' ' + x1 + ' ' + y1 + ' ' + 'L' + ' ' + x2 + ' ' + y2 + ' ');
+                        majorGrid = majorGrid.concat((i ? 'L' : 'M') + ' ' + x1 + ' ' + y1 + ' ' + 'L' + ' ' + x2 + ' ' + y2 + ' ');
                     }
+                    element = getElement(chart.element.id + '_MajorGridLine_' + index + '_' + j);
+                    previousValue = element ? element.getAttribute('d') : null;
+                    options = new PathOption(chart.element.id + '_MajorGridLine_' + index + '_' + j, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, null, majorGrid);
+                    appendChildElement(this.element, chart.renderer.drawPath(options), chart.redraw, true, 'x', 'y', null, previousValue, true);
                 }
-                options = new PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, null, majorGrid);
-                this.element.appendChild(chart.renderer.drawPath(options));
             }
@@ -268,7 +275,6 @@ }
                 y2 = y1 + (axis.majorTickLines.height * (Math.sin(angle * Math.PI / 180)) * (axis.tickPosition === 'Inside' ? 1 : -1));
-                majorTick = majorTick.concat('M ' + x1 + ' ' + y1 +
-                    ' L ' + x2 + ' ' + y2 + ' ');
+                majorTick = 'M ' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2;
+                this.renderTickLine(axis, index, majorTick, '', i);
             }
         }
-        this.renderTickLine(axis, index, majorTick, '');
     };
@@ -299,5 +305,4 @@ PolarRadarPanel.prototype.drawXAxisGridLine = function (axis, index) {
             var yLoc = y2 + (axis.majorTickLines.height * vector.y * (axis.tickPosition === 'Inside' ? -1 : 1));
-            majorGrid = majorGrid.concat('M ' + x1 + ' ' + y1 + ' ' + 'L' + x2 + ' ' + y2);
-            majorTick = majorTick.concat('M ' + x2 + ' ' + y2 +
-                ' L ' + xLoc + ' ' + yLoc + ' ');
+            majorGrid = 'M ' + x1 + ' ' + y1 + ' ' + 'L' + x2 + ' ' + y2;
+            majorTick = 'M ' + x2 + ' ' + y2 + ' L ' + xLoc + ' ' + yLoc;
             if (axis.minorTicksPerInterval > 0 && (axis.minorGridLines.width > 0 || axis.minorTickLines.width > 0)
@@ -309,5 +314,5 @@ && axis.valueType !== 'Category' && chart.visibleSeries[0].type !== 'Radar') {
             }
+            this.renderTickLine(axis, index, majorTick, minorTickLine, i);
+            this.renderGridLine(axis, index, majorGrid, minorGirdLine, i);
         }
-        this.renderTickLine(axis, index, majorTick, minorTickLine);
-        this.renderGridLine(axis, index, majorGrid, minorGirdLine);
     };
@@ -380,28 +385,40 @@ PolarRadarPanel.prototype.drawAxisMinorLine = function (axis, tempInterval, minorGird, minorTick) {
             options = new TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY, textAnchor, labelText, '', 'central');
-            textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement);
+            textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement, false, chart.redraw, true, true);
         }
         this.element.appendChild(labelElement);
     };
-    PolarRadarPanel.prototype.renderTickLine = function (axis, index, majorTickLine, minorTickLine) {
+    PolarRadarPanel.prototype.renderTickLine = function (axis, index, majorTickLine, minorTickLine, gridIndex) {
         var tickOptions;
         var chart = this.chart;
+        var direction;
+        var element;
         if (axis.majorTickLines.width > 0) {
-            tickOptions = new PathOption(chart.element.id + '_MajorTickLine_' + index, 'transparent', axis.majorTickLines.width, axis.majorTickLines.color || chart.themeStyle.majorTickLine, null, null, majorTickLine);
-            chart.yAxisElements.appendChild(chart.renderer.drawPath(tickOptions));
+            element = getElement(chart.element.id + '_MajorTickLine_' + index + '_' + gridIndex);
+            direction = element ? element.getAttribute('d') : null;
+            tickOptions = new PathOption(chart.element.id + '_MajorTickLine_' + index + '_' + gridIndex, 'transparent', axis.majorTickLines.width, axis.majorTickLines.color || chart.themeStyle.majorTickLine, null, null, majorTickLine);
+            appendChildElement(chart.yAxisElements, chart.renderer.drawPath(tickOptions), chart.redraw, true, 'x', 'y', null, direction);
         }
         if (axis.minorTickLines.width > 0) {
-            tickOptions = new PathOption(chart.element.id + '_MinorTickLine_' + index, 'transparent', axis.minorTickLines.width, axis.minorTickLines.color || chart.themeStyle.minorTickLine, null, null, minorTickLine);
-            chart.yAxisElements.appendChild(chart.renderer.drawPath(tickOptions));
+            element = getElement(chart.element.id + '_MinorTickLine_' + index + '_' + gridIndex);
+            direction = element ? element.getAttribute('d') : null;
+            tickOptions = new PathOption(chart.element.id + '_MinorTickLine_' + index + '_' + gridIndex, 'transparent', axis.minorTickLines.width, axis.minorTickLines.color || chart.themeStyle.minorTickLine, null, null, minorTickLine);
+            appendChildElement(chart.yAxisElements, chart.renderer.drawPath(tickOptions), chart.redraw, true, 'x', 'y', null, direction);
         }
     };
-    PolarRadarPanel.prototype.renderGridLine = function (axis, index, majorGrid, minorGird) {
+    PolarRadarPanel.prototype.renderGridLine = function (axis, index, majorGrid, minorGird, gridIndex) {
         var chart = this.chart;
         var gridOptions;
+        var direction;
+        var element;
         if (axis.majorGridLines.width > 0) {
-            gridOptions = new PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, axis.majorGridLines.dashArray, majorGrid);
-            this.element.appendChild(chart.renderer.drawPath(gridOptions));
+            element = getElement(chart.element.id + '_MajorGridLine_' + index + '_' + gridIndex);
+            direction = element ? element.getAttribute('d') : null;
+            gridOptions = new PathOption(chart.element.id + '_MajorGridLine_' + index + '_' + gridIndex, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, axis.majorGridLines.dashArray, majorGrid);
+            appendChildElement(this.element, chart.renderer.drawPath(gridOptions), chart.redraw, true, 'x', 'y', null, direction);
         }
         if (axis.minorGridLines.width > 0) {
-            gridOptions = new PathOption(chart.element.id + '_MinorGridLine_' + index, 'transparent', axis.minorGridLines.width, axis.minorGridLines.color || chart.themeStyle.minorGridLine, null, axis.minorGridLines.dashArray, minorGird);
-            this.element.appendChild(chart.renderer.drawPath(gridOptions));
+            element = getElement(chart.element.id + '_MinorGridLine_' + index + '_' + gridIndex);
+            direction = element ? element.getAttribute('d') : null;
+            gridOptions = new PathOption(chart.element.id + '_MinorGridLine_' + index + '_' + gridIndex, 'transparent', axis.minorGridLines.width, axis.minorGridLines.color || chart.themeStyle.minorGridLine, null, axis.minorGridLines.dashArray, minorGird);
+            appendChildElement(this.element, chart.renderer.drawPath(gridOptions), chart.redraw, true, 'x', 'y', null, direction);
         }
@@ -408,0 +425,0 @@ };

src/chart/axis/strip-line.d.ts

@@ -80,2 +80,3 @@ import { Chart } from '../chart';
     private renderText;
+    private invertAlignment;
     /**
@@ -122,2 +123,3 @@ * To find the next value of the recurrence strip line
      * To get the module name for `StripLine`.
+     * @private
      */
@@ -127,4 +129,5 @@ getModuleName(): string;
      * To destroy the `StripLine` module.
+     * @private
      */
     destroy(): void;
 }

src/chart/axis/strip-line.js

@@ -5,3 +5,3 @@ /**
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
-import { Rect, TextOption, measureText, valueToCoefficient, textElement, RectOption, PathOption, appendChildElement, appendClipElement, withIn } from '../../common/utils/helper';
+import { Rect, TextOption, measureText, valueToCoefficient, textElement, RectOption, PathOption, appendChildElement, appendClipElement, withIn, getElement } from '../../common/utils/helper';
 /**
@@ -144,3 +144,2 @@ * `StripLine` module is used to render the stripLine in chart.
         var seriesClipRect = chart.chartAxisLayoutPanel.seriesClipRect;
-        var count = 0;
         var end = 0;
@@ -163,2 +162,3 @@ var limit = 0;
             var axis = axes_1[_i];
+            var count = 0;
             for (var _a = 0, _b = axis.stripLines; _a < _b.length; _a++) {
@@ -211,6 +211,8 @@ var stripline = _b[_a];
     StripLine.prototype.renderPath = function (stripline, rect, id, parent, chart, axis) {
+        var element = getElement(id);
+        var direction = element ? element.getAttribute('d') : '';
         var d = (axis.orientation === 'Vertical') ? ('M' + rect.x + ' ' + rect.y + ' ' + 'L' + (rect.x + rect.width)
             + ' ' + rect.y) :
             ('M' + rect.x + ' ' + rect.y + ' ' + 'L' + rect.x + ' ' + (rect.y + rect.height));
-        parent.appendChild(chart.renderer.drawPath(new PathOption(id, '', stripline.size, stripline.color, stripline.opacity, stripline.dashArray, d)));
+        appendChildElement(parent, chart.renderer.drawPath(new PathOption(id, '', stripline.size, stripline.color, stripline.opacity, stripline.dashArray, d)), chart.redraw, true, 'x', 'y', null, direction, true);
     };
@@ -227,3 +229,5 @@ ;
     StripLine.prototype.renderRectangle = function (stripline, rect, id, parent, chart) {
-        parent.appendChild(chart.renderer.drawRectangle(new RectOption(id, stripline.color, stripline.border, stripline.opacity, rect, 0, 0, '', stripline.dashArray)));
+        var element = getElement(id);
+        var previousRect = element ? new Rect(+element.getAttribute('x'), +element.getAttribute('y'), +element.getAttribute('width'), +element.getAttribute('height')) : null;
+        appendChildElement(parent, chart.renderer.drawRectangle(new RectOption(id, stripline.color, stripline.border, stripline.opacity, rect, 0, 0, '', stripline.dashArray)), chart.redraw, true, 'x', 'y', null, null, true, true, previousRect);
     };
@@ -250,3 +254,3 @@ /**
             ty = this.getTextStart(ty - textMid, rect.height, stripline.verticalAlignment);
-            anchor = stripline.horizontalAlignment;
+            anchor = this.invertAlignment(stripline.verticalAlignment);
         }
@@ -256,6 +260,17 @@ else {
             ty = this.getTextStart(ty + (textMid * this.factor(stripline.verticalAlignment)) - padding, rect.height, stripline.verticalAlignment);
-            anchor = stripline.verticalAlignment;
+            anchor = stripline.horizontalAlignment;
         }
         textElement(new TextOption(id, tx, ty, anchor, stripline.text, 'rotate(' + rotation + ' ' + tx + ',' + ty + ')', 'middle'), stripline.textStyle, stripline.textStyle.color, parent);
     };
+    StripLine.prototype.invertAlignment = function (anchor) {
+        switch (anchor) {
+            case 'Start':
+                anchor = 'End';
+                break;
+            case 'End':
+                anchor = 'Start';
+                break;
+        }
+        return anchor;
+    };
     /**
@@ -310,11 +325,11 @@ * To find the next value of the recurrence strip line
         if (stripline.sizeType === 'Pixel') {
-            this.renderPath(stripline, rect, id + 'path_' + count, striplineGroup, chart, axis);
+            this.renderPath(stripline, rect, id + 'path_' + axis.name + '_' + count, striplineGroup, chart, axis);
         }
         else {
             if (rect.height !== 0 && rect.width !== 0) {
-                this.renderRectangle(stripline, rect, id + 'rect_' + count, striplineGroup, chart);
+                this.renderRectangle(stripline, rect, id + 'rect_' + axis.name + '_' + count, striplineGroup, chart);
             }
         }
         if (stripline.text !== '') {
-            this.renderText(stripline, rect, id + 'text_' + count, striplineGroup, chart, axis);
+            this.renderText(stripline, rect, id + 'text_' + axis.name + '_' + count, striplineGroup, chart, axis);
         }
@@ -358,2 +373,3 @@ };
      * To get the module name for `StripLine`.
+     * @private
      */
@@ -365,2 +381,3 @@ StripLine.prototype.getModuleName = function () {
      * To destroy the `StripLine` module.
+     * @private
      */
@@ -367,0 +384,0 @@ StripLine.prototype.destroy = function () {

src/chart/chart-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, NotifyPropertyChanges, Internationalization, BaseAttibutes } from '@syncfusion/ej2-base';import { ModuleDeclaration, L10n } from '@syncfusion/ej2-base';import { TapEventArgs, EmitType, ChildProperty } from '@syncfusion/ej2-base';import { remove, extend } from '@syncfusion/ej2-base';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { INotifyPropertyChanged, SvgRenderer, Browser, Touch } from '@syncfusion/ej2-base';import { Event, EventHandler, Complex, Collection } from '@syncfusion/ej2-base';import { findClipRect, measureText, TextOption, showTooltip, removeElement, appendChildElement } from '../common/utils/helper';import { textElement, RectOption, createSvg, firstToLowerCase, titlePositionX, PointData, redrawElement } from '../common/utils/helper';import { appendClipElement } from '../common/utils/helper';import { MarginModel, BorderModel, ChartAreaModel, FontModel, TooltipSettingsModel } from '../common/model/base-model';import { getSeriesColor, Theme, getThemeColor } from '../common/model/theme';import { IndexesModel } from '../common/model/base-model';import { Margin, Border, ChartArea, Font, Indexes, TooltipSettings } from '../common/model/base';import { AxisModel, RowModel, ColumnModel } from './axis/axis-model';import { Row, Column, Axis } from './axis/axis';import { CartesianAxisLayoutPanel } from './axis/cartesian-panel';import { DateTime } from './axis/date-time-axis';import { Category } from './axis/category-axis';import { DateTimeCategory } from './axis/date-time-category-axis';import { CandleSeries } from './series/candle-series';import { ErrorBar } from './series/error-bar';import { Logarithmic } from './axis/logarithmic-axis';import { Size, Rect } from '../common/utils/helper';import { ChartData } from './utils/get-data';import { SelectionMode, LineType, ZoomMode, ToolbarItems, ChartTheme } from './utils/enum';import { Series, SeriesBase } from './series/chart-series';import { SeriesModel } from './series/chart-series-model';import { Data } from '../common/model/data';import { LineSeries } from './series/line-series';import { AreaSeries } from './series/area-series';import { BarSeries } from './series/bar-series';import { HistogramSeries } from './series/histogram-series';import { StepLineSeries } from './series/step-line-series';import { StepAreaSeries } from './series/step-area-series';import { ColumnSeries } from './series/column-series';import { ParetoSeries } from './series/pareto-series';import { StackingColumnSeries } from './series/stacking-column-series';import { StackingBarSeries } from './series/stacking-bar-series';import { StackingAreaSeries } from './series/stacking-area-series';import { ScatterSeries } from './series/scatter-series';import { SplineSeries } from './series/spline-series';import { SplineAreaSeries } from './series/spline-area-series';import { RangeColumnSeries } from './series/range-column-series';import { PolarSeries } from './series/polar-series';import { RadarSeries } from './series/radar-series';import { HiloSeries } from './series/hilo-series';import { HiloOpenCloseSeries } from './series/hilo-open-close-series';import { WaterfallSeries } from './series/waterfall-series';import { BubbleSeries } from './series/bubble-series';import { RangeAreaSeries } from './series/range-area-series';import { Tooltip } from './user-interaction/tooltip';import { Crosshair } from './user-interaction/crosshair';import { Marker } from './series/marker';import { LegendSettings } from '../common/legend/legend';import { LegendSettingsModel } from '../common/legend/legend-model';import { Legend } from './legend/legend';import { Zoom } from './user-interaction/zooming';import { Selection } from './user-interaction/selection';import { DataLabel } from './series/data-label';import { StripLine } from './axis/strip-line';import { MultiLevelLabel } from './axis/multi-level-labels';import { BoxAndWhiskerSeries } from './series/box-and-whisker-series';import { PolarRadarPanel } from './axis/polar-radar-panel';import { StripLineSettingsModel } from './model/chart-base-model';import { Trendline } from './series/chart-series';import { Trendlines } from './trend-lines/trend-line';import { TechnicalIndicator } from './technical-indicators/technical-indicator';import { SmaIndicator } from './technical-indicators/sma-indicator';import { EmaIndicator } from './technical-indicators/ema-indicator';import { TmaIndicator } from './technical-indicators/tma-indicator';import { AccumulationDistributionIndicator } from './technical-indicators/ad-indicator';import { AtrIndicator } from './technical-indicators/atr-indicator';import { BollingerBands } from './technical-indicators/bollinger-bands';import { MomentumIndicator } from './technical-indicators/momentum-indicator';import { StochasticIndicator } from './technical-indicators/stochastic-indicator';import { MacdIndicator } from './technical-indicators/macd-indicator';import { RsiIndicator } from './technical-indicators/rsi-indicator';import { TechnicalIndicatorModel } from './technical-indicators/technical-indicator-model';import { ILegendRenderEventArgs, IAxisLabelRenderEventArgs, ITextRenderEventArgs, IResizeEventArgs } from '../common/model/interface';import { IAnnotationRenderEventArgs, IAxisMultiLabelRenderEventArgs, IThemeStyle, IScrollEventArgs } from '../common/model/interface';import { IPointRenderEventArgs, ISeriesRenderEventArgs, IDragCompleteEventArgs, ITooltipRenderEventArgs } from '../common/model/interface';import { IZoomCompleteEventArgs, ILoadedEventArgs } from '../common/model/interface';import { IAnimationCompleteEventArgs, IMouseEventArgs, IPointEventArgs } from '../common/model/interface';import { loaded, chartMouseClick, pointClick, pointMove, chartMouseLeave, resized } from '../common/model/constants';import { chartMouseDown, chartMouseMove, chartMouseUp, load } from '../common/model/constants';import { IPrintEventArgs, IAxisRangeCalculatedEventArgs } from '../common/model/interface';import { ExportUtils } from '../common/utils/export';import { ChartAnnotationSettingsModel } from './model/chart-base-model';import { ChartAnnotationSettings } from './model/chart-base';import { ChartAnnotation } from './annotation/annotation';import { getElement, getTitle } from '../common/utils/helper';import { ExportType, Alignment } from '../common/utils/enum';import { MultiColoredLineSeries } from './series/multi-colored-line-series';import { MultiColoredAreaSeries } from './series/multi-colored-area-series';import { ScrollBar } from '../common/scrollbar/scrollbar';import { AccumulationChart, RangeNavigator } from '..';import { DataManager } from '@syncfusion/ej2-data';
+import { Component, Property, NotifyPropertyChanges, Internationalization, BaseAttibutes } from '@syncfusion/ej2-base';import { ModuleDeclaration, L10n } from '@syncfusion/ej2-base';import { TapEventArgs, EmitType, ChildProperty } from '@syncfusion/ej2-base';import { remove, extend } from '@syncfusion/ej2-base';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { INotifyPropertyChanged, SvgRenderer, Browser, Touch } from '@syncfusion/ej2-base';import { Event, EventHandler, Complex, Collection } from '@syncfusion/ej2-base';import { findClipRect, measureText, TextOption, showTooltip, removeElement, appendChildElement } from '../common/utils/helper';import { textElement, RectOption, createSvg, firstToLowerCase, titlePositionX, PointData, redrawElement } from '../common/utils/helper';import { appendClipElement } from '../common/utils/helper';import { MarginModel, BorderModel, ChartAreaModel, FontModel, TooltipSettingsModel } from '../common/model/base-model';import { getSeriesColor, Theme, getThemeColor } from '../common/model/theme';import { IndexesModel } from '../common/model/base-model';import { Margin, Border, ChartArea, Font, Indexes, TooltipSettings } from '../common/model/base';import { AxisModel, RowModel, ColumnModel } from './axis/axis-model';import { Row, Column, Axis } from './axis/axis';import { CartesianAxisLayoutPanel } from './axis/cartesian-panel';import { DateTime } from './axis/date-time-axis';import { Category } from './axis/category-axis';import { DateTimeCategory } from './axis/date-time-category-axis';import { CandleSeries } from './series/candle-series';import { ErrorBar } from './series/error-bar';import { Logarithmic } from './axis/logarithmic-axis';import { Size, Rect } from '../common/utils/helper';import { ChartData } from './utils/get-data';import { SelectionMode, LineType, ZoomMode, ToolbarItems, ChartTheme } from './utils/enum';import { Series, SeriesBase } from './series/chart-series';import { SeriesModel } from './series/chart-series-model';import { Data } from '../common/model/data';import { LineSeries } from './series/line-series';import { AreaSeries } from './series/area-series';import { BarSeries } from './series/bar-series';import { HistogramSeries } from './series/histogram-series';import { StepLineSeries } from './series/step-line-series';import { StepAreaSeries } from './series/step-area-series';import { ColumnSeries } from './series/column-series';import { ParetoSeries } from './series/pareto-series';import { StackingColumnSeries } from './series/stacking-column-series';import { StackingBarSeries } from './series/stacking-bar-series';import { StackingAreaSeries } from './series/stacking-area-series';import { ScatterSeries } from './series/scatter-series';import { SplineSeries } from './series/spline-series';import { SplineAreaSeries } from './series/spline-area-series';import { RangeColumnSeries } from './series/range-column-series';import { PolarSeries } from './series/polar-series';import { RadarSeries } from './series/radar-series';import { HiloSeries } from './series/hilo-series';import { HiloOpenCloseSeries } from './series/hilo-open-close-series';import { WaterfallSeries } from './series/waterfall-series';import { BubbleSeries } from './series/bubble-series';import { RangeAreaSeries } from './series/range-area-series';import { Tooltip } from './user-interaction/tooltip';import { Crosshair } from './user-interaction/crosshair';import { Marker } from './series/marker';import { LegendSettings } from '../common/legend/legend';import { LegendSettingsModel } from '../common/legend/legend-model';import { Legend } from './legend/legend';import { Zoom } from './user-interaction/zooming';import { Selection } from './user-interaction/selection';import { DataLabel } from './series/data-label';import { StripLine } from './axis/strip-line';import { MultiLevelLabel } from './axis/multi-level-labels';import { BoxAndWhiskerSeries } from './series/box-and-whisker-series';import { PolarRadarPanel } from './axis/polar-radar-panel';import { StripLineSettingsModel } from './model/chart-base-model';import { Trendline } from './series/chart-series';import { Trendlines } from './trend-lines/trend-line';import { TechnicalIndicator } from './technical-indicators/technical-indicator';import { SmaIndicator } from './technical-indicators/sma-indicator';import { EmaIndicator } from './technical-indicators/ema-indicator';import { TmaIndicator } from './technical-indicators/tma-indicator';import { AccumulationDistributionIndicator } from './technical-indicators/ad-indicator';import { AtrIndicator } from './technical-indicators/atr-indicator';import { BollingerBands } from './technical-indicators/bollinger-bands';import { MomentumIndicator } from './technical-indicators/momentum-indicator';import { StochasticIndicator } from './technical-indicators/stochastic-indicator';import { MacdIndicator } from './technical-indicators/macd-indicator';import { RsiIndicator } from './technical-indicators/rsi-indicator';import { TechnicalIndicatorModel } from './technical-indicators/technical-indicator-model';import { ILegendRenderEventArgs, IAxisLabelRenderEventArgs, ITextRenderEventArgs, IResizeEventArgs } from '../common/model/interface';import { IAnnotationRenderEventArgs, IAxisMultiLabelRenderEventArgs, IThemeStyle, IScrollEventArgs } from '../common/model/interface';import { IPointRenderEventArgs, ISeriesRenderEventArgs, IDragCompleteEventArgs, ITooltipRenderEventArgs } from '../common/model/interface';import { IZoomCompleteEventArgs, ILoadedEventArgs } from '../common/model/interface';import { IAnimationCompleteEventArgs, IMouseEventArgs, IPointEventArgs } from '../common/model/interface';import { loaded, chartMouseClick, pointClick, pointMove, chartMouseLeave, resized } from '../common/model/constants';import { chartMouseDown, chartMouseMove, chartMouseUp, load } from '../common/model/constants';import { IPrintEventArgs, IAxisRangeCalculatedEventArgs } from '../common/model/interface';import { ExportUtils } from '../common/utils/export';import { ChartAnnotationSettingsModel } from './model/chart-base-model';import { ChartAnnotationSettings } from './model/chart-base';import { ChartAnnotation } from './annotation/annotation';import { getElement, getTitle } from '../common/utils/helper';import { ExportType, Alignment } from '../common/utils/enum';import { MultiColoredLineSeries } from './series/multi-colored-line-series';import { MultiColoredAreaSeries } from './series/multi-colored-area-series';import { ScrollBar } from '../common/scrollbar/scrollbar';import { AccumulationChart, RangeNavigator } from '..';import { DataManager } from '@syncfusion/ej2-data';import { StockChart } from '../stock-chart/stock-chart';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -16,2 +16,8 @@
     /**
+     * DashArray for crosshair.
+     * @default ''
+     */
+    dashArray?: string;
+
+    /**
      * Options to customize the crosshair line.
@@ -18,0 +24,0 @@ */

src/chart/chart.d.ts

@@ -82,2 +82,3 @@ import { Component, Internationalization } from '@syncfusion/ej2-base';
 import { DataManager } from '@syncfusion/ej2-data';
+import { StockChart } from '../stock-chart/stock-chart';
 /**
@@ -93,2 +94,7 @@ * Configures the crosshair in the chart.
     /**
+     * DashArray for crosshair.
+     * @default ''
+     */
+    dashArray: string;
+    /**
      * Options to customize the crosshair line.
@@ -743,2 +749,4 @@ */
     private isLegend;
+    /** @private */
+    stockChart: StockChart;
     /**
@@ -853,3 +861,7 @@ * localization object
     scrollElement: Element;
+    /** @private */
+    scrollSettingEnabled: boolean;
     private chartid;
+    /** @private */
+    svgId: string;
     /**
@@ -928,3 +940,3 @@ * Constructor for creating the widget
      */
-    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, controls?: (Chart | AccumulationChart | RangeNavigator)[], width?: number, height?: number): void;
+    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, controls?: (Chart | AccumulationChart | RangeNavigator | StockChart)[], width?: number, height?: number): void;
     /**
@@ -983,3 +995,3 @@ * Defines the trendline initialization
      */
-    private createChartSvg;
+    createChartSvg(): void;
     /**
@@ -986,0 +998,0 @@ * Method to bind events for chart

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

@@ -109,3 +109,3 @@ import { ChildProperty, Property, Complex, Collection } from '@syncfusion/ej2-base';import { ZIndex, Anchor, BorderType, sizeType } from '../utils/enum';import { Theme } from '../../common/model/theme';import { Font, Border } from '../../common/model/base';import { BorderModel, FontModel } from '../../common/model/base-model';import { Units, Alignment, Regions, Position, TextOverflow } from '../../common/utils/enum';
      * Border type for labels
-     * * Rectangle 
+     * * Rectangle
      * * Without Top Border
@@ -281,3 +281,3 @@ * * Without Top and BottomBorder
     /**
-     * Defines the position of the strip line text horizontally. They are, 
+     * Defines the position of the strip line text horizontally. They are,
      * * Start: Places the strip line text at the start.
@@ -291,3 +291,3 @@ * * Middle: Places the strip line text in the middle.
     /**
-     * Defines the position of the strip line text vertically. They are, 
+     * Defines the position of the strip line text vertically. They are,
      * * Start: Places the strip line text at the start.
@@ -327,3 +327,3 @@ * * Middle: Places the strip line text in the middle.
     /**
-     * Defines the position of the multi level labels. They are, 
+     * Defines the position of the multi level labels. They are,
      * * Near: Places the multi level labels at Near.
@@ -337,3 +337,3 @@ * * Center: Places the multi level labels at Center.
     /**
-     * Defines the textOverFlow for multi level labels. They are, 
+     * Defines the textOverFlow for multi level labels. They are,
      * * Trim: Trim textOverflow for multi level labels.
@@ -361,2 +361,47 @@ * * Wrap: Wrap textOverflow for multi level labels.
 
+}
+
+/**
+ * Interface for a class ScrollbarSettingsRange
+ */
+export interface ScrollbarSettingsRangeModel {
+
+    /**
+     * Specifies the minimum range of an scrollbar.
+     * @default null
+     */
+
+    minimum?: Date | string | number;
+
+    /**
+      * Specifies the maximum range of an scrollbar.
+      * @default null
+      */
+
+    maximum?: Date | string | number;
+
+}
+
+/**
+ * Interface for a class ScrollbarSettings
+ */
+export interface ScrollbarSettingsModel {
+
+    /**
+       * Enables the scrollbar for lazy loading.
+       * @default false
+       */
+    enable?: boolean;
+
+    /**
+       * Defines the length of the points for numeric and logarithmic values.
+       * @default null
+       */
+    pointsLength?: number;
+
+    /**
+      * Specifies the range for date time values alone.
+      */
+    range?: ScrollbarSettingsRangeModel;
+
 }

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

 import { ChildProperty } from '@syncfusion/ej2-base';
 import { ZIndex, Anchor, BorderType, sizeType } from '../utils/enum';
 import { BorderModel, FontModel } from '../../common/model/base-model';
-import { LabelBorderModel, MultiLevelCategoriesModel } from '../../chart/model/chart-base-model';
+import { LabelBorderModel, MultiLevelCategoriesModel, ScrollbarSettingsRangeModel } from '../../chart/model/chart-base-model';
 import { Units, Alignment, Regions, Position, TextOverflow } from '../../common/utils/enum';
@@ -300,1 +300,35 @@ /**
 }
+/**
+ * Specifies range for scrollbarSettings property
+ */
+export declare class ScrollbarSettingsRange extends ChildProperty<ScrollbarSettingsRange> {
+    /**
+     * Specifies the minimum range of an scrollbar.
+     * @default null
+     */
+    minimum: Date | string | number;
+    /**
+     * Specifies the maximum range of an scrollbar.
+     * @default null
+     */
+    maximum: Date | string | number;
+}
+/**
+ * Scrollbar Settings Properties for Lazy Loading
+ */
+export declare class ScrollbarSettings extends ChildProperty<ScrollbarSettings> {
+    /**
+     * Enables the scrollbar for lazy loading.
+     * @default false
+     */
+    enable: boolean;
+    /**
+     * Defines the length of the points for numeric and logarithmic values.
+     * @default null
+     */
+    pointsLength: number;
+    /**
+     * Specifies the range for date time values alone.
+     */
+    range: ScrollbarSettingsRangeModel;
+}

src/chart/model/chart-base.js

@@ -213,1 +213,38 @@ var __extends = (this && this.__extends) || (function () {
 export { MultiLevelLabels };
+/**
+ * Specifies range for scrollbarSettings property
+ */
+var ScrollbarSettingsRange = /** @class */ (function (_super) {
+    __extends(ScrollbarSettingsRange, _super);
+    function ScrollbarSettingsRange() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(null)
+    ], ScrollbarSettingsRange.prototype, "minimum", void 0);
+    __decorate([
+        Property(null)
+    ], ScrollbarSettingsRange.prototype, "maximum", void 0);
+    return ScrollbarSettingsRange;
+}(ChildProperty));
+export { ScrollbarSettingsRange };
+/**
+ * Scrollbar Settings Properties for Lazy Loading
+ */
+var ScrollbarSettings = /** @class */ (function (_super) {
+    __extends(ScrollbarSettings, _super);
+    function ScrollbarSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(false)
+    ], ScrollbarSettings.prototype, "enable", void 0);
+    __decorate([
+        Property(null)
+    ], ScrollbarSettings.prototype, "pointsLength", void 0);
+    __decorate([
+        Complex({}, ScrollbarSettingsRange)
+    ], ScrollbarSettings.prototype, "range", void 0);
+    return ScrollbarSettings;
+}(ChildProperty));
+export { ScrollbarSettings };

src/chart/user-interaction/crosshair.js

@@ -85,2 +85,6 @@ import { Animation, Browser } from '@syncfusion/ej2-base';
         }
+        if (chart.stockChart && chart.stockChart.onPanning) {
+            this.removeCrosshair(1000);
+            return null;
+        }
         this.valueX = chart.tooltip.enable ? chart.tooltipModule.valueX : chart.mouseX;
@@ -99,3 +103,3 @@ this.valueY = chart.tooltip.enable ? chart.tooltipModule.valueY : chart.mouseY;
             var axisTooltipGroup = chart.renderer.createGroup({ 'id': this.elementID + '_crosshair_axis' });
-            options = new PathOption(this.elementID + '_HorizontalLine', 'none', crosshair.line.width, crosshair.line.color || chart.themeStyle.crosshairLine, 1, null, horizontalCross);
+            options = new PathOption(this.elementID + '_HorizontalLine', 'none', crosshair.line.width, crosshair.line.color || chart.themeStyle.crosshairLine, 1, crosshair.dashArray, horizontalCross);
             this.renderCrosshairLine(options, crossGroup);
@@ -204,3 +208,4 @@ options.d = verticalCross;
         var islabelInside = axis.labelPosition === 'Inside';
-        var scrollBarHeight = axis.zoomingScrollBar && axis.zoomingScrollBar.svgObject ? axis.scrollBarHeight : 0;
+        var scrollBarHeight = axis.scrollbarSettings.enable || (axis.zoomingScrollBar && axis.zoomingScrollBar.svgObject)
+            ? axis.scrollBarHeight : 0;
         this.elementSize = measureText(text, axis.crosshairTooltip.textStyle);
@@ -207,0 +212,0 @@ if (axis.orientation === 'Horizontal') {

src/chart/user-interaction/selection.d.ts

@@ -8,2 +8,3 @@ import { ChartLocation, Rect } from '../../common/utils/helper';
  * `Selection` module handles the selection for chart.
+ * @private
  */
@@ -10,0 +11,0 @@ export declare class Selection extends BaseSelection {

src/chart/user-interaction/selection.js

@@ -26,2 +26,3 @@ var __extends = (this && this.__extends) || (function () {
  * `Selection` module handles the selection for chart.
+ * @private
  */
@@ -45,3 +46,3 @@ var Selection = /** @class */ (function (_super) {
     Selection.prototype.addEventListener = function () {
-        if (this.chart.isDestroyed) {
+        if (this.chart.isDestroyed || (this.chart.stockChart && this.chart.stockChart.onPanning)) {
             return;
@@ -48,0 +49,0 @@ }

src/chart/user-interaction/tooltip.js

@@ -98,2 +98,6 @@ var __extends = (this && this.__extends) || (function () {
     Tooltip.prototype.tooltip = function () {
+        if ((this.chart.stockChart && this.chart.stockChart.onPanning)) {
+            this.removeTooltip(1000);
+            return null;
+        }
         var svgElement = this.getElement(this.element.id + '_tooltip_svg');
@@ -120,2 +124,5 @@ var isTooltip = (svgElement && parseInt(svgElement.getAttribute('opacity'), 10) > 0);
     Tooltip.prototype.findShapes = function () {
+        if (!this.chart.tooltip.enableMarker) {
+            return [];
+        }
         var marker = [];
@@ -136,4 +143,4 @@ for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {
             if (this.pushData(data, isFirst, tooltipDiv, true)) {
-                if (this.triggerEvent(data, isFirst, this.getTooltipText(data), this.findHeader(data))) {
-                    this.createTooltip(chart, isFirst, this.getSymbolLocation(data), data.series.clipRect, data.point, this.findShapes(), this.findMarkerHeight(this.currentPoints[0]), chart.chartAxisLayoutPanel.seriesClipRect, null, this.getTemplateText(data));
+                if (this.triggerEvent(data, isFirst, this.getTooltipText(data))) {
+                    this.createTooltip(chart, isFirst, this.findHeader(data), this.getSymbolLocation(data), data.series.clipRect, data.point, this.findShapes(), this.findMarkerHeight(this.currentPoints[0]), chart.chartAxisLayoutPanel.seriesClipRect, null, this.getTemplateText(data));
                 }
@@ -166,2 +173,5 @@ else {
     Tooltip.prototype.findMarkerHeight = function (pointData) {
+        if (!this.chart.tooltip.enableMarker) {
+            return 0;
+        }
         var markerHeight = 0;
@@ -270,3 +280,8 @@ var series = pointData.series;
         if (isFirst) {
-            document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);
+            if (!chart.stockChart) {
+                document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);
+            }
+            else {
+                document.getElementById(chart.stockChart.element.id + '_Secondary_Element').appendChild(tooltipDiv);
+            }
         }
@@ -288,3 +303,3 @@ this.removeText();
             }
-            if (data && this.triggerEvent(data, isFirst, this.getTooltipText(data), headerContent)) {
+            if (data && this.triggerEvent(data, isFirst, this.getTooltipText(data))) {
                 this.findMouseValue(data, chart);
@@ -299,3 +314,3 @@ this.currentPoints.push(data);
         if (this.currentPoints.length > 0) {
-            this.createTooltip(chart, isFirst, this.findSharedLocation(), this.currentPoints.length === 1 ? this.currentPoints[0].series.clipRect : null, null, this.findShapes(), this.findMarkerHeight(this.currentPoints[0]), chart.chartAxisLayoutPanel.seriesClipRect, extraPoints);
+            this.createTooltip(chart, isFirst, headerContent, this.findSharedLocation(), this.currentPoints.length === 1 ? this.currentPoints[0].series.clipRect : null, null, this.findShapes(), this.findMarkerHeight(this.currentPoints[0]), chart.chartAxisLayoutPanel.seriesClipRect, extraPoints);
         }
@@ -307,7 +322,19 @@ else if (this.getElement(this.element.id + '_tooltip_path')) {
     Tooltip.prototype.findSharedLocation = function () {
-        if (this.currentPoints.length > 1) {
-            return new ChartLocation(this.valueX, this.valueY);
+        var stockChart = this.chart.stockChart;
+        if (stockChart) {
+            if (this.text.length === 1) {
+                this.text.push('');
+            }
+            var toolbarHeight = stockChart.enablePeriodSelector ? stockChart.toolbarHeight : 0;
+            var element = document.getElementById(stockChart.element.id + '_ChartTitle');
+            var titleHeight = stockChart.title !== '' ? element.getBoundingClientRect().height + 10 : 0;
+            return new ChartLocation(this.chart.chartAxisLayoutPanel.seriesClipRect.x + 5, this.chart.chartAxisLayoutPanel.seriesClipRect.y + toolbarHeight + 5 + titleHeight);
         }
         else {
-            return this.getSymbolLocation(this.currentPoints[0]);
+            if (this.currentPoints.length > 1) {
+                return new ChartLocation(this.valueX, this.valueY);
+            }
+            else {
+                return this.getSymbolLocation(this.currentPoints[0]);
+            }
         }
@@ -396,4 +423,4 @@ };
                 return format + '<br/>' + (this.lierIndex > 3 ? 'Outliers : <b>${point.outliers}</b>' :
-                    'Maximum : <b>${point.maximum}</b><br/>Q1 : <b>${point.upperQuartile}</b><br/>' +
-                        'Median : <b>${point.median}</b><br/>Q3 : <b>${point.lowerQuartile}</b><br/>Minimum : <b>${point.minimum}</b>');
+                    'Maximum : <b>${point.maximum}</b><br/>Q3 : <b>${point.upperQuartile}</b><br/>' +
+                        'Median : <b>${point.median}</b><br/>Q1 : <b>${point.lowerQuartile}</b><br/>Minimum : <b>${point.minimum}</b>');
             }
@@ -400,0 +427,0 @@ }

src/chart/user-interaction/zooming-toolkit.js

@@ -5,2 +5,3 @@ import { EventHandler } from '@syncfusion/ej2-base';
 import { textElement, TextOption } from '../../common/utils/helper';
+import { zoomComplete } from '../../common/model/constants';
 /**
@@ -158,5 +159,10 @@ * Zooming Toolkit created here
         }
+        var argsData;
         this.removeTooltip();
         chart.svgObject.setAttribute('cursor', 'auto');
         chart.axisCollections.forEach(function (axis) {
+            argsData = {
+                cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor, previousZoomPosition: axis.zoomPosition,
+                currentZoomFactor: 1, currentZoomPosition: 0
+            };
             axis.zoomFactor = 1;
@@ -167,2 +173,7 @@ axis.zoomPosition = 0;
             }
+            chart.trigger(zoomComplete, argsData);
+            if (!argsData.cancel) {
+                axis.zoomFactor = argsData.currentZoomFactor;
+                axis.zoomPosition = argsData.currentZoomPosition;
+            }
         });
@@ -217,3 +228,8 @@ chart.disableTrackTooltip = false;
             chart.delayRedraw = true;
+            var argsData_1;
             axes.forEach(function (axis) {
+                argsData_1 = {
+                    cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor,
+                    previousZoomPosition: axis.zoomPosition, currentZoomFactor: axis.zoomFactor, currentZoomPosition: axis.zoomPosition
+                };
                 if ((axis.orientation === 'Horizontal' && mode !== 'Y') ||
@@ -227,4 +243,9 @@ (axis.orientation === 'Vertical' && mode !== 'X')) {
                     }
-                    axis.zoomFactor = zoomFactor_1;
-                    axis.zoomPosition = zoomPosition_1;
+                    argsData_1.currentZoomFactor = zoomFactor_1;
+                    argsData_1.currentZoomPosition = zoomPosition_1;
+                    chart.trigger(zoomComplete, argsData_1);
+                    if (!argsData_1.cancel) {
+                        axis.zoomFactor = argsData_1.currentZoomFactor;
+                        axis.zoomPosition = argsData_1.currentZoomPosition;
+                    }
                 }
@@ -231,0 +252,0 @@ });

src/chart/user-interaction/zooming.js

@@ -88,12 +88,22 @@ import { EventHandler, Browser, createElement } from '@syncfusion/ej2-base';
         chart.disableTrackTooltip = true;
+        var argsData;
         axes.forEach(function (axis) {
+            argsData = {
+                cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor, previousZoomPosition: axis.zoomPosition,
+                currentZoomFactor: axis.zoomFactor, currentZoomPosition: axis.zoomPosition
+            };
             currentScale = Math.max(1 / minMax(axis.zoomFactor, 0, 1), 1);
             if (axis.orientation === 'Horizontal') {
                 offset = (chart.previousMouseMoveX - chart.mouseX) / axis.rect.width / currentScale;
-                axis.zoomPosition = minMax(axis.zoomPosition + offset, 0, (1 - axis.zoomFactor));
+                argsData.currentZoomPosition = minMax(axis.zoomPosition + offset, 0, (1 - axis.zoomFactor));
             }
             else {
                 offset = (chart.previousMouseMoveY - chart.mouseY) / axis.rect.height / currentScale;
-                axis.zoomPosition = minMax(axis.zoomPosition - offset, 0, (1 - axis.zoomFactor));
+                argsData.currentZoomPosition = minMax(axis.zoomPosition - offset, 0, (1 - axis.zoomFactor));
             }
+            chart.trigger(zoomComplete, argsData);
+            if (!argsData.cancel) {
+                axis.zoomFactor = argsData.currentZoomFactor;
+                axis.zoomPosition = argsData.currentZoomPosition;
+            }
         });
@@ -161,20 +171,12 @@ if (this.zooming.enableDeferredZooming) {
         var argsData;
-        var previousZF;
-        var previousZP;
-        var currentZF;
-        var currentZP;
         this.isPanning = chart.zoomSettings.enablePan || this.isPanning;
         axes.forEach(function (axis) {
-            previousZF = currentZF = axis.zoomFactor;
-            previousZP = currentZP = axis.zoomPosition;
             argsData = {
-                cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: previousZF, previousZoomPosition: previousZP,
-                currentZoomFactor: currentZF, currentZoomPosition: currentZP
+                cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor, previousZoomPosition: axis.zoomPosition,
+                currentZoomFactor: axis.zoomFactor, currentZoomPosition: axis.zoomPosition
             };
             if (axis.orientation === 'Horizontal') {
                 if (mode !== 'Y') {
-                    currentZP += Math.abs((zoomRect.x - bounds.x) / (bounds.width)) * axis.zoomFactor;
-                    currentZF *= (zoomRect.width / bounds.width);
-                    argsData.currentZoomPosition = currentZP;
-                    argsData.currentZoomFactor = currentZF;
+                    argsData.currentZoomPosition += Math.abs((zoomRect.x - bounds.x) / (bounds.width)) * axis.zoomFactor;
+                    argsData.currentZoomFactor *= (zoomRect.width / bounds.width);
                     chart.trigger(zoomComplete, argsData);
@@ -185,6 +187,5 @@ }
                 if (mode !== 'X') {
-                    currentZP += (1 - Math.abs((zoomRect.height + (zoomRect.y - bounds.y)) / (bounds.height))) * axis.zoomFactor;
-                    currentZF *= (zoomRect.height / bounds.height);
-                    argsData.currentZoomFactor = currentZF;
-                    argsData.currentZoomPosition = currentZP;
+                    argsData.currentZoomPosition += (1 - Math.abs((zoomRect.height + (zoomRect.y - bounds.y)) / (bounds.height)))
+                        * axis.zoomFactor;
+                    argsData.currentZoomFactor *= (zoomRect.height / bounds.height);
                     chart.trigger(zoomComplete, argsData);
@@ -219,3 +220,8 @@ }
         this.isPanning = chart.zoomSettings.enablePan || this.isPanning;
+        var argsData;
         axes.forEach(function (axis) {
+            argsData = {
+                cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor, previousZoomPosition: axis.zoomPosition,
+                currentZoomFactor: axis.zoomFactor, currentZoomPosition: axis.zoomPosition
+            };
             if ((axis.orientation === 'Vertical' && mode !== 'X') ||
@@ -232,5 +238,10 @@ (axis.orientation === 'Horizontal' && mode !== 'Y')) {
                     }
+                    argsData.currentZoomFactor = zoomFactor;
+                    argsData.currentZoomPosition = zoomPosition;
+                    chart.trigger(zoomComplete, argsData);
                 }
-                axis.zoomFactor = zoomFactor;
-                axis.zoomPosition = zoomPosition;
+                if (!argsData.cancel) {
+                    axis.zoomFactor = argsData.currentZoomFactor;
+                    axis.zoomPosition = argsData.currentZoomPosition;
+                }
             }
@@ -307,5 +318,14 @@ });
         var axisTrans;
+        var argsData;
+        var currentZF;
+        var currentZP;
         chart.axisCollections.forEach(function (axis, index) {
             if ((axis.orientation === 'Horizontal' && mode !== 'Y') ||
                 (axis.orientation === 'Vertical' && mode !== 'X')) {
+                currentZF = axis.zoomFactor;
+                currentZP = axis.zoomPosition;
+                argsData = {
+                    cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: axis.zoomFactor,
+                    previousZoomPosition: axis.zoomPosition, currentZoomFactor: currentZF, currentZoomPosition: currentZP
+                };
                 if (axis.orientation === 'Horizontal') {
@@ -327,6 +347,11 @@ value = pinchRect.x - _this.offset.x;
                 selectionMax = Math.max(rangeMin, rangeMax);
-                axis.zoomPosition = (selectionMin - _this.zoomAxes[index].actualMin) / _this.zoomAxes[index].actualDelta;
-                axis.zoomFactor = (selectionMax - selectionMin) / _this.zoomAxes[index].actualDelta;
-                axis.zoomPosition = axis.zoomPosition < 0 ? 0 : axis.zoomPosition;
-                axis.zoomFactor = axis.zoomFactor > 1 ? 1 : axis.zoomFactor;
+                currentZP = (selectionMin - _this.zoomAxes[index].actualMin) / _this.zoomAxes[index].actualDelta;
+                currentZF = (selectionMax - selectionMin) / _this.zoomAxes[index].actualDelta;
+                argsData.currentZoomPosition = currentZP < 0 ? 0 : currentZP;
+                argsData.currentZoomFactor = currentZF > 1 ? 1 : currentZF;
+                chart.trigger(zoomComplete, argsData);
+                if (!argsData.cancel) {
+                    axis.zoomFactor = argsData.currentZoomFactor;
+                    axis.zoomPosition = argsData.currentZoomPosition;
+                }
             }
@@ -549,3 +574,3 @@ });
         var offset = chart.element.getBoundingClientRect();
-        var svgRect = getElement(chart.element.id + '_svg').getBoundingClientRect();
+        var svgRect = getElement(chart.svgId).getBoundingClientRect();
         var mouseX = (e.clientX - offset.left) - Math.max(svgRect.left - offset.left, 0);
@@ -552,0 +577,0 @@ var mouseY = (e.clientY - offset.top) - Math.max(svgRect.top - offset.top, 0);

src/chart/utils/enum.d.ts

@@ -553,4 +553,12 @@ /**
 'Bootstrap' | 
+/**  Render a chart with HighcontrastLight theme. */
+'HighcontrastLight' | 
+/**  Render a chart with MaterialDark theme. */
+'MaterialDark' | 
+/**  Render a chart with FabricDark theme. */
+'FabricDark' | 
 /**  Render a chart with Highcontrast theme. */
-'Highcontrast';
+'Highcontrast' | 
+/**  Render a chart with BootstrapDark theme. */
+'BootstrapDark';
 /**
@@ -557,0 +565,0 @@ *  Specifies the order of the strip line. `Over` | `Behind`.

src/common/index.d.ts

@@ -8,2 +8,3 @@ /**
 export * from './model/theme';
+export * from './period-selector/period-selector';
 export { LegendSettingsModel, LocationModel } from './legend/legend-model';

src/common/index.js

@@ -7,1 +7,2 @@ /**
 export * from './model/theme';
+export * from './period-selector/period-selector';

src/common/model/base-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { EmptyPointMode} from '../../chart/utils/enum';import { AccEmptyPointMode, ConnectorType} from '../../accumulation-chart/model/enum';import { Alignment, TextOverflow } from '../utils/enum';import {  Theme } from '../model/theme';
+import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';import { EmptyPointMode} from '../../chart/utils/enum';import { AccEmptyPointMode, ConnectorType} from '../../accumulation-chart/model/enum';import { Alignment, TextOverflow } from '../utils/enum';import { RangeIntervalType, PeriodSelectorPosition } from '../utils/enum';import {  Theme } from '../model/theme';
 
@@ -200,2 +200,3 @@ /**
  * Interface for a class Indexes
+ * @private
  */
@@ -297,2 +298,9 @@ export interface IndexesModel {
     /**
+     * Enables / Disables the visibility of the marker.
+     * @default true.
+     */
+
+    enableMarker?: boolean;
+
+    /**
      * If set to true, a single ToolTip will be displayed for every index.
@@ -356,2 +364,57 @@ * @default false.
 
+}
+
+/**
+ * Interface for a class Periods
+ */
+export interface PeriodsModel {
+
+    /**
+     * IntervalType of button
+     * @default 'Years'
+     */
+    intervalType?: RangeIntervalType;
+
+    /**
+     * Count value for the button
+     * @default 1
+     */
+    interval?: number;
+
+    /**
+     * Text to be displayed on the button
+     * @default null
+     */
+    text?: string;
+
+    /**
+     * To select the default period
+     * @default false
+     */
+    selected?: boolean;
+
+}
+
+/**
+ * Interface for a class PeriodSelectorSettings
+ */
+export interface PeriodSelectorSettingsModel {
+
+    /**
+     * Height for the period selector
+     * @default 43
+     */
+    height?: number;
+
+    /**
+     * vertical position of the period selector
+     * @default 'Bottom'
+     */
+    position?: PeriodSelectorPosition;
+
+    /**
+     * Buttons
+     */
+    periods?: PeriodsModel[];
+
 }

src/common/model/base.d.ts

 import { ChildProperty } from '@syncfusion/ej2-base';
-import { BorderModel, FontModel } from './base-model';
+import { BorderModel, FontModel, PeriodsModel } from './base-model';
 import { EmptyPointMode } from '../../chart/utils/enum';
 import { AccEmptyPointMode, ConnectorType } from '../../accumulation-chart/model/enum';
 import { Alignment, TextOverflow } from '../utils/enum';
+import { RangeIntervalType, PeriodSelectorPosition } from '../utils/enum';
 /**
@@ -161,5 +162,3 @@ * Defines the appearance of the connectors
 }
-/**
- * Selection Option for series and point indexes.
- */
+/** @private */
 export declare class Indexes extends ChildProperty<Indexes> {
@@ -242,2 +241,7 @@ /**
     /**
+     * Enables / Disables the visibility of the marker.
+     * @default true.
+     */
+    enableMarker: boolean;
+    /**
      * If set to true, a single ToolTip will be displayed for every index.
@@ -286,1 +290,45 @@ * @default false.
 }
+/**
+ * button settings in period selector
+ */
+export declare class Periods extends ChildProperty<Periods> {
+    /**
+     * IntervalType of button
+     * @default 'Years'
+     */
+    intervalType: RangeIntervalType;
+    /**
+     * Count value for the button
+     * @default 1
+     */
+    interval: number;
+    /**
+     * Text to be displayed on the button
+     * @default null
+     */
+    text: string;
+    /**
+     * To select the default period
+     * @default false
+     */
+    selected: boolean;
+}
+/**
+ * Period Selector Settings
+ */
+export declare class PeriodSelectorSettings extends ChildProperty<PeriodSelectorSettings> {
+    /**
+     * Height for the period selector
+     * @default 43
+     */
+    height: number;
+    /**
+     * vertical position of the period selector
+     * @default 'Bottom'
+     */
+    position: PeriodSelectorPosition;
+    /**
+     * Buttons
+     */
+    periods: PeriodsModel[];
+}

src/common/model/base.js

@@ -20,3 +20,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';
+import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';
 import { Theme } from '../model/theme';
@@ -164,5 +164,3 @@ /**
 export { Animation };
-/**
- * Selection Option for series and point indexes.
- */
+/** @private */
 var Indexes = /** @class */ (function (_super) {
@@ -248,2 +246,5 @@ __extends(Indexes, _super);
     __decorate([
+        Property(true)
+    ], TooltipSettings.prototype, "enableMarker", void 0);
+    __decorate([
         Property(false)
@@ -278,1 +279,44 @@ ], TooltipSettings.prototype, "shared", void 0);
 export { TooltipSettings };
+/**
+ * button settings in period selector
+ */
+var Periods = /** @class */ (function (_super) {
+    __extends(Periods, _super);
+    function Periods() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('Years')
+    ], Periods.prototype, "intervalType", void 0);
+    __decorate([
+        Property(1)
+    ], Periods.prototype, "interval", void 0);
+    __decorate([
+        Property(null)
+    ], Periods.prototype, "text", void 0);
+    __decorate([
+        Property(false)
+    ], Periods.prototype, "selected", void 0);
+    return Periods;
+}(ChildProperty));
+export { Periods };
+/**
+ * Period Selector Settings
+ */
+var PeriodSelectorSettings = /** @class */ (function (_super) {
+    __extends(PeriodSelectorSettings, _super);
+    function PeriodSelectorSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(43)
+    ], PeriodSelectorSettings.prototype, "height", void 0);
+    __decorate([
+        Property('Bottom')
+    ], PeriodSelectorSettings.prototype, "position", void 0);
+    __decorate([
+        Collection([], Periods)
+    ], PeriodSelectorSettings.prototype, "periods", void 0);
+    return PeriodSelectorSettings;
+}(ChildProperty));
+export { PeriodSelectorSettings };

src/common/model/interface.d.ts

@@ -11,3 +11,6 @@ import { Chart, Alignment } from '../../chart';
 import { AccumulationChart } from '../../accumulation-chart';
-import { RangeNavigator } from '../../range-navigator';
+import { RangeNavigator, RangeSlider, PeriodsModel } from '../../range-navigator';
+import { StockChart } from '../../stock-chart/stock-chart';
+import { ItemModel } from '@syncfusion/ej2-navigations';
+import { ScrollbarSettingsRangeModel } from '../../chart/model/chart-base-model';
 export interface IChartEventArgs {
@@ -19,2 +22,12 @@ /** Defines the name of the event */
 }
+export interface ISelectorRenderArgs {
+    /** Defines the thumb size of the slider */
+    thumbSize: number;
+    /** Defines the selector appending element */
+    element: HTMLElement;
+    /** Defines the selector width */
+    width: number;
+    /** Defines the selector height */
+    height: number;
+}
 export interface ILegendRenderEventArgs extends IChartEventArgs {
@@ -137,4 +150,2 @@ /** Defines the current legend text */
     point: Points | AccPoints;
-    /** Defines the header text for tooltip */
-    headerText?: string;
 }
@@ -218,3 +229,3 @@ export interface IMouseEventArgs extends IChartEventArgs {
     /** Defines the accumulation chart instance */
-    chart: Chart | AccumulationChart;
+    chart: Chart | AccumulationChart | StockChart;
 }
@@ -289,9 +300,9 @@ export interface IResizeRangeNavigatorEventArgs {
     /** Defines the name of the event */
-    name: string;
+    name?: string;
     /** Defines the current Zoom Position */
-    zoomPosition: number;
+    zoomPosition?: number;
     /** Defines the current Zoom Factor */
-    zoomFactor: number;
+    zoomFactor?: number;
     /** Defines the current range */
-    range: VisibleRangeModel;
+    range?: VisibleRangeModel;
     /** Defines the previous Zoom Position */
@@ -304,3 +315,57 @@ previousZoomPosition?: number;
     /** Defines the current scroll axis */
-    axis: Axis;
+    axis?: Axis;
+    /** Defines axis previous range */
+    previousAxisRange?: ScrollbarSettingsRangeModel;
+    /** Defines axis current range */
+    currentRange?: ScrollbarSettingsRangeModel;
 }
+export interface IRangeSelectorRenderEventArgs extends IChartEventArgs {
+    /** Defines selector collections */
+    selector: ItemModel[];
+    /** enable custom format for calendar */
+    enableCustomFormat: boolean;
+    /** content fro calendar format */
+    content: string;
+}
+/**
+ * Period selector component interface
+ * @private
+ */
+export interface IPeriodSelectorControl {
+    /**
+     * Element for the control
+     */
+    element: HTMLElement;
+    /**
+     * Series min value.
+     */
+    seriesXMin: number;
+    /**
+     * Series max value.
+     */
+    seriesXMax: number;
+    /**
+     * Start value for the axis.
+     */
+    startValue: number;
+    /**
+     * End value for the axis.
+     */
+    endValue: number;
+    /**
+     * Range slider instance.
+     */
+    rangeSlider: RangeSlider;
+    /**
+     * To disable the range selector.
+     */
+    disableRangeSelector: boolean;
+    /**
+     * To config period selector settings.
+     */
+    periods: PeriodsModel[];
+    /**
+     * Range navigator
+     */
+    rangeNavigatorControl: RangeNavigator;
+}

src/common/model/theme.js

@@ -76,2 +76,3 @@ /**
         case 'Fabric':
+        case 'FabricDark':
             palette = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
@@ -81,5 +82,7 @@ '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300'];
         case 'Bootstrap':
+        case 'BootstrapDark':
             palette = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',
                 '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];
             break;
+        case 'HighcontrastLight':
         case 'Highcontrast':
@@ -100,2 +103,3 @@ palette = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',
     switch (theme) {
+        case 'HighcontrastLight':
         case 'Highcontrast':
@@ -128,2 +132,31 @@ style = {
             break;
+        case 'MaterialDark':
+        case 'FabricDark':
+        case 'BootstrapDark':
+            style = {
+                axisLabel: '#DADADA',
+                axisTitle: '#ffffff',
+                axisLine: ' #6F6C6C',
+                majorGridLine: '#414040',
+                minorGridLine: '#514F4F',
+                majorTickLine: '#414040',
+                minorTickLine: ' #4A4848',
+                chartTitle: '#ffffff',
+                legendLabel: '#DADADA',
+                background: '#000000',
+                areaBorder: ' #9A9A9A',
+                errorBar: '#ffffff',
+                crosshairLine: '#F4F4F4',
+                crosshairFill: '#F4F4F4',
+                crosshairLabel: '#282727',
+                tooltipFill: '#F4F4F4',
+                tooltipBoldLabel: '#282727',
+                tooltipLightLabel: '#333232',
+                tooltipHeaderLine: '#9A9A9A',
+                markerShadow: '#BFBFBF',
+                selectionRectFill: 'rgba(255, 217, 57, 0.3)',
+                selectionRectStroke: '#38A9FF',
+                selectionCircleStroke: '#282727'
+            };
+            break;
         default:
@@ -163,3 +196,3 @@ style = {
     switch (theme) {
-        case 'Highcontrast':
+        case 'HighcontrastLight':
             scrollStyle = {
@@ -166,0 +199,0 @@ backRect: '#333',

src/common/scrollbar/scrollbar-elements.js

@@ -38,3 +38,3 @@ import { Rect, PathOption, RectOption, CircleOption } from '../utils/helper';
             id: 'scrollBar_' + scroll.axis.name,
-            transform: 'translate(' + (scroll.isVertical && scroll.axis.isInversed ? scroll.height : scroll.axis.isInversed ?
+            transform: 'translate(' + ((scroll.isVertical && scroll.axis.isInversed) ? scroll.height : scroll.axis.isInversed ?
                 scroll.width : '0') + ',' + (scroll.isVertical && scroll.axis.isInversed ? '0' : scroll.axis.isInversed ?
@@ -41,0 +41,0 @@ scroll.height : scroll.isVertical ? scroll.width : '0') + ') rotate(' + (scroll.isVertical && scroll.axis.isInversed ?

src/common/scrollbar/scrollbar.d.ts

 import { Chart } from '../../chart/chart';
-import { Axis, IScrollbarThemeStyle } from '../../chart/index';
+import { Axis, IScrollbarThemeStyle, IScrollEventArgs, VisibleRangeModel } from '../../chart/index';
+import { ScrollbarSettingsRangeModel } from '../../chart/model/chart-base-model';
 /**
@@ -40,2 +41,12 @@ * Scrollbar Base
     scrollbarThemeStyle: IScrollbarThemeStyle;
+    /** @private */
+    actualRange: number;
+    /** @private */
+    scrollRange: VisibleRangeModel;
+    /** @private */
+    isLazyLoad: boolean;
+    /** @private */
+    previousStart: number;
+    /** @private */
+    previousEnd: number;
     private scrollElements;
@@ -49,2 +60,3 @@ private isResizeLeft;
     private mouseUpListener;
+    private valueType;
     axes: Axis[];
@@ -55,2 +67,3 @@ private startZoomPosition;
     private scrollStarted;
+    private isScrollEnd;
     /**
@@ -121,7 +134,16 @@ * Constructor for creating scrollbar
     scrollMouseUp(e: PointerEvent): void;
+    calculateMouseWheelRange(scrollThumbX: number, scrollThumbWidth: number): IScrollEventArgs;
     /**
+     * Range calculation for lazy loading
+     */
+    calculateLazyRange(scrollThumbX: number, scrollThumbWidth: number, thumbMove?: string): IScrollEventArgs;
+    /**
+     * Get start and end values
+     */
+    private getStartEnd;
+    /**
      * To render scroll bar
      * @private
      */
-    render(): Element;
+    render(isScrollExist: boolean): Element;
     /**
@@ -167,2 +189,10 @@ * Theming for scrollabr
     /**
+     * Lazy load default values
+     */
+    getLazyDefaults(axis: Axis): void;
+    /**
+     * Method to get log range
+     */
+    getLogRange(axis: Axis): ScrollbarSettingsRangeModel;
+    /**
      * Method for injecting scrollbar module
@@ -169,0 +199,0 @@ * @param axis

src/common/scrollbar/scrollbar.js

 import { EventHandler, Browser, remove } from '@syncfusion/ej2-base';
 import { Animation, createElement } from '@syncfusion/ej2-base';
 import { ScrollElements, createScrollSvg } from './scrollbar-elements';
-import { getElement, minMax } from '../utils/helper';
+import { getElement, minMax, logBase } from '../utils/helper';
 import { linear } from '../../chart/index';
@@ -18,2 +18,4 @@ import { getScrollbarThemeColor } from '../model/theme';
     function ScrollBar(component, axis) {
+        /** @private */
+        this.scrollRange = { max: null, min: null, interval: null, delta: null };
         this.component = component;
@@ -84,3 +86,3 @@ this.elements = [];
         this.isResizeRight = this.isExist(id, '_rightCircle_') || this.isExist(id, '_rightArrow_');
-        //this.previousXY = this.isVertical ? this.mouseY : this.mouseX;
+        //  this.previousXY = this.isVertical ? this.mouseY : this.mouseX;
         this.previousXY = (this.isVertical && this.axis.isInversed) ? this.mouseY : this.isVertical ? this.width -
@@ -100,4 +102,4 @@ this.mouseY : this.axis.isInversed ? this.width - this.mouseX : this.mouseX;
         else if (this.isExist(id, 'scrollBarBackRect_')) {
-            var currentX = this.moveLength(this.previousXY, this.previousRectX, 8);
-            if (this.animateDuration) {
+            var currentX = this.moveLength(this.previousXY, this.previousRectX);
+            if (this.animateDuration && !this.isLazyLoad) {
                 currentX = this.isWithIn(currentX) ? currentX : elem.thumbRectX;
@@ -110,2 +112,9 @@ this.performAnimation(elem.thumbRectX, currentX);
                 this.setZoomFactorPosition(elem.thumbRectX, elem.thumbRectWidth);
+                if (this.isLazyLoad) {
+                    var thumbMove = elem.thumbRectX > this.previousRectX ? 'RightMove' : 'LeftMove';
+                    var args = this.calculateLazyRange(elem.thumbRectX, elem.thumbRectWidth, thumbMove);
+                    if (args) {
+                        this.component.trigger(scrollEnd, args);
+                    }
+                }
             }
@@ -138,2 +147,3 @@ }
     ScrollBar.prototype.moveLength = function (mouseXY, thumbX, circleRadius) {
+        if (circleRadius === void 0) { circleRadius = 8; }
         var moveLength = (10 / 100) * (this.width - circleRadius * 2);
@@ -178,4 +188,5 @@ if (mouseXY < thumbX) {
         this.setTheme(target);
-        var mouseXY = (this.isVertical && this.axis.isInversed) ? this.mouseY : this.isVertical ? this.width - this.mouseY :
-            this.axis.isInversed ? this.width - this.mouseX : this.mouseX;
+        //let mouseXY: number = this.isVertical ? this.mouseY : this.mouseX;
+        var mouseXY = (this.isVertical && this.axis.isInversed) ? this.width - this.mouseY : this.isVertical ?
+            this.mouseY : this.mouseX;
         var range = this.axis.visibleRange;
@@ -186,2 +197,3 @@ var zoomPosition = this.zoomPosition;
             this.svgObject.style.cursor = '-webkit-grabbing';
+            mouseXY = this.isLazyLoad ? ((this.isVertical || this.axis.isInversed) ? this.width - mouseXY : mouseXY) : mouseXY;
             var currentX = elem.thumbRectX + (mouseXY - this.previousXY);
@@ -219,2 +231,3 @@ if (mouseXY >= 0 && mouseXY <= currentX + elem.thumbRectWidth) {
         var zoomFactor = this.zoomFactor;
+        var args;
         if (cumulative >= 1) {
@@ -229,5 +242,20 @@ origin = axis.orientation === 'Horizontal' ? this.mouseX / axis.rect.width : 1 - (this.mouseY / axis.rect.height);
         this.positionThumb(elem.thumbRectX, elem.thumbRectWidth);
+        if (this.isLazyLoad) {
+            this.setZoomFactorPosition(elem.thumbRectX, elem.thumbRectWidth);
+        }
         axis.zoomFactor = this.zoomFactor;
         axis.zoomPosition = this.zoomPosition;
-        this.component.trigger(scrollChanged, this.getArgs(scrollChanged, range, zoomPosition, zoomFactor));
+        if (this.isLazyLoad) {
+            args = this.calculateMouseWheelRange(elem.thumbRectX, elem.thumbRectWidth);
+            if (args) {
+                if ((args.currentRange.minimum !== args.previousAxisRange.minimum) && (args.currentRange.maximum !==
+                    args.previousAxisRange.maximum)) {
+                    this.component.trigger(scrollEnd, args);
+                    this.isScrollEnd = false;
+                }
+            }
+        }
+        if (!this.isLazyLoad) {
+            this.component.trigger(scrollChanged, this.getArgs(scrollChanged, range, zoomPosition, zoomFactor));
+        }
     };
@@ -241,12 +269,40 @@ /**
         var circleWidth = 1;
+        var args;
         this.startX = this.scrollElements.thumbRectX;
         var currentScrollWidth = this.startX + this.scrollElements.thumbRectWidth + circleRadius + circleWidth;
         var currentZPWidth = circleRadius + (circleWidth / 2);
-        if (this.isResizeLeft || this.isResizeRight) {
+        if ((this.isResizeLeft || this.isResizeRight) && !this.isLazyLoad) {
             this.axis.zoomFactor = (currentScrollWidth >= this.width - 1 && (this.startX - currentZPWidth) <= 0) ? 1 : this.zoomFactor;
         }
+        if (this.isLazyLoad) {
+            var moveLength = this.previousRectX - this.startX;
+            if ((moveLength > 0 || moveLength < 0) && this.isThumbDrag) {
+                var thumbMove = moveLength < 0 ? 'RightMove' : 'LeftMove';
+                if (thumbMove === 'RightMove') {
+                    this.startX = (this.startX + Math.abs(moveLength)) < this.width - circleRadius ? this.startX :
+                        this.width - circleRadius - this.scrollElements.thumbRectWidth;
+                }
+                else {
+                    this.startX = (this.startX + this.scrollElements.thumbRectWidth - Math.abs(moveLength)) > circleRadius ?
+                        this.startX : circleRadius;
+                }
+                args = this.calculateLazyRange(this.startX, this.scrollElements.thumbRectWidth, thumbMove);
+                if (args) {
+                    this.component.trigger(scrollEnd, args);
+                    this.scrollStarted = false;
+                }
+            }
+            if (this.isResizeLeft || this.isResizeRight) {
+                args = this.calculateLazyRange(this.startX, this.scrollElements.thumbRectWidth);
+                if (args) {
+                    this.component.trigger(scrollEnd, args);
+                    this.scrollStarted = false;
+                }
+            }
+        }
         this.isThumbDrag = false;
         this.isResizeLeft = false;
         this.isResizeRight = false;
-        if (this.scrollStarted) {
+        this.isScrollEnd = false;
+        if (this.scrollStarted && !this.isLazyLoad) {
             this.component.trigger(scrollEnd, this.getArgs(scrollChanged, this.startRange, this.startZoomPosition, this.startZoomFactor));
@@ -256,8 +312,100 @@ this.scrollStarted = false;
     };
+    ScrollBar.prototype.calculateMouseWheelRange = function (scrollThumbX, scrollThumbWidth) {
+        var zoomFactor;
+        var zoomPosition;
+        var currentStart;
+        var currentEnd;
+        var args;
+        var range = this.scrollRange;
+        var previousRange = this.getStartEnd(this.previousStart, this.previousEnd, false);
+        var circleRadius = 8;
+        if ((scrollThumbX + scrollThumbWidth + circleRadius) <= this.width) {
+            zoomPosition = (scrollThumbX - circleRadius) / this.width;
+            zoomFactor = scrollThumbWidth / (this.width);
+        }
+        currentStart = range.min + zoomPosition * range.delta;
+        currentEnd = currentStart + zoomFactor * range.delta;
+        if (currentEnd) {
+            args = { axis: this.axis, currentRange: this.getStartEnd(currentStart, currentEnd, true), previousAxisRange: previousRange };
+        }
+        return args;
+    };
+    ;
     /**
+     * Range calculation for lazy loading
+     */
+    ScrollBar.prototype.calculateLazyRange = function (scrollThumbX, scrollThumbWidth, thumbMove) {
+        var currentScrollWidth = scrollThumbWidth;
+        var zoomFactor;
+        var zoomPosition;
+        var currentStart;
+        var currentEnd;
+        var args;
+        var range = this.scrollRange;
+        var previousRange = this.getStartEnd(this.previousStart, this.previousEnd, false);
+        var circleRadius = 8;
+        var circleWidth = 16;
+        if (this.isResizeRight || thumbMove === 'RightMove') {
+            currentScrollWidth = this.isResizeRight ? currentScrollWidth + circleWidth : currentScrollWidth;
+            zoomFactor = currentScrollWidth / this.width;
+            zoomPosition = thumbMove === 'RightMove' ? (scrollThumbX + circleRadius) / this.width : this.axis.zoomPosition;
+            currentStart = thumbMove === 'RightMove' ? (range.min + zoomPosition * range.delta) : this.previousStart;
+            currentEnd = currentStart + zoomFactor * range.delta;
+        }
+        else if (this.isResizeLeft || thumbMove === 'LeftMove') {
+            zoomPosition = (scrollThumbX - circleRadius) / this.width;
+            zoomFactor = currentScrollWidth / this.width;
+            currentStart = range.min + zoomPosition * range.delta;
+            currentStart = currentStart >= range.min ? currentStart : range.min;
+            currentEnd = thumbMove === 'LeftMove' ? (currentStart + zoomFactor * range.delta) : this.previousEnd;
+        }
+        else if (this.isThumbDrag) {
+            zoomPosition = thumbMove === 'RightMove' ? (scrollThumbX + circleRadius) / this.width : (scrollThumbX - circleRadius) / this.width;
+            zoomFactor = (this.scrollElements.thumbRectWidth) / this.width;
+            currentStart = range.min + zoomPosition * range.delta;
+            currentStart = currentStart >= range.min ? currentStart : range.min;
+            currentEnd = currentStart + zoomFactor * range.delta;
+        }
+        if (currentEnd) {
+            args = { axis: this.axis, currentRange: this.getStartEnd(currentStart, currentEnd, true), previousAxisRange: previousRange };
+        }
+        return args;
+    };
+    /**
+     * Get start and end values
+     */
+    ScrollBar.prototype.getStartEnd = function (start, end, isCurrentStartEnd) {
+        var range;
+        var valueType = this.valueType;
+        if ((valueType === 'DateTime' || valueType === 'DateTimeCategory') && isCurrentStartEnd) {
+            this.previousStart = start;
+            this.previousEnd = end;
+        }
+        else if (isCurrentStartEnd) {
+            this.previousStart = Math.ceil(start);
+            this.previousEnd = Math.ceil(end);
+        }
+        switch (valueType) {
+            case 'Double':
+            case 'Category':
+            case 'Logarithmic':
+                start = Math.ceil(start);
+                end = Math.ceil(end);
+                break;
+            case 'DateTime':
+            case 'DateTimeCategory':
+                start = new Date(start);
+                end = new Date(end);
+                break;
+        }
+        return range = { minimum: start, maximum: end };
+    };
+    /**
      * To render scroll bar
      * @private
      */
-    ScrollBar.prototype.render = function () {
-        this.getDefaults();
+    ScrollBar.prototype.render = function (isScrollExist) {
+        if (this.component.zoomModule || (isScrollExist && this.axis.scrollbarSettings.enable)) {
+            this.getDefaults();
+        }
         this.getTheme();
@@ -312,3 +460,3 @@ this.removeScrollSvg();
         rightCircleEle.style.stroke = isRightHover && isAxis ? style.circleHover : style.circle;
-        if (this.component.theme === 'Highcontrast') {
+        if (this.component.theme === 'HighcontrastLight') {
             leftArrowEle.style.fill = isLeftHover && isAxis ? style.arrowHover : style.arrow;
@@ -341,4 +489,5 @@ leftArrowEle.style.stroke = isLeftHover && isAxis ? style.arrowHover : style.arrow;
         var thumbX = this.previousRectX;
-        var mouseXY = (this.isVertical && this.axis.isInversed) ? this.mouseY : this.isVertical ? this.width - this.mouseY :
-            this.axis.isInversed ? this.width - this.mouseX : this.mouseX;
+        // let mouseXY: number = this.isVertical ? this.mouseY : this.mouseX;
+        var mouseXY = (this.isVertical && this.axis.isInversed) ? this.mouseY : this.isVertical ? this.width -
+            this.mouseY : this.axis.isInversed ? this.width - this.mouseX : this.mouseX;
         var diff = Math.abs(this.previousXY - mouseXY);
@@ -365,2 +514,5 @@ if (this.isResizeLeft && mouseXY >= 0) {
             this.setZoomFactorPosition(this.startX, currentWidth);
+            if (!this.isLazyLoad) {
+                this.setZoomFactorPosition(this.startX, currentWidth);
+            }
         }
@@ -391,2 +543,7 @@ };
     ScrollBar.prototype.getDefaults = function () {
+        var axis = this.axis;
+        if (this.axis.scrollbarSettings.enable) {
+            this.isLazyLoad = true;
+            this.getLazyDefaults(axis);
+        }
         var circleRadius = 8;
@@ -396,5 +553,7 @@ var padding = 5;
         var minThumbWidth = circleRadius * 2 + padding * 2 + gripWidth;
-        var axis = this.axis;
         this.isVertical = axis.orientation === 'Vertical';
-        var currentWidth = axis.zoomFactor * (this.isVertical ? axis.rect.height : axis.rect.width);
+        var lazyRange = axis.scrollbarSettings.range;
+        this.zoomFactor = this.isLazyLoad ? this.zoomFactor : axis.zoomFactor;
+        this.zoomPosition = this.isLazyLoad ? this.zoomPosition : axis.zoomPosition;
+        var currentWidth = this.zoomFactor * (this.isVertical ? axis.rect.height : axis.rect.width);
         currentWidth = currentWidth > minThumbWidth ? currentWidth : minThumbWidth;
@@ -405,4 +564,3 @@ this.scrollX = axis.rect.x;
         this.height = 16;
-        var currentX = axis.zoomPosition * (this.isVertical ? axis.rect.height : this.width);
-        currentX = axis.zoomPosition === 1 ? axis.zoomPosition * (this.width / 2) : currentX;
+        var currentX = this.zoomPosition * (this.isVertical ? axis.rect.height : this.width);
         this.scrollElements.thumbRectX = currentX > circleRadius ? currentX : circleRadius;
@@ -413,2 +571,61 @@ this.scrollElements.thumbRectWidth = ((currentWidth + this.scrollElements.thumbRectX) < this.width - (circleRadius * 2))
     /**
+     * Lazy load default values
+     */
+    ScrollBar.prototype.getLazyDefaults = function (axis) {
+        var start;
+        var end;
+        var valueType = axis.valueType;
+        var scrollbarSettings = axis.scrollbarSettings;
+        this.valueType = valueType = (!scrollbarSettings.range.minimum || !scrollbarSettings.range.maximum) &&
+            scrollbarSettings.pointsLength ? 'Double' : valueType;
+        var range = axis.scrollbarSettings.range;
+        var visibleRange = axis.visibleRange;
+        var pointsLength = axis.scrollbarSettings.pointsLength;
+        var zoomFactor;
+        var zoomPosition;
+        var option = {
+            skeleton: 'full',
+            type: 'dateTime'
+        };
+        var dateParser = this.component.intl.getDateParser(option);
+        var dateFormatter = this.component.intl.getDateFormat(option);
+        switch (valueType) {
+            case 'Double':
+            case 'Category':
+            case 'Logarithmic':
+                start = range.minimum ? range.minimum : pointsLength ? 0 : visibleRange.min;
+                end = range.maximum ? range.maximum : pointsLength ? (pointsLength - 1) : visibleRange.max;
+                break;
+            case 'DateTime':
+            case 'DateTimeCategory':
+                start = range.minimum ? Date.parse(dateParser(dateFormatter(range.minimum))) : visibleRange.min;
+                end = range.maximum ? Date.parse(dateParser(dateFormatter(range.maximum))) : visibleRange.max;
+                break;
+        }
+        start = Math.min(start, visibleRange.min);
+        end = Math.max(end, visibleRange.max);
+        zoomFactor = (visibleRange.max - visibleRange.min) / (end - start);
+        zoomPosition = (visibleRange.min - start) / (end - start);
+        this.zoomFactor = range.minimum || range.maximum ? zoomFactor : (this.axis.maxPointLength / axis.scrollbarSettings.pointsLength);
+        this.zoomPosition = range.minimum || range.maximum ? zoomPosition : axis.zoomPosition;
+        this.scrollRange.min = start;
+        this.scrollRange.max = end;
+        this.scrollRange.delta = end - start;
+        this.previousStart = visibleRange.min;
+        this.previousEnd = visibleRange.max;
+    };
+    /**
+     * Method to get log range
+     */
+    ScrollBar.prototype.getLogRange = function (axis) {
+        var logRange;
+        var range = axis.scrollbarSettings.range;
+        var start = logBase(range.minimum, axis.logBase);
+        start = isFinite(start) ? start : range.minimum;
+        var end = logBase(range.maximum, axis.logBase);
+        end = isFinite(start) ? end : range.maximum;
+        logRange = { minimum: Math.floor(start / 1), maximum: Math.ceil(end / 1) };
+        return logRange;
+    };
+    /**
      * Method for injecting scrollbar module
@@ -486,3 +703,3 @@ * @param axis
             previousZoomFactor: zoomFactor,
-            previousZoomPosition: zoomPosition
+            previousZoomPosition: zoomPosition,
         };
@@ -489,0 +706,0 @@ return scrollArgs;

src/common/user-interaction/tooltip.d.ts

@@ -30,3 +30,2 @@ import { Chart } from '../../chart';
     text: string[];
-    headerText: string;
     svgTooltip: SVGTooltip;
@@ -50,3 +49,3 @@ /**
     highlightPoints(): void;
-    createTooltip(chart: Chart | AccumulationChart, isFirst: boolean, location: ChartLocation, clipLocation: ChartLocation, point: Points | AccPoints, shapes: ChartShape[], offset: number, bounds: Rect, extraPoints?: PointData[], templatePoint?: Points | AccPoints): void;
+    createTooltip(chart: Chart | AccumulationChart, isFirst: boolean, header: string, location: ChartLocation, clipLocation: ChartLocation, point: Points | AccPoints, shapes: ChartShape[], offset: number, bounds: Rect, extraPoints?: PointData[], templatePoint?: Points | AccPoints): void;
     private findPalette;
@@ -57,3 +56,3 @@ private findColor;
     removeHighlightedMarker(data: PointData[]): void;
-    triggerEvent(point: PointData | AccPointData, isFirst: boolean, textCollection: string, headerText: string, firstText?: boolean): boolean;
+    triggerEvent(point: PointData | AccPointData, isFirst: boolean, textCollection: string, firstText?: boolean): boolean;
     removeText(): void;
@@ -60,0 +59,0 @@ stopAnimation(): void;

src/common/user-interaction/tooltip.js

@@ -72,3 +72,8 @@ var __extends = (this && this.__extends) || (function () {
             if (tooltipDiv && !document.getElementById(tooltipDiv.id)) {
-                document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);
+                if (!this.chart.stockChart) {
+                    document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);
+                }
+                else {
+                    document.getElementById(this.chart.stockChart.element.id + '_Secondary_Element').appendChild(tooltipDiv);
+                }
             }
@@ -111,3 +116,3 @@ return true;
     };
-    BaseTooltip.prototype.createTooltip = function (chart, isFirst, location, clipLocation, point, shapes, offset, bounds, extraPoints, templatePoint) {
+    BaseTooltip.prototype.createTooltip = function (chart, isFirst, header, location, clipLocation, point, shapes, offset, bounds, extraPoints, templatePoint) {
         if (extraPoints === void 0) { extraPoints = null; }
@@ -120,3 +125,3 @@ if (templatePoint === void 0) { templatePoint = null; }
                 opacity: chart.tooltip.opacity,
-                header: this.headerText, content: this.text, fill: chart.tooltip.fill, border: chart.tooltip.border,
+                header: header, content: this.text, fill: chart.tooltip.fill, border: chart.tooltip.border,
                 enableAnimation: chart.tooltip.enableAnimation, location: location, shared: chart.tooltip.shared,
@@ -128,3 +133,3 @@ shapes: shapes, clipBounds: this.chart.chartAreaType === 'PolarRadar' ? new ChartLocation(0, 0) : clipLocation,
                 inverted: this.chart.requireInvertedAxis && series.isRectSeries,
-                arrowPadding: this.text.length > 1 ? 0 : 12,
+                arrowPadding: this.text.length > 1 || this.chart.stockChart ? 0 : 12,
                 tooltipRender: function () {
@@ -145,3 +150,3 @@ module.removeHighlight(module.control);
             this.svgTooltip.content = this.text;
-            this.svgTooltip.header = this.headerText;
+            this.svgTooltip.header = header;
             this.svgTooltip.offset = offset;
@@ -155,3 +160,3 @@ this.svgTooltip.palette = this.findPalette();
             this.svgTooltip.clipBounds = this.chart.chartAreaType === 'PolarRadar' ? new ChartLocation(0, 0) : clipLocation;
-            this.svgTooltip.arrowPadding = this.text.length > 1 ? 0 : 12;
+            this.svgTooltip.arrowPadding = this.text.length > 1 || this.chart.stockChart ? 0 : 12;
             this.svgTooltip.dataBind();
@@ -211,7 +216,7 @@ }
     };
-    BaseTooltip.prototype.triggerEvent = function (point, isFirst, textCollection, headerText, firstText) {
+    BaseTooltip.prototype.triggerEvent = function (point, isFirst, textCollection, firstText) {
         if (firstText === void 0) { firstText = true; }
         var argsData = {
             cancel: false, name: tooltipRender, text: textCollection,
-            point: point.point, series: point.series, textStyle: this.textStyle, headerText: headerText
+            point: point.point, series: point.series, textStyle: this.textStyle
         };
@@ -226,3 +231,2 @@ this.chart.trigger(tooltipRender, argsData);
             this.text = this.formattedText;
-            this.headerText = argsData.headerText;
         }
@@ -229,0 +233,0 @@ return !argsData.cancel;

src/common/utils/enum.d.ts

@@ -72,3 +72,5 @@ /**
 /** Used to export a file as pdf format */
-'PDF';
+'PDF' | 
+/** Used to print the chart */
+'Print';
 /**
@@ -87,1 +89,41 @@ * Defines the Text overflow.
 'Trim';
+/**
+ * Defines the interval type of datetime axis. They are
+ * * auto - Define the interval of the axis based on data.
+ * * quarter - Define the interval of the axis based on data.
+ * * years - Define the interval of the axis in years.
+ * * months - Define the interval of the axis in months.
+ * * weeks - Define the interval of the axis in weeks
+ * * days - Define the interval of the axis in days.
+ * * hours - Define the interval of the axis in hours.
+ * * minutes - Define the interval of the axis in minutes.
+ */
+export declare type RangeIntervalType = 
+/** Define the interval of the axis based on data. */
+'Auto' | 
+/** Define the interval of the axis in years. */
+'Years' | 
+/** Define the interval of the axis based on quarter */
+'Quarter' | 
+/** Define the interval of the axis in months. */
+'Months' | 
+/** Define the intervl of the axis in weeks */
+'Weeks' | 
+/** Define the interval of the axis in days. */
+'Days' | 
+/** Define the interval of the axis in hours. */
+'Hours' | 
+/** Define the interval of the axis in minutes. */
+'Minutes' | 
+/** Define the interval of the axis in seconds. */
+'Seconds';
+/**
+ * Period selector position
+ * *Top
+ * *Bottom
+ */
+export declare type PeriodSelectorPosition = 
+/** Top position */
+'Top' | 
+/** Bottom position */
+'Bottom';

src/common/utils/export.d.ts

@@ -6,2 +6,3 @@ import { Chart } from '../../chart/chart';
 import { RangeNavigator } from '../..';
+import { StockChart } from '../../stock-chart/stock-chart';
 export declare class ExportUtils {
@@ -14,3 +15,3 @@ private control;
      */
-    constructor(control: Chart | AccumulationChart | RangeNavigator);
+    constructor(control: Chart | AccumulationChart | RangeNavigator | StockChart);
     /**
@@ -32,3 +33,3 @@ * To print the accumulation and chart elements
      */
-    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, controls?: (Chart | AccumulationChart | RangeNavigator)[], width?: number, height?: number): void;
+    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, controls?: (Chart | AccumulationChart | RangeNavigator | StockChart)[], width?: number, height?: number): void;
     /**
@@ -35,0 +36,0 @@ * To trigger the download element

src/common/utils/helper.d.ts

@@ -14,2 +14,3 @@ import { SvgRenderer, BaseAttibutes } from '@syncfusion/ej2-base';
 import { IShapes } from '../model/interface';
+import { StockChart } from '../../stock-chart/stock-chart';
 /**
@@ -130,2 +131,6 @@ * Methods for calculating the text size.
 /**
+ * Animate the rect element
+ */
+export declare function animateRectElement(element: Element, delay: number, duration: number, currentRect: Rect, previousRect: Rect): void;
+/**
  * Animation after legend click a path
@@ -198,3 +203,3 @@ * @param element element to be animated
  */
-export declare function appendChildElement(parent: Element | HTMLElement, childElement: Element | HTMLElement, redraw?: boolean, isAnimate?: boolean, x?: string, y?: string, start?: ChartLocation, direction?: string): void;
+export declare function appendChildElement(parent: Element | HTMLElement, childElement: Element | HTMLElement, redraw?: boolean, isAnimate?: boolean, x?: string, y?: string, start?: ChartLocation, direction?: string, forceAnimate?: boolean, isRect?: boolean, previousRect?: Rect): void;
 /** @private */
@@ -241,7 +246,7 @@ export declare function getDraggedRectLocation(x1: number, y1: number, x2: number, y2: number, outerRect: Rect): Rect;
 /** @private */
-export declare function textElement(options: TextOption, font: FontModel, color: string, parent: HTMLElement | Element, isMinus?: boolean, redraw?: boolean, isAnimate?: boolean): Element;
+export declare function textElement(options: TextOption, font: FontModel, color: string, parent: HTMLElement | Element, isMinus?: boolean, redraw?: boolean, isAnimate?: boolean, forceAnimate?: boolean): Element;
 /**
  * Method to calculate the width and height of the chart
  */
-export declare function calculateSize(chart: Chart | AccumulationChart | RangeNavigator): void;
+export declare function calculateSize(chart: Chart | AccumulationChart | RangeNavigator | StockChart): void;
 export declare function createSvg(chart: Chart | AccumulationChart | RangeNavigator): void;
@@ -248,0 +253,0 @@ /**

src/components.d.ts

@@ -6,4 +6,5 @@ /**
 export * from './accumulation-chart/accumulation';
+export * from './stock-chart/stock-chart';
 export * from './range-navigator/range-navigator';
 export * from './smithchart/smithchart';
 export * from './sparkline/sparkline';

src/components.js

@@ -6,4 +6,5 @@ /**
 export * from './accumulation-chart/accumulation';
+export * from './stock-chart/stock-chart';
 export * from './range-navigator/range-navigator';
 export * from './smithchart/smithchart';
 export * from './sparkline/sparkline';

src/index.d.ts

@@ -6,2 +6,3 @@ /**
 export * from './accumulation-chart/index';
+export * from './stock-chart/index';
 export * from './common/index';
@@ -8,0 +9,0 @@ export * from './range-navigator/index';

src/index.js

@@ -6,2 +6,3 @@ /**
 export * from './accumulation-chart/index';
+export * from './stock-chart/index';
 export * from './common/index';
@@ -8,0 +9,0 @@ export * from './range-navigator/index';

src/range-navigator/index.d.ts

@@ -7,2 +7,3 @@ /**
 export * from '../common/model/base';
+export * from '../common/period-selector/period-selector';
 export * from '../common/model/base-model';
@@ -23,3 +24,2 @@ export * from './utils/enum';
 export * from '../chart/axis/logarithmic-axis';
-export * from './renderer/period-selector';
 export * from '../range-navigator/user-interaction/tooltip';

src/range-navigator/index.js

@@ -6,2 +6,3 @@ /**
 export * from '../common/model/base';
+export * from '../common/period-selector/period-selector';
 export * from './utils/helper';
@@ -18,3 +19,2 @@ export * from './utils/theme';
 export * from '../chart/axis/logarithmic-axis';
-export * from './renderer/period-selector';
 export * from '../range-navigator/user-interaction/tooltip';

src/range-navigator/model/range-base-model.d.ts

@@ -1,2 +0,2 @@
-import { ChildProperty, Property, Complex, Collection } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { RangeNavigatorType, ThumbType, RangeIntervalType, PeriodSelectorPosition } from '../utils/enum';import { Border, Animation, Font } from '../../common/model/base';import { BorderModel, AnimationModel, FontModel } from '../../common/model/base-model';import { Axis, Rect, TooltipDisplayMode } from '../../index';import { RangeNavigator, DataPoint } from '../index';import { RangeNavigatorTheme  } from '../utils/theme';
+import { ChildProperty, Property, Complex } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { RangeNavigatorType, ThumbType } from '../utils/enum';import { Border, Animation, Font } from '../../common/model/base';import { BorderModel, AnimationModel, FontModel } from '../../common/model/base-model';import { Axis, Rect, TooltipDisplayMode } from '../../index';import { RangeNavigator, DataPoint } from '../index';import { RangeNavigatorTheme  } from '../utils/theme';
 
@@ -137,57 +137,2 @@ /**
 /**
- * Interface for a class Periods
- */
-export interface PeriodsModel {
-
-    /**
-     * IntervalType of button
-     * @default 'Years'
-     */
-    intervalType?: RangeIntervalType;
-
-    /**
-     * Count value for the button
-     * @default 1
-     */
-    interval?: number;
-
-    /**
-     * Text to be displayed on the button
-     * @default null
-     */
-    text?: string;
-
-    /**
-     * To select the default period
-     * @default false
-     */
-    selected?: boolean;
-
-}
-
-/**
- * Interface for a class PeriodSelectorSettings
- */
-export interface PeriodSelectorSettingsModel {
-
-    /**
-     * Height for the period selector
-     * @default 43
-     */
-    height?: number;
-
-    /**
-     * vertical position of the period selector
-     * @default 'Bottom'
-     */
-    position?: PeriodSelectorPosition;
-
-    /**
-     * Buttons
-     */
-    periods?: PeriodsModel[];
-
-}
-
-/**
  * Interface for a class RangeTooltipSettings
@@ -194,0 +139,0 @@ */

src/range-navigator/model/range-base.d.ts

 import { ChildProperty } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
-import { RangeNavigatorType, ThumbType, RangeIntervalType, PeriodSelectorPosition } from '../utils/enum';
+import { RangeNavigatorType, ThumbType } from '../utils/enum';
 import { BorderModel, AnimationModel, FontModel } from '../../common/model/base-model';
-import { ThumbSettingsModel, PeriodsModel } from './range-base-model';
+import { ThumbSettingsModel } from './range-base-model';
 import { Axis, Rect, TooltipDisplayMode } from '../../index';
@@ -132,46 +132,2 @@ import { RangeNavigator, DataPoint } from '../index';
 }
-/**
- * button settings in period selector
- */
-export declare class Periods extends ChildProperty<Periods> {
-    /**
-     * IntervalType of button
-     * @default 'Years'
-     */
-    intervalType: RangeIntervalType;
-    /**
-     * Count value for the button
-     * @default 1
-     */
-    interval: number;
-    /**
-     * Text to be displayed on the button
-     * @default null
-     */
-    text: string;
-    /**
-     * To select the default period
-     * @default false
-     */
-    selected: boolean;
-}
-/**
- * Period Selector Settings
- */
-export declare class PeriodSelectorSettings extends ChildProperty<PeriodSelectorSettings> {
-    /**
-     * Height for the period selector
-     * @default 43
-     */
-    height: number;
-    /**
-     * vertical position of the period selector
-     * @default 'Bottom'
-     */
-    position: PeriodSelectorPosition;
-    /**
-     * Buttons
-     */
-    periods: PeriodsModel[];
-}
 export declare class RangeTooltipSettings extends ChildProperty<RangeTooltipSettings> {
@@ -178,0 +134,0 @@ /**

src/range-navigator/model/range-base.js

@@ -20,3 +20,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { ChildProperty, Property, Complex, Collection } from '@syncfusion/ej2-base';
+import { ChildProperty, Property, Complex } from '@syncfusion/ej2-base';
 import { Border, Animation, Font } from '../../common/model/base';
@@ -115,45 +115,2 @@ import { Rect } from '../../index';
 export { StyleSettings };
-/**
- * button settings in period selector
- */
-var Periods = /** @class */ (function (_super) {
-    __extends(Periods, _super);
-    function Periods() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate([
-        Property('Years')
-    ], Periods.prototype, "intervalType", void 0);
-    __decorate([
-        Property(1)
-    ], Periods.prototype, "interval", void 0);
-    __decorate([
-        Property(null)
-    ], Periods.prototype, "text", void 0);
-    __decorate([
-        Property(false)
-    ], Periods.prototype, "selected", void 0);
-    return Periods;
-}(ChildProperty));
-export { Periods };
-/**
- * Period Selector Settings
- */
-var PeriodSelectorSettings = /** @class */ (function (_super) {
-    __extends(PeriodSelectorSettings, _super);
-    function PeriodSelectorSettings() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate([
-        Property(43)
-    ], PeriodSelectorSettings.prototype, "height", void 0);
-    __decorate([
-        Property('Bottom')
-    ], PeriodSelectorSettings.prototype, "position", void 0);
-    __decorate([
-        Collection([], Periods)
-    ], PeriodSelectorSettings.prototype, "periods", void 0);
-    return PeriodSelectorSettings;
-}(ChildProperty));
-export { PeriodSelectorSettings };
 /*
@@ -160,0 +117,0 @@ * Configures the ToolTips in the chart.

src/range-navigator/model/range-navigator-interface.d.ts

@@ -7,3 +7,2 @@ /**
 import { FontModel, Rect } from '../../chart/index';
-import { ItemModel } from '@syncfusion/ej2-navigations';
 /**
@@ -33,10 +32,2 @@ * interface for load event
 }
-export interface IRangeSelectorRenderEventArgs extends IRangeEventArgs {
-    /** Defines selector collections */
-    selector: ItemModel[];
-    /** enable custom format for calendar */
-    enableCustomFormat: boolean;
-    /** content fro calendar format */
-    content: string;
-}
 /**
@@ -43,0 +34,0 @@ * Interface for label render event

src/range-navigator/range-navigator-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, NotifyPropertyChanges, SvgRenderer, Complex, Collection, Browser } from '@syncfusion/ej2-base';import { EventHandler, remove, ModuleDeclaration, Internationalization } from '@syncfusion/ej2-base';import { Event, EmitType } from '@syncfusion/ej2-base';import { createSvg, Size, Rect, measureText, removeElement } from '../common/utils/helper';import { RangeTooltip } from '../range-navigator/user-interaction/tooltip';import { Border, Margin } from '../common/model/base';import { BorderModel, MarginModel } from '../common/model/base-model';import { RangeSeries } from './renderer/chart-render';import { RangeNavigatorAxis } from './renderer/range-axis';import { RangeNavigatorSeries, StyleSettings, RangeTooltipSettings, PeriodSelectorSettings } from './model/range-base';import { RangeNavigatorSeriesModel, StyleSettingsModel } from './model/range-base-model';import { ThumbSettingsModel, RangeTooltipSettingsModel, PeriodSelectorSettingsModel } from './model/range-base-model';import { RangeSlider } from './renderer/slider';import { AxisPosition, StepLineSeries, ExportType, IPrintEventArgs, RectOption } from '../chart/index';import { Chart, getElement, ChartTheme, LineSeries, AreaSeries } from '../chart/index';import { DateTime, Logarithmic, IResizeRangeNavigatorEventArgs } from '../chart/index';import { ILabelRenderEventsArgs, IRangeTooltipRenderEventArgs } from './model/range-navigator-interface';import { IRangeLoadedEventArgs, IRangeStyle, IChangedEventArgs } from './model/range-navigator-interface';import { getRangeThemeColor } from './utils/theme';import { RangeValueType, LabelAlignment, RangeIntervalType, RangeLabelIntersectAction } from './utils/enum';import { Font } from '../common/model/base';import { FontModel } from '../common/model/base-model';import { MajorGridLines, MajorTickLines, VisibleRangeModel } from '../chart/axis/axis';import { MajorGridLinesModel, MajorTickLinesModel } from '../chart/axis/axis-model';import { RangeNavigatorTheme } from './utils/theme';import { SkeletonType } from '../chart/utils/enum';import { DataManager, Query } from '@syncfusion/ej2-data';import { Double } from '../chart/axis/double-axis';import { Data } from '../common/model/data';import { ExportUtils } from '../common/utils/export';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { PeriodSelector } from './renderer/period-selector';import { AccumulationChart } from '../accumulation-chart/index';import { IRangeSelectorRenderEventArgs } from './model/range-navigator-interface';
+import { Component, Property, NotifyPropertyChanges, SvgRenderer, Complex, Collection, Browser } from '@syncfusion/ej2-base';import { EventHandler, remove, ModuleDeclaration, Internationalization } from '@syncfusion/ej2-base';import { Event, EmitType } from '@syncfusion/ej2-base';import { createSvg, Size, Rect, measureText, removeElement } from '../common/utils/helper';import { RangeTooltip } from '../range-navigator/user-interaction/tooltip';import { Border, Margin, PeriodSelectorSettings } from '../common/model/base';import { BorderModel, MarginModel, PeriodSelectorSettingsModel } from '../common/model/base-model';import { RangeSeries } from './renderer/chart-render';import { RangeNavigatorAxis } from './renderer/range-axis';import { RangeNavigatorSeries, StyleSettings, RangeTooltipSettings } from './model/range-base';import { RangeNavigatorSeriesModel, StyleSettingsModel } from './model/range-base-model';import { ThumbSettingsModel, RangeTooltipSettingsModel } from './model/range-base-model';import { RangeSlider } from './renderer/slider';import { AxisPosition, StepLineSeries, ExportType, IPrintEventArgs, RectOption } from '../chart/index';import { Chart, getElement, ChartTheme, LineSeries, AreaSeries } from '../chart/index';import { DateTime, Logarithmic, IResizeRangeNavigatorEventArgs } from '../chart/index';import { ILabelRenderEventsArgs, IRangeTooltipRenderEventArgs } from './model/range-navigator-interface';import { IRangeLoadedEventArgs, IRangeStyle, IChangedEventArgs } from './model/range-navigator-interface';import { getRangeThemeColor } from './utils/theme';import { RangeValueType, LabelAlignment, RangeLabelIntersectAction } from './utils/enum';import { Font } from '../common/model/base';import { FontModel } from '../common/model/base-model';import { MajorGridLines, MajorTickLines, VisibleRangeModel } from '../chart/axis/axis';import { MajorGridLinesModel, MajorTickLinesModel } from '../chart/axis/axis-model';import { RangeNavigatorTheme } from './utils/theme';import { SkeletonType } from '../chart/utils/enum';import { DataManager, Query } from '@syncfusion/ej2-data';import { Double } from '../chart/axis/double-axis';import { Data } from '../common/model/data';import { ExportUtils } from '../common/utils/export';import { RangeIntervalType } from '../common/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { PeriodSelector } from '../common/period-selector/period-selector';import { AccumulationChart } from '../accumulation-chart/index';import { IRangeSelectorRenderEventArgs } from '../common/model/interface';import { StockChart } from '../stock-chart/stock-chart';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

src/range-navigator/range-navigator.d.ts

@@ -7,7 +7,7 @@ import { Component, SvgRenderer } from '@syncfusion/ej2-base';
 import { RangeTooltip } from '../range-navigator/user-interaction/tooltip';
-import { BorderModel, MarginModel } from '../common/model/base-model';
+import { BorderModel, MarginModel, PeriodSelectorSettingsModel } from '../common/model/base-model';
 import { RangeSeries } from './renderer/chart-render';
 import { RangeNavigatorAxis } from './renderer/range-axis';
 import { RangeNavigatorSeriesModel, StyleSettingsModel } from './model/range-base-model';
-import { RangeTooltipSettingsModel, PeriodSelectorSettingsModel } from './model/range-base-model';
+import { RangeTooltipSettingsModel } from './model/range-base-model';
 import { RangeSlider } from './renderer/slider';
@@ -19,3 +19,3 @@ import { AxisPosition, StepLineSeries, ExportType, IPrintEventArgs } from '../chart/index';
 import { IRangeLoadedEventArgs, IRangeStyle, IChangedEventArgs } from './model/range-navigator-interface';
-import { RangeValueType, LabelAlignment, RangeIntervalType, RangeLabelIntersectAction } from './utils/enum';
+import { RangeValueType, LabelAlignment, RangeLabelIntersectAction } from './utils/enum';
 import { FontModel } from '../common/model/base-model';
@@ -27,6 +27,8 @@ import { MajorGridLinesModel, MajorTickLinesModel } from '../chart/axis/axis-model';
 import { Data } from '../common/model/data';
+import { RangeIntervalType } from '../common/utils/enum';
 import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
-import { PeriodSelector } from './renderer/period-selector';
+import { PeriodSelector } from '../common/period-selector/period-selector';
 import { AccumulationChart } from '../accumulation-chart/index';
-import { IRangeSelectorRenderEventArgs } from './model/range-navigator-interface';
+import { IRangeSelectorRenderEventArgs } from '../common/model/interface';
+import { StockChart } from '../stock-chart/stock-chart';
 /**
@@ -332,2 +334,4 @@ * Range Navigator
     private chartid;
+    /** @private */
+    stockChart: StockChart;
     /**
@@ -334,0 +338,0 @@ * Constructor for creating the widget

src/range-navigator/range-navigator.js

@@ -24,6 +24,6 @@ var __extends = (this && this.__extends) || (function () {
 import { createSvg, Size, Rect, measureText, removeElement } from '../common/utils/helper';
-import { Border, Margin } from '../common/model/base';
+import { Border, Margin, PeriodSelectorSettings } from '../common/model/base';
 import { RangeSeries } from './renderer/chart-render';
 import { RangeNavigatorAxis } from './renderer/range-axis';
-import { RangeNavigatorSeries, StyleSettings, RangeTooltipSettings, PeriodSelectorSettings } from './model/range-base';
+import { RangeNavigatorSeries, StyleSettings, RangeTooltipSettings } from './model/range-base';
 import { RangeSlider } from './renderer/slider';
@@ -163,2 +163,3 @@ import { RectOption } from '../chart/index';
         this.rangeAxis.renderAxisLabels();
+        this.chartSeries.appendSeriesElements(this);
         this.createSecondaryElement();
@@ -168,3 +169,5 @@ this.setSliderValue();
         this.renderSlider();
-        this.element.appendChild(this.svgObject);
+        if (!this.stockChart) {
+            this.element.appendChild(this.svgObject);
+        }
         this.trigger('loaded', { rangeNavigator: this });
@@ -215,3 +218,3 @@ this.rangeSlider.setSlider(this.startValue, this.endValue, false, this.tooltip.enable && this.tooltip.displayMode === 'Always');
             }
-            if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode) {
+            if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode && !this.stockChart) {
                 remove(this.svgObject);
@@ -285,2 +288,10 @@ }
             }
+            if (_this.stockChart) {
+                for (var i = 0; i < arg.rangeNavigator.series.length; i++) {
+                    arg.rangeNavigator.series[i].dataSource = _this.stockChart.tempDataSource[i];
+                }
+                if (_this.stockChart.dataSource) {
+                    arg.rangeNavigator.dataSource = _this.stockChart.tempDataSource[0];
+                }
+            }
             _this.createRangeSvg();
@@ -381,3 +392,4 @@ arg.currentSize = _this.availableSize;
         var rect = this.element.getBoundingClientRect();
-        var svgRect = getElement(this.element.id + '_svg').getBoundingClientRect();
+        var svgRect = !this.stockChart ? getElement(this.element.id + '_svg').getBoundingClientRect() :
+            getElement(this.element.id).getBoundingClientRect();
         return (pageX - rect.left) - Math.max(svgRect.left - rect.left, 0);
@@ -384,0 +396,0 @@ };

src/range-navigator/renderer/chart-render.d.ts

@@ -19,2 +19,3 @@ import { Axis } from '../../chart/index';
     private seriesLength;
+    private chartGroup;
     constructor(range: RangeNavigator);
@@ -50,2 +51,6 @@ /**
     renderSeries(control: RangeNavigator): void;
+    /**
+     * Append series elements in element
+     */
+    appendSeriesElements(control: RangeNavigator): void;
     private createSeriesElement;
@@ -52,0 +57,0 @@ private calculateGroupingBounds;

src/range-navigator/renderer/chart-render.js

@@ -175,3 +175,3 @@ var __extends = (this && this.__extends) || (function () {
         var _this = this;
-        var chartGroup = control.renderer.createGroup({ id: control.element.id + '_chart' });
+        this.chartGroup = control.renderer.createGroup({ id: control.element.id + '_chart' });
         var colors = getSeriesColor(control.theme);
@@ -186,11 +186,26 @@ control.series.map(function (series, index) {
             _this.createSeriesElement(control, series, index);
-            control[firstToLowerCase(series.type) + 'SeriesModule'].render(series, _this.xAxis, _this.yAxis, false);
-            chartGroup.appendChild(series.seriesElement);
+            if (control[firstToLowerCase(series.type) + 'SeriesModule']) {
+                control[firstToLowerCase(series.type) + 'SeriesModule'].render(series, _this.xAxis, _this.yAxis, false);
+            }
+            else {
+                control['line' + 'SeriesModule'].render(series, _this.xAxis, _this.yAxis, false);
+            }
+            _this.chartGroup.appendChild(series.seriesElement);
             if (series.animation.enable && control.animateSeries) {
-                control[firstToLowerCase(series.type) + 'SeriesModule'].doAnimation(series);
+                if (control[firstToLowerCase(series.type) + 'SeriesModule']) {
+                    control[firstToLowerCase(series.type) + 'SeriesModule'].doAnimation(series);
+                }
+                else {
+                    //control['line' + 'SeriesModule'].doAnimation(series);
+                }
             }
         });
-        control.svgObject.appendChild(chartGroup);
+    };
+    /**
+     * Append series elements in element
+     */
+    RangeSeries.prototype.appendSeriesElements = function (control) {
+        control.svgObject.appendChild(this.chartGroup);
         if (control.series.length) {
-            this.drawSeriesBorder(control, chartGroup);
+            this.drawSeriesBorder(control, this.chartGroup);
         }
@@ -228,6 +243,8 @@ };
     RangeSeries.prototype.drawSeriesBorder = function (control, chartElement) {
+        var start = control.stockChart ? 'M' : 'L';
+        var close = control.stockChart ? '' : 'Z';
         var options = new PathOption(control.element.id + '_SeriesBorder', 'transparent', control.navigatorBorder.width, control.navigatorBorder.color, 1, '', ('M ' + (control.bounds.x) + ' ' + (control.bounds.y) +
             ' L ' + (control.bounds.x + control.bounds.width) + ' ' + control.bounds.y +
-            ' L ' + (control.bounds.x + control.bounds.width) + ' ' + (control.bounds.y + control.bounds.height) +
-            ' L ' + (control.bounds.x) + ' ' + (control.bounds.y + control.bounds.height) + 'Z'));
+            start + (control.bounds.x + control.bounds.width) + ' ' + (control.bounds.y + control.bounds.height) +
+            ' L ' + (control.bounds.x) + ' ' + (control.bounds.y + control.bounds.height) + close));
         var htmlObject = control.renderer.drawPath(options);
@@ -234,0 +251,0 @@ control.svgObject.appendChild(htmlObject);

src/range-navigator/renderer/range-axis.d.ts

 import { RangeNavigator } from '../range-navigator';
 import { DateTime } from '../../chart/index';
-import { RangeIntervalType } from '..//utils/enum';
+import { RangeIntervalType } from '../../common/utils/enum';
 import { VisibleLabels } from '../../chart/index';
@@ -5,0 +5,0 @@ /**

src/range-navigator/renderer/slider.d.ts

@@ -107,3 +107,3 @@ import { RangeNavigator } from '../index';
      */
-    performAnimation(start: number, end: number, control: RangeNavigator): void;
+    performAnimation(start: number, end: number, control: RangeNavigator, animationDuration?: number): void;
     /**
@@ -110,0 +110,0 @@ * Mouse Cancel Handler

src/range-navigator/renderer/slider.js

@@ -1,2 +0,2 @@
-import { Browser, createElement } from '@syncfusion/ej2-base';
+import { Browser, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { RectOption } from '../../common/utils/helper';
@@ -299,7 +299,7 @@ import { getXLocation, getExactData, getRangeValueXByPoint, getNearestValue } from '../utils/helper';
         else if (id.indexOf(this.elementId + '_AxisLabel_') > -1 && this.control.valueType === 'DateTime') {
-            this.labelIndex = +id.split('_')[2];
+            this.labelIndex = +id.substring(id.lastIndexOf('_') + 1, id.length);
             return 'firstLevelLabels';
         }
         else if (id.indexOf(this.elementId + '_SecondaryLabel') > -1 && this.control.valueType === 'DateTime') {
-            this.labelIndex = +id.split('_')[2];
+            this.labelIndex = +id.substring(id.lastIndexOf('_') + 1, id.length);
             return 'secondLevelLabels';
@@ -325,2 +325,5 @@ }
         var endbledTooltip = control.tooltip.enable;
+        if (control.stockChart) {
+            control.stockChart.zoomChange = false;
+        }
         if (this.currentSlider === 'UnSelectedArea') {
@@ -389,3 +392,3 @@ var value = void 0;
      */
-    RangeSlider.prototype.performAnimation = function (start, end, control) {
+    RangeSlider.prototype.performAnimation = function (start, end, control, animationDuration) {
         var _this = this;
@@ -397,3 +400,3 @@ var currentStart = this.currentStart;
         new Animation({}).animate(createElement('div'), {
-            duration: this.control.animationDuration,
+            duration: !isNullOrUndefined(animationDuration) ? animationDuration : this.control.animationDuration,
             progress: function (args) {
@@ -400,0 +403,0 @@ _this.setSlider(linear(args.timeStamp, 0, start - currentStart, args.duration) + currentStart, linear(args.timeStamp, 0, end - currentEnd, args.duration) + currentEnd, !isDeffered, enableTooltip);

src/range-navigator/user-interaction/tooltip.js

@@ -80,3 +80,11 @@ import { Tooltip as SVGTooltip } from '@syncfusion/ej2-svg-base';
             element.setAttribute('style', 'pointer-events:none; position:absolute;z-index: 1');
-            getElement(this.elementId + '_Secondary_Element').appendChild(element);
+            if (!this.control.stockChart) {
+                getElement(this.elementId + '_Secondary_Element').appendChild(element);
+            }
+            else {
+                var stockChart = this.control.stockChart;
+                getElement(stockChart.element.id + '_Secondary_Element').appendChild(element);
+                element.style.transform = 'translateY(' + (((stockChart.availableSize.height - stockChart.toolbarHeight - 80) +
+                    stockChart.toolbarHeight) + stockChart.titleSize.height) + 'px)';
+            }
             return element;
@@ -83,0 +91,0 @@ }

src/range-navigator/utils/enum.d.ts

@@ -16,32 +16,2 @@ /**
 /**
- * Defines the interval type of datetime axis. They are
- * * auto - Define the interval of the axis based on data.
- * * quarter - Define the interval of the axis based on data.
- * * years - Define the interval of the axis in years.
- * * months - Define the interval of the axis in months.
- * * weeks - Define the interval of the axis in weeks
- * * days - Define the interval of the axis in days.
- * * hours - Define the interval of the axis in hours.
- * * minutes - Define the interval of the axis in minutes.
- */
-export declare type RangeIntervalType = 
-/** Define the interval of the axis based on data. */
-'Auto' | 
-/** Define the interval of the axis in years. */
-'Years' | 
-/** Define the interval of the axis based on quarter */
-'Quarter' | 
-/** Define the interval of the axis in months. */
-'Months' | 
-/** Define the intervl of the axis in weeks */
-'Weeks' | 
-/** Define the interval of the axis in days. */
-'Days' | 
-/** Define the interval of the axis in hours. */
-'Hours' | 
-/** Define the interval of the axis in minutes. */
-'Minutes' | 
-/** Define the interval of the axis in seconds. */
-'Seconds';
-/**
  * It defines type of thump in the range navigator.
@@ -98,12 +68,2 @@ * * circle
 /**
- * Period selector position
- * *Top
- * *Bottom
- */
-export declare type PeriodSelectorPosition = 
-/** Top position */
-'Top' | 
-/** Bottom position */
-'Bottom';
-/**
  * Defines the intersect action. They are
@@ -110,0 +70,0 @@ * * none - Shows all the labels.

src/range-navigator/utils/theme.js

@@ -52,3 +52,3 @@ import { Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
             break;
-        case 'Highcontrast':
+        case 'HighcontrastLight':
             style = {
@@ -71,2 +71,23 @@ gridLineColor: '#bdbdbd',
             break;
+        case 'MaterialDark':
+        case 'FabricDark':
+        case 'BootstrapDark':
+        case 'Highcontrast':
+            style = {
+                gridLineColor: '#4A4848',
+                axisLineColor: '#969696',
+                labelFontColor: '#DADADA',
+                unselectedRectColor: range.series.length ? 'rgba(43, 43, 43, 0.6)' : '#514F4F',
+                thumpLineColor: '#969696',
+                thumbBackground: '#333232',
+                gripColor: '#DADADA',
+                background: '#000000',
+                thumbHoverColor: '#BFBFBF',
+                selectedRegionColor: range.series.length ? 'rgba(22, 22, 22, 0.6)' : '#FFD939',
+                tooltipBackground: '#F4F4F4',
+                tooltipFontColor: '#282727',
+                thumbWidth: thumbWidth,
+                thumbHeight: thumbHeight
+            };
+            break;
         default:
@@ -73,0 +94,0 @@ style.selectedRegionColor = range.series.length ? 'transparent' : '#FF4081';

src/smithchart/model/theme.js

@@ -47,12 +47,12 @@ export var Theme;
     var palette;
-    switch (theme) {
-        case 'Highcontrast':
+    switch (theme.toLowerCase()) {
+        case 'highcontrastlight':
             palette = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',
                 '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];
             break;
-        case 'Fabric':
+        case 'fabric':
             palette = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
                 '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300'];
             break;
-        case 'Bootstrap':
+        case 'bootstrap':
             palette = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',
@@ -71,4 +71,5 @@ '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];
     var style;
-    switch (theme) {
-        case 'Highcontrast':
+    var themes = theme.toLowerCase();
+    switch (themes) {
+        case 'highcontrast':
             style = {
@@ -90,2 +91,21 @@ axisLabel: '#ffffff',
             break;
+        case 'materialdark':
+        case 'bootstrapdark':
+        case 'fabricdark':
+            style = {
+                axisLabel: '#DADADA',
+                axisLine: ' #6F6C6C',
+                majorGridLine: '#414040',
+                minorGridLine: '#514F4F',
+                chartTitle: '#ffffff',
+                legendLabel: '#DADADA',
+                background: '#000000',
+                areaBorder: ' #9A9A9A',
+                tooltipFill: '#F4F4F4',
+                dataLabel: '#DADADA',
+                tooltipBoldLabel: '#282727',
+                tooltipLightLabel: '#333232',
+                tooltipHeaderLine: '#9A9A9A'
+            };
+            break;
         default:
@@ -92,0 +112,0 @@ style = {

src/smithchart/smithchart.js

@@ -146,3 +146,3 @@ var __extends = (this && this.__extends) || (function () {
         var border = this.border;
-        var color = this.theme === 'Highcontrast' ? '#000000' : '#FFFFFF';
+        var color = this.theme.toLowerCase() === 'highcontrast' ? '#000000' : '#FFFFFF';
         this.background = this.background ? this.background : color;
@@ -149,0 +149,0 @@ var borderRect = new RectOption(this.element.id + '_SmithchartBorder', this.background, border, 1, new SmithchartRect(border.width / 2, border.width / 2, this.availableSize.width - border.width, this.availableSize.height - border.width));

src/smithchart/utils/enum.d.ts

@@ -13,4 +13,12 @@ /**
 'Bootstrap' | 
+/**  Render a smithchart with Highcontrast Light theme. */
+'HighcontrastLight' | 
+/**  Render a smithchart with Material Dark theme. */
+'MaterialDark' | 
+/**  Render a smithchart with Fabric Dark theme. */
+'FabricDark' | 
 /**  Render a smithchart with Highcontrast theme. */
-'Highcontrast';
+'Highcontrast' | 
+/**  Render a smithchart with Bootstrap Dark theme. */
+'BootstrapDark';
 /**
@@ -17,0 +25,0 @@ * Defines render type of smithchart. They are

src/sparkline/model/enum.d.ts

@@ -53,2 +53,3 @@ /**
  * * HighContrast - Render a sparkline with HighContrast theme
+ * * Dark - Render a sparkline with Dark theme
  */
@@ -62,4 +63,12 @@ export declare type SparklineTheme =
 'Bootstrap' | 
-/**  Render a sparkline with HighContrast theme. */
-'Highcontrast';
+/**  Render a sparkline with HighContrast Light theme. */
+'HighcontrastLight' | 
+/**  Render a sparkline with Material Dark theme. */
+'MaterialDark' | 
+/**  Render a sparkline with Fabric Dark theme. */
+'FabricDark' | 
+/**  Render a sparkline with Highcontrast theme. */
+'Highcontrast' | 
+/**  Render a sparkline with Bootstrap Dark theme. */
+'BootstrapDark';
 /**
@@ -66,0 +75,0 @@ * Defines edge data label placement for datalabel, if exceeds the sparkline area horizontally.

src/sparkline/rendering/sparkline-renderer.js

@@ -138,4 +138,6 @@ import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';
         var spark = this.sparkline;
-        var g = this.sparkline.renderer.createGroup({ id: spark.element.id + '_sparkline_g',
-            'clip-path': 'url(#' + this.clipId + ')' });
+        var g = this.sparkline.renderer.createGroup({
+            id: spark.element.id + '_sparkline_g',
+            'clip-path': 'url(#' + this.clipId + ')'
+        });
         var pathOption = new PathOption(spark.element.id + '_sparkline_line', 'transparent', args.lineWidth, args.fill, spark.opacity);
@@ -255,4 +257,6 @@ var d = '';
         var spark = this.sparkline;
-        var group = this.sparkline.renderer.createGroup({ id: spark.element.id + '_sparkline_g',
-            'clip-path': 'url(#' + this.clipId + ')' });
+        var group = this.sparkline.renderer.createGroup({
+            id: spark.element.id + '_sparkline_g',
+            'clip-path': 'url(#' + this.clipId + ')'
+        });
         var pathOption = new PathOption(spark.element.id + '_sparkline_area', args.fill, 0, 'transparent', spark.opacity);
@@ -286,4 +290,6 @@ var d = '';
         var locations = extend([], [], points);
-        var group = this.sparkline.renderer.createGroup({ id: spark.element.id + '_sparkline_g',
-            'clip-path': 'url(#' + this.clipId + ')' });
+        var group = this.sparkline.renderer.createGroup({
+            id: spark.element.id + '_sparkline_g',
+            'clip-path': 'url(#' + this.clipId + ')'
+        });
         var lowPos;
@@ -327,4 +333,6 @@ var highPos;
         var spark = this.sparkline;
-        var group = this.sparkline.renderer.createGroup({ id: spark.element.id + '_sparkline_g',
-            'clip-path': 'url(#' + this.clipId + ')' });
+        var group = this.sparkline.renderer.createGroup({
+            id: spark.element.id + '_sparkline_g',
+            'clip-path': 'url(#' + this.clipId + ')'
+        });
         var id = spark.element.id + '_sparkline_winloss_';
@@ -442,3 +450,5 @@ var options = new RectOption(id, '', args.border, spark.opacity, null);
         var dataLabel = spark.dataLabelSettings;
-        var color = (spark.theme === 'Highcontrast') ? '#FFFFFF' : '#424242';
+        var theme = spark.theme.toLowerCase();
+        var color = theme.indexOf('dark') > -1 || theme === 'highcontrast'
+            ? '#FFFFFF' : '#424242';
         color = (dataLabel.textStyle.color) ? dataLabel.textStyle.color : color;
@@ -450,4 +460,6 @@ if ((spark.type === 'WinLoss' || !dataLabel.visible.length)) {
         var id = spark.element.id + '_sparkline_label_';
-        var group = this.sparkline.renderer.createGroup({ id: spark.element.id + '_sparkline_label_g',
-            style: 'pointer-events: none;' });
+        var group = this.sparkline.renderer.createGroup({
+            id: spark.element.id + '_sparkline_label_g',
+            style: 'pointer-events: none;'
+        });
         var g;
@@ -655,2 +667,3 @@ var temp;
         var value = axis.value;
+        var theme = model.theme.toLowerCase();
         if (model.type !== 'Pie') {
@@ -664,3 +677,3 @@ this.maxLength = maxPointsLength;
             min = isNullOrUndefined(axis.minY) ? min : axis.minY;
-            var color = (model.theme === 'Highcontrast') ? '#FFFFFF' : '#000000';
+            var color = theme.indexOf('dark') > -1 || theme === 'highcontrast' ? '#FFFFFF' : '#000000';
             color = (axis.lineSettings.color) ? axis.lineSettings.color : color;
@@ -736,4 +749,6 @@ var eventArgs = {
                         ((height * winLossFactor) - (height / drawHeightFactor));
-                    point = { x: x1, y: y2, height: (y !== value) ? (height / 4) : height / 20, width: colWidth,
-                        markerPosition: (y2 > y1) ? (y1 + Math.abs(y2 - y1)) : y2 };
+                    point = {
+                        x: x1, y: y2, height: (y !== value) ? (height / 4) : height / 20, width: colWidth,
+                        markerPosition: (y2 > y1) ? (y1 + Math.abs(y2 - y1)) : y2
+                    };
                 }
@@ -740,0 +755,0 @@ else {

src/sparkline/rendering/sparkline-tooltip.js

@@ -90,4 +90,5 @@ import { PathOption, drawPath, getIdElement, Rect, withInBounds } from '../utils/helper';
         var spark = this.sparkline;
+        var theme = spark.theme.toLowerCase();
         var tracker = spark.tooltipSettings.trackLineSettings;
-        var color = (spark.theme === 'Highcontrast') ? '#FFFFFF' : '#000000';
+        var color = (theme.indexOf('dark') > -1 ? '#FFFFFF' : '#000000');
         color = (tracker.color) ? tracker.color : color;
@@ -127,4 +128,6 @@ if (!tracker.visible || spark.type === 'Pie') {
         if (isNullOrUndefined(div)) {
-            div = createElement('div', { id: spark.element.id + '_sparkline_tooltip_div',
-                styles: 'pointer-events: none; position: absolute;z-index:1;' });
+            div = createElement('div', {
+                id: spark.element.id + '_sparkline_tooltip_div',
+                styles: 'pointer-events: none; position: absolute;z-index:1;'
+            });
             getIdElement(spark.element.id + '_Secondary_Element').appendChild(div);
@@ -131,0 +134,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17953275

increased by8.9%

Number of package files

355

increased by4.72%

Lines of code

138700

increased by10.14%

Worsened metrics

Number of low quality alerts

3

increased by50%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@syncfusion/ej2-base@~16.4.40-beta

• Updated@syncfusion/ej2-calendars@~16.4.40-beta

• Updated@syncfusion/ej2-compression@~16.4.40-beta

• Updated@syncfusion/ej2-data@~16.4.40-beta

• Updated@syncfusion/ej2-file-utils@~16.4.40-beta

• Updated@syncfusion/ej2-navigations@~16.4.40-beta

• Updated@syncfusion/ej2-pdf-export@~16.4.40-beta

• Updated@syncfusion/ej2-svg-base@~16.4.40-beta