@syncfusion/ej2-charts - npm Package Compare versions

Comparing version 16.1.48 to 16.2.41

CHANGELOG.md

@@ -13,4 +13,70 @@ <!-- markdownlint-disable MD010 -->
 
+#### Breaking Changes
+
+- Newly Added Range Navigator component in charts package requires Navigations and Calendars dependency, so its mandatory to include the `ej2-navigations.umd.min.js` and `ej2-calendars.umd.min.js` in system.js configuration if you are using system.js module loader.
+- SVG tooltip has been moved as a separate package, so the charts require SVG-base dependency to show the tooltip. so its mandatory to include the `ej2-svg-base.umd.min.js` in system.js configuration if you are using system.js module loader.
+
 #### Bug Fixes
 
+- Now, tooltip is working properly when the container for chart is initialized without ID.
+- The performance issue with loading 800 series in chart has been fixed.
+- Loaded event is now triggering after legend click.
+
+#### New Features
+
+- Histogram series type has been added to chart.
+- Scrollbar feature has been added to zoom and pan the chart.
+
+### Accumulation Chart
+
+#### Breaking Changes
+
+- Newly Added Range Navigator component in charts package requires Navigations and Calendars dependency, so its mandatory to include the `ej2-navigations.umd.min.js` and `ej2-calendars.umd.min.js` in system.js configuration if you are using system.js module loader.
+- SVG tooltip has been moved as a separate package, so the charts require SVG-base dependency to show the tooltip. so its mandatory to include the `ej2-svg-base.umd.min.js` in system.js configuration if you are using system.js module loader.
+
+#### New Features
+
+- Support has been provided to group the pie slice based on count.
+
+### RangeNavigator
+
+The range navigator provides an intuitive interface for selecting a smaller range from a larger collection. It is commonly used in financial dashboards to filter a date range for which the data needs to be visualized. This control easily combines with other controls such as Chart, Data Grid, etc., to create rich and powerful dashboards.
+
+- **Data Binding** - Binds the data with local and remote data source.
+- **Chart** - To represent the data in RangeNavigator and its supports line, step line and area type series.
+- **Slider** - To handle the selected data in RangeNavigator.
+- **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.
+- **Light Weight** - Supports light weight RN to navigate through the data based on range.
+- **Tooltip** - Supports tooltip for the selected data.
+- **Export** - Supports to print the range navigator directly from the browser and exports the range navigator in both JPEG and PNG format.
+
+### Sparkline
+
+Sparklines are easy to interpret and also it conveys much more information to the user by visualizing the data in a small amount of space.
+
+- **Types** - Sparklines had five type of series. Line, Area, Column and WinLoss and Pie.
+- **Marker** - Sparklines support the marker feature.
+- **DataLabel** - Sparklines support the datalabel feature. It uses to identify the x and y value for the current point.
+- **Range Band** - Sparklines support the rangeband feature. It used to denote the certain range sparkline points.
+- **Tooltip** - Sparklines support the tooltip feature. It used to interact with points to get more about current point.
+
+### Smith Chart
+
+Smith chart is one of the most useful data visualization tools for high frequency circuit applications. It contains two sets of circles to plot the parameters of transmission lines.
+
+- **Types** - Smithchart had two type of rendering. Impedance and Admittance.
+- **Marker** - Smithchart supports the marker feature. It used to identify point position.
+- **Datalabel** - Smithchart supports the datalabel feature. It used to identify point values.
+- **Legend** - Smithchart supports the legend feature. It used to denote each series names.
+- **Tooltip** - Smithchart supports the tooltip feature. It used to get point values on user interaction like mouse and touch actions.
+- **Print and Export** - Smithchart supports printing and exporting as different file types.
+
+## 16.1.48 (2018-06-13)
+
+### Chart
+
+#### Bug Fixes
+
 - Mean value for Box and Whisker is now rendering properly with multiple series.
@@ -57,3 +123,3 @@
 
-## 16.1.24
+## 16.1.24 (2018-02-22)
 
@@ -60,0 +126,0 @@ ### Common

dist/global/index.d.ts

@@ -1,16 +0,10 @@
-/*!
-*  filename: index.d.ts
-*  version : 16.1.48
-*  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
-*  Use of this code is subject to the terms of our license.
-*  A copy of the current license can be obtained at any time by e-mailing
-*  [e-mail]. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _charts from '@syncfusion/ej2-charts';
 import * as _base from '@syncfusion/ej2-base';
 import * as _data from '@syncfusion/ej2-data';
+import * as _svgbase from '@syncfusion/ej2-svg-base';
 import * as _pdfexport from '@syncfusion/ej2-pdf-export';
 import * as _fileutils from '@syncfusion/ej2-file-utils';
 import * as _compression from '@syncfusion/ej2-compression';
+import * as _navigations from '@syncfusion/ej2-navigations';
+import * as _calendars from '@syncfusion/ej2-calendars';
 
@@ -21,5 +15,8 @@ export declare namespace ej {
     const data: typeof _data;
+    const svgbase: typeof _svgbase;
     const pdfexport: typeof _pdfexport;
     const fileutils: typeof _fileutils;
     const compression: typeof _compression;
+    const navigations: typeof _navigations;
+    const calendars: typeof _calendars;
 }

package.json

 {
   "name": "@syncfusion/ej2-charts",
-  "version": "16.1.48",
+  "version": "16.2.41",
   "description": "Essential JS 2 Chart Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-charts.umd.min.js",
-  "module": "./dist/es6/ej2-charts.es5.js",
-  "es2015": "./dist/es6/ej2-charts.es2015.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.1.38",
-    "@syncfusion/ej2-data": "~16.1.42",
-    "@syncfusion/ej2-pdf-export": "~16.1.37",
-    "@syncfusion/ej2-file-utils": "~16.1.37",
-    "@syncfusion/ej2-compression": "~16.1.37"
+    "@syncfusion/ej2-base": "~16.2.41",
+    "@syncfusion/ej2-data": "~16.2.41",
+    "@syncfusion/ej2-svg-base": "~16.2.41",
+    "@syncfusion/ej2-pdf-export": "~16.2.41",
+    "@syncfusion/ej2-file-utils": "~16.2.41",
+    "@syncfusion/ej2-compression": "~16.2.41",
+    "@syncfusion/ej2-navigations": "~16.2.41",
+    "@syncfusion/ej2-calendars": "~16.2.41"
   },
@@ -32,3 +32,6 @@ "devDependencies": {
     "url": "https://github.com/syncfusion/ej2-charts.git"
-  }
+  },
+  "main": "./dist/ej2-charts.umd.min.js",
+  "module": "./dist/es6/ej2-charts.es5.js",
+  "es2015": "./dist/es6/ej2-charts.es2015.js"
 }

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, createElement } 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, IAccResizeEventArgs } from './model/pie-interface';import { Theme, getThemeColor } from '../common/model/theme';import { ILegendRenderEventArgs, IMouseEventArgs, IPointEventArgs, 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 } 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 } from '../common/utils/enum';import { getTitle } from '../common/utils/helper';import {Index} from '../common/model/base';import { IThemeStyle } from '../index';
+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, createElement } 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 } 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 } 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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -244,2 +244,3 @@
      * @private
+     * @aspType string
      */
@@ -246,0 +247,0 @@

src/accumulation-chart/accumulation.d.ts

@@ -11,4 +11,5 @@ /**
 import { IAccSeriesRenderEventArgs, IAccTextRenderEventArgs, IAccTooltipRenderEventArgs } from './model/pie-interface';
-import { IAccAnimationCompleteEventArgs, IAccPointRenderEventArgs, IAccLoadedEventArgs, IAccResizeEventArgs } from './model/pie-interface';
-import { ILegendRenderEventArgs, IMouseEventArgs, IPointEventArgs, IAnnotationRenderEventArgs } from '../common/model/interface';
+import { IAccAnimationCompleteEventArgs, IAccPointRenderEventArgs, IAccLoadedEventArgs } from './model/pie-interface';
+import { ILegendRenderEventArgs, IMouseEventArgs, IPointEventArgs } from '../common/model/interface';
+import { IAnnotationRenderEventArgs } from '../common/model/interface';
 import { FontModel, MarginModel, BorderModel, IndexesModel, TooltipSettingsModel } from '../common/model/base-model';
@@ -31,3 +32,4 @@ import { AccumulationSeriesModel } from './model/acc-base-model';
 import { ExportType } from '../common/utils/enum';
-import { IThemeStyle } from '../index';
+import { IThemeStyle, Chart, RangeNavigator } from '../index';
+import { IAccResizeEventArgs } from './model/pie-interface';
 /**
@@ -266,2 +268,3 @@ * Represents the AccumulationChart control.
      * @private
+     * @aspType string
      */
@@ -301,2 +304,3 @@ private currencyCode;
     themeStyle: IThemeStyle;
+    private chartid;
     /**
@@ -350,5 +354,5 @@ * Constructor for creating the AccumulationChart widget
     /**
-     * Handles the export method for chart control.
+     * Handles the export method for accumulation control.
      */
-    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation): void;
+    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, controls?: (Chart | AccumulationChart | RangeNavigator)[], width?: number, height?: number): void;
     /**
@@ -417,3 +421,3 @@ * Handles the print method for accumulation chart control.
      */
-    private processData();
+    private processData(render?);
     /**
@@ -420,0 +424,0 @@ * To refresh the accumulation chart

src/accumulation-chart/accumulation.js

@@ -25,2 +25,3 @@ var __extends = (this && this.__extends) || (function () {
             _this.explodeDistance = 0;
+            _this.chartid = 57724;
             return _this;
@@ -42,2 +43,6 @@ }
             this.animateSeries = true;
+            if (this.element.id === '') {
+                var collection = document.getElementsByClassName('e-accumulationchart').length;
+                this.element.id = 'acc_chart_' + this.chartid + '_' + collection;
+            }
             helper_3.calculateSize(this);
@@ -90,2 +95,4 @@ this.wireEvents();
             var pageY;
+            var svgRect = helper_4.getElement(this.element.id + '_svg').getBoundingClientRect();
+            var rect = this.element.getBoundingClientRect();
             if (e.type.indexOf('touch') > -1) {
@@ -102,6 +109,4 @@ this.isTouch = true;
             }
-            var rect = this.element.getBoundingClientRect();
-            var svgRect = helper_4.getElement(this.element.id + '_svg').getBoundingClientRect();
+            this.mouseY = (pageY - rect.top) - Math.max(svgRect.top - rect.top, 0);
             this.mouseX = (pageX - rect.left) - Math.max(svgRect.left - rect.left, 0);
-            this.mouseY = (pageY - rect.top) - Math.max(svgRect.top - rect.top, 0);
         };
@@ -153,5 +158,5 @@ AccumulationChart.prototype.accumulationMouseEnd = function (e) {
         };
-        AccumulationChart.prototype.export = function (type, fileName, orientation) {
+        AccumulationChart.prototype.export = function (type, fileName, orientation, controls, width, height) {
             var exportChart = new export_1.ExportUtils(this);
-            exportChart.export(type, fileName, orientation);
+            exportChart.export(type, fileName, orientation, (controls ? controls : [this]), width, height);
         };
@@ -290,3 +295,4 @@ AccumulationChart.prototype.print = function (id) {
         };
-        AccumulationChart.prototype.processData = function () {
+        AccumulationChart.prototype.processData = function (render) {
+            if (render === void 0) { render = true; }
             this.seriesCounts = 0;
@@ -296,3 +302,3 @@ for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {
                 series.dataModule = new data_1.Data(series.dataSource, series.query);
-                series.refreshDataManager(this);
+                series.refreshDataManager(this, render);
             }
@@ -514,2 +520,15 @@ };
                         break;
+                    case 'series':
+                        var len = this.series.length;
+                        var seriesRefresh = false;
+                        for (var i = 0; i < len; i++) {
+                            if (newProp.series[i] && (newProp.series[i].dataSource || newProp.series[i].yName || newProp.series[i].xName)) {
+                                seriesRefresh = true;
+                            }
+                        }
+                        if (seriesRefresh) {
+                            this.processData(false);
+                            update.refreshBounds = true;
+                        }
+                        break;
                     case 'locale':
@@ -516,0 +535,0 @@ case 'currencyCode':

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

@@ -11,4 +11,4 @@ /**
     private pie;
+    private parentElement;
     private annotations;
-    private parentElement;
     /**
@@ -15,0 +15,0 @@ * Constructor for accumulation chart annotation.

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 } 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 } from '../../common/utils/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 } 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';
 
@@ -165,3 +165,3 @@ /**
      * ```html
-     * <div id='Pie'></div> 
+     * <div id='Pie'></div>
      * ```
@@ -247,3 +247,3 @@ * ```typescript
      * * InvertedTriangle - Renders a invertedTriangle.
-     * * SeriesType -Render a legend shape based on series type. 
+     * * SeriesType -Render a legend shape based on series type.
      * @default 'SeriesType'
@@ -275,2 +275,8 @@ */
     /**
+     * AccumulationSeries y values less than groupMode are combined into single slice named others
+     * @default Value
+     */
+    groupMode?: GroupModes;
+
+    /**
      * The data label for the series.
@@ -311,3 +317,3 @@ */
     /**
-     * Specify the type of the series in accumulation chart. 
+     * Specify the type of the series in accumulation chart.
      * @default 'Pie'
@@ -330,3 +336,3 @@ */
     /**
-     * Distance of the point from the center, which takes values in both pixels and percentage. 
+     * Distance of the point from the center, which takes values in both pixels and percentage.
      * @default '30%'
@@ -343,4 +349,5 @@ */
     /**
-     * Index of the point, to be exploded on load. 
+     * Index of the point, to be exploded on load.
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -347,0 +354,0 @@ explodeIndex?: number;

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

@@ -13,3 +13,4 @@ /**
 import { AccumulationChart } from '../accumulation';
-import { Units, Alignment, Regions, Position } from '../../common/utils/enum';
+import { Units, Alignment, Regions, Position, SeriesCategories } from '../../common/utils/enum';
+import { GroupModes } from './enum';
 /**
@@ -259,2 +260,7 @@ * Annotation for accumulation series
     /**
+     * AccumulationSeries y values less than groupMode are combined into single slice named others
+     * @default Value
+     */
+    groupMode: GroupModes;
+    /**
      * The data label for the series.
@@ -316,2 +322,3 @@ */
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -375,2 +382,4 @@ explodeIndex: number;
     clipRect: Rect;
+    /** @private */
+    category: SeriesCategories;
     /**
@@ -397,3 +406,3 @@ * To find the max bounds of the data label to place smart legend
     /** @private To refresh the Datamanager for series */
-    refreshDataManager(accumulation: AccumulationChart): void;
+    refreshDataManager(accumulation: AccumulationChart, render: boolean): void;
     /**
@@ -406,3 +415,3 @@ * To get points on dataManager is success
         count: number;
-    }, accumulation: AccumulationChart): void;
+    }, accumulation: AccumulationChart, render: boolean): void;
     /** @private To find points from result data */
@@ -417,3 +426,3 @@ getPoints(result: Object, accumulation: AccumulationChart): void;
      */
-    private isClub(point, clubValue);
+    private isClub(point, clubValue, index);
     /**
@@ -420,0 +429,0 @@ * Method to find sum of points in the series

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

@@ -110,14 +110,15 @@ var __extends = (this && this.__extends) || (function () {
             _this.clipRect = new helper_1.Rect(0, 0, 0, 0);
+            _this.category = 'Series';
             return _this;
         }
-        AccumulationSeries.prototype.refreshDataManager = function (accumulation) {
+        AccumulationSeries.prototype.refreshDataManager = function (accumulation, render) {
             var _this = this;
             if (ej2_base_2.isNullOrUndefined(this.query)) {
-                this.dataManagerSuccess({ result: this.dataSource, count: this.dataSource.length }, accumulation);
+                this.dataManagerSuccess({ result: this.dataSource, count: this.dataSource.length }, accumulation, render);
                 return;
             }
             var dataManager = this.dataModule.getData(this.dataModule.generateQuery().requiresCount());
-            dataManager.then(function (e) { return _this.dataManagerSuccess(e, accumulation); });
+            dataManager.then(function (e) { return _this.dataManagerSuccess(e, accumulation, render); });
         };
-        AccumulationSeries.prototype.dataManagerSuccess = function (e, accumulation) {
+        AccumulationSeries.prototype.dataManagerSuccess = function (e, accumulation, render) {
             var argsData = {
@@ -127,5 +128,5 @@ name: constants_1.seriesRender, series: this, data: e.result,
             accumulation.trigger(constants_1.seriesRender, argsData);
-            this.resultData = e.result;
-            this.getPoints(e.result, accumulation);
-            if (++accumulation.seriesCounts === accumulation.visibleSeries.length) {
+            this.resultData = e.result !== '' ? e.result : [];
+            this.getPoints(this.resultData, accumulation);
+            if (++accumulation.seriesCounts === accumulation.visibleSeries.length && render) {
                 accumulation.refreshChart();
@@ -149,3 +150,3 @@ }
                 var currentY = point.y;
-                if (!this.isClub(point, clubValue)) {
+                if (!this.isClub(point, clubValue, i)) {
                     if (ej2_base_2.isNullOrUndefined(point.y)) {
@@ -171,6 +172,12 @@ point.visible = false;
         };
-        AccumulationSeries.prototype.isClub = function (point, clubValue) {
-            if (Math.abs(point.y) <= clubValue && !ej2_base_2.isNullOrUndefined(clubValue)) {
-                this.sumOfClub += Math.abs(point.y);
-                return true;
+        AccumulationSeries.prototype.isClub = function (point, clubValue, index) {
+            if (!ej2_base_2.isNullOrUndefined(clubValue)) {
+                if (this.groupMode === 'Value' && Math.abs(point.y) <= clubValue) {
+                    this.sumOfClub += Math.abs(point.y);
+                    return true;
+                }
+                else if (this.groupMode === 'Point' && index >= clubValue) {
+                    this.sumOfClub += Math.abs(point.y);
+                    return true;
+                }
             }
@@ -277,3 +284,3 @@ return false;
                     break;
-                case 'Drop':
+                default:
                     point.visible = false;
@@ -323,2 +330,5 @@ break;
         __decorate([
+            ej2_base_1.Property('Value')
+        ], AccumulationSeries.prototype, "groupMode", void 0);
+        __decorate([
             ej2_base_1.Complex({}, AccumulationDataLabelSettings)
@@ -325,0 +335,0 @@ ], AccumulationSeries.prototype, "dataLabel", void 0);

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

@@ -40,3 +40,3 @@ /**
  */
-export declare type AccEmptyPointMode = 'Zero' | 'Drop' | 'Average';
+export declare type AccEmptyPointMode = 'Zero' | 'Drop' | 'Average' | 'Gap';
 /**
@@ -48,1 +48,7 @@ * Defines the mode of the pyramid
 export declare type PyramidModes = 'Linear' | 'Surface';
+/**
+ * Defines the mode of the group mode
+ * * Point - When choosing points, the selected points get grouped.
+ * * Value - When choosing values, the points which less then values get grouped.
+ */
+export declare type GroupModes = 'Point' | 'Value';

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

@@ -61,2 +61,15 @@ /**
 /**
+ * Accumulation Chart Resize event arguments.
+ */
+export interface IAccResizeEventArgs {
+    /** Defines the name of the Event */
+    name: string;
+    /** Defines the previous size of the accumulation chart */
+    previousSize: Size;
+    /** Defines the current size of the accumulation chart */
+    currentSize: Size;
+    /** Defines the accumulation chart instance */
+    accumulation: AccumulationChart;
+}
+/**
  * Accumulation Chart PointRender event arguments.
@@ -85,14 +98,1 @@ */
 }
-/**
- * Accumulation Chart Resize event arguments.
- */
-export interface IAccResizeEventArgs {
-    /** Defines the name of the Event */
-    name: string;
-    /** Defines the previous size of the accumulation chart */
-    previousSize: Size;
-    /** Defines the current size of the accumulation chart */
-    currentSize: Size;
-    /** Defines the accumulation chart instance */
-    accumulation: AccumulationChart;
-}

src/accumulation-chart/user-interaction/tooltip.d.ts

@@ -23,3 +23,2 @@ import { AccumulationChart } from '../accumulation';
     private renderSeriesTooltip(e, chart, isFirst, tooltipDiv);
-    private drawMarker(isBottom, size);
     private getPieData(e, chart, x, y);
@@ -30,3 +29,2 @@ /**
     private getSeriesFromIndex(index, visibleSeries);
-    private getTemplateText(data);
     private getTooltipText(data, tooltip);
@@ -36,8 +34,2 @@ private findHeader(data);
     /**
-     * Removes the tooltip on mouse leave.
-     * @return {void}
-     * @private
-     */
-    removeTooltip(duration: number): void;
-    /**
      * Get module name
@@ -44,0 +36,0 @@ */

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

@@ -47,3 +47,4 @@ var __extends = (this && this.__extends) || (function () {
         AccumulationTooltip.prototype.tooltip = function (event) {
-            var isTooltip = this.getElement(this.element.id + '_tooltip');
+            var svgElement = this.getElement(this.element.id + '_tooltip_svg');
+            var isTooltip = svgElement && parseInt(svgElement.getAttribute('opacity'), 10) > 0;
             var tooltipDiv = this.getTooltipElement(isTooltip);
@@ -56,21 +57,13 @@ this.renderSeriesTooltip(event, this.accumulation, !isTooltip, tooltipDiv);
             this.currentPoints = [];
-            var markerSide;
             if (data.point && (!this.previousPoints[0] || (this.previousPoints[0].point !== data.point))) {
                 if (this.pushData(data, isFirst, tooltipDiv, false)) {
-                    var text = this.getTooltipText(data, chart.tooltip);
-                    if (!chart.tooltip.template) {
-                        if (this.header !== '') {
-                            this.findHeader(data);
-                        }
-                        markerSide = this.renderTooltip(data, rect, data.point.symbolLocation, text, isFirst, false);
-                        if (markerSide) {
-                            this.drawMarker(markerSide.isBottom, 10);
-                        }
+                    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);
                     }
                     else {
-                        this.renderTemplate(data, rect, data.point.symbolLocation, this.getTemplateText(data), isFirst);
+                        this.removeHighlight(this.control);
+                        this.getElement(this.element.id + '_tooltip').remove();
                     }
                     this.isRemove = true;
                 }
-                this.previousPoints = ej2_base_2.extend([], this.currentPoints, null, true);
             }
@@ -84,20 +77,2 @@ else {
         };
-        AccumulationTooltip.prototype.drawMarker = function (isBottom, size) {
-            var count = 0;
-            var shapeOption;
-            var groupElement = this.getElement(this.element.id + '_tooltip_group');
-            var markerGroup = this.chart.renderer.createGroup({ id: this.element.id + '_tooltip_trackball_group' });
-            var x = (this.padding * 2) + (size / 2);
-            var y;
-            var series;
-            for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {
-                var data = _a[_i];
-                series = data.series;
-                y = this.markerPoint[count] - this.padding + (isBottom ? this.arrowPadding : 0);
-                shapeOption = new helper_1.PathOption(this.element.id + '_Tooltip_Trackball_' + series.index, data.point.color, 1, '#cccccc', series.opacity, null);
-                markerGroup.appendChild(helper_1.drawSymbol(new helper_1.ChartLocation(x, y), 'Circle', new helper_1.Size(size, size), null, shapeOption, null));
-                count++;
-            }
-            groupElement.appendChild(markerGroup);
-        };
         AccumulationTooltip.prototype.getPieData = function (e, chart, x, y) {
@@ -121,6 +96,2 @@ var target = e.target;
         };
-        AccumulationTooltip.prototype.getTemplateText = function (data) {
-            var point = ej2_base_2.extend({}, data.point);
-            return point;
-        };
         AccumulationTooltip.prototype.getTooltipText = function (data, tooltip) {
@@ -132,6 +103,10 @@ var series = data.series;
         AccumulationTooltip.prototype.findHeader = function (data) {
+            if (this.header === '') {
+                return '';
+            }
             this.header = this.parseTemplate(data.point, data.series, this.header);
             if (this.header.replace(/<b>/g, '').replace(/<\/b>/g, '').trim() !== '') {
-                this.formattedText = this.formattedText.concat(this.header);
+                return this.header;
             }
+            return '';
         };
@@ -154,32 +129,2 @@ AccumulationTooltip.prototype.parseTemplate = function (point, series, format) {
         };
-        AccumulationTooltip.prototype.removeTooltip = function (duration) {
-            var _this = this;
-            var chart = this.control;
-            var tooltipElement = this.getElement(this.element.id + '_tooltip');
-            this.stopAnimation();
-            if (tooltipElement && this.previousPoints.length > 0) {
-                var data_1 = this.previousPoints;
-                this.toolTipInterval = setTimeout(function () {
-                    var series = data_1[0].series;
-                    var tooltipGroup = tooltipElement.firstChild;
-                    var opacity = parseFloat(tooltipGroup.getAttribute('opacity')) || 1;
-                    var element = _this.getElement(chart.element.id + '_Series_' + data_1[0].series.index
-                        + '_Point_' + data_1[0].point.index);
-                    var rectOpacity;
-                    if (element) {
-                        rectOpacity = parseFloat(element.getAttribute('opacity'));
-                    }
-                    new ej2_base_1.Animation({}).animate(tooltipGroup, {
-                        duration: 200,
-                        progress: function (args) {
-                            _this.progressAnimation(element, tooltipGroup, series, opacity, rectOpacity, (args.timeStamp / args.duration), series.isRectSeries, false);
-                        },
-                        end: function (model) {
-                            _this.previousPoints = [];
-                            _this.endAnimation(element, tooltipGroup, series, false);
-                        }
-                    });
-                }, duration);
-            }
-        };
         AccumulationTooltip.prototype.getModuleName = function () {
@@ -186,0 +131,0 @@ return 'AccumulationTooltip';

src/chart/annotation/annotation.js

@@ -19,2 +19,3 @@ var __extends = (this && this.__extends) || (function () {
             _this.chart = control;
+            _this.annotations = annotations;
             return _this;
@@ -21,0 +22,0 @@ }

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

@@ -11,3 +11,3 @@ import { Double } from '../axis/double-axis';
      */
-    calculateDateTimeNiceInterval(axis: Axis, size: Size, start: number, end: number): number;
+    calculateDateTimeNiceInterval(axis: Axis, size: Size, start: number, end: number, isChart?: boolean): number;
     /**
@@ -14,0 +14,0 @@ * To get the skeleton for the DateTime axis.

src/chart/axis/axis-helper.js

@@ -19,3 +19,4 @@ var __extends = (this && this.__extends) || (function () {
         }
-        NiceInterval.prototype.calculateDateTimeNiceInterval = function (axis, size, start, end) {
+        NiceInterval.prototype.calculateDateTimeNiceInterval = function (axis, size, start, end, isChart) {
+            if (isChart === void 0) { isChart = true; }
             var oneDay = 24 * 60 * 60 * 1000;
@@ -27,9 +28,16 @@ var startDate = new Date(start);
             axis.actualIntervalType = axis.intervalType;
-            switch (axis.intervalType) {
+            var type = axis.intervalType;
+            switch (type) {
                 case 'Years':
                     interval = this.calculateNumericNiceInterval(axis, totalDays / 365, size);
                     break;
+                case 'Quarter':
+                    interval = this.calculateNumericNiceInterval(axis, (totalDays / 365) * 4, size);
+                    break;
                 case 'Months':
                     interval = this.calculateNumericNiceInterval(axis, totalDays / 30, size);
                     break;
+                case 'Weeks':
+                    interval = this.calculateNumericNiceInterval(axis, totalDays / 7, size);
+                    break;
                 case 'Days':
@@ -53,2 +61,7 @@ interval = this.calculateNumericNiceInterval(axis, totalDays, size);
                     }
+                    interval = this.calculateNumericNiceInterval(axis, (totalDays / 365) * 4, size);
+                    if (interval >= 1 && !isChart) {
+                        axis.actualIntervalType = 'Quarter';
+                        return interval;
+                    }
                     interval = this.calculateNumericNiceInterval(axis, totalDays / 30, size);
@@ -59,2 +72,7 @@ if (interval >= 1) {
                     }
+                    interval = this.calculateNumericNiceInterval(axis, totalDays / 7, size);
+                    if (interval >= 1 && !isChart) {
+                        axis.actualIntervalType = 'Weeks';
+                        return interval;
+                    }
                     interval = this.calculateNumericNiceInterval(axis, totalDays, size);
@@ -83,22 +101,29 @@ if (interval >= 1) {
             var skeleton;
+            var intervalType = axis.actualIntervalType;
             if (axis.skeleton) {
                 return axis.skeleton;
             }
-            if (axis.actualIntervalType === 'Years') {
+            if (intervalType === 'Years') {
+                skeleton = axis.isChart ? 'yMMM' : 'y';
+            }
+            else if (intervalType === 'Quarter') {
                 skeleton = 'yMMM';
             }
-            else if (axis.actualIntervalType === 'Months') {
-                skeleton = 'MMMd';
+            else if (intervalType === 'Months') {
+                skeleton = axis.isChart ? 'MMMd' : 'MMM';
             }
-            else if (axis.actualIntervalType === 'Days') {
-                skeleton = 'yMd';
+            else if (intervalType === 'Weeks') {
+                skeleton = 'MEd';
             }
-            else if (axis.actualIntervalType === 'Hours') {
-                skeleton = 'EHm';
+            else if (intervalType === 'Days') {
+                skeleton = axis.isChart ? 'yMd' : 'MMMd';
             }
-            else if (axis.actualIntervalType === 'Minutes' || axis.actualIntervalType === 'Seconds') {
-                skeleton = 'Hms';
+            else if (intervalType === 'Hours') {
+                skeleton = axis.isChart ? 'EHm' : 'h';
             }
+            else if (intervalType === 'Minutes') {
+                skeleton = axis.isChart ? 'Hms' : 'hm';
+            }
             else {
-                skeleton = 'Hms';
+                skeleton = axis.isChart ? 'Hms' : 'hms';
             }
@@ -105,0 +130,0 @@ return skeleton;

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 { IAxisLabelRenderEventArgs, IAxisRangeCalculatedEventArgs } from '../../common/model/interface';import { axisLabelRender, 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 { 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';
 
@@ -341,2 +341,3 @@ /**
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -520,2 +521,3 @@
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -522,0 +524,0 @@

src/chart/axis/axis.d.ts

@@ -16,2 +16,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 import { StripLineSettingsModel, MultiLevelLabelsModel, LabelBorderModel } from '../model/chart-base-model';
+import { ScrollBar } from '../../common/scrollbar/scrollbar';
 /**
@@ -46,3 +47,3 @@ * Configures the `rows` of the chart.
      */
-    computeSize(axis: Axis, clipRect: Rect): void;
+    computeSize(axis: Axis, clipRect: Rect, scrollBarHeight: number): void;
 }
@@ -80,3 +81,3 @@ /**
      */
-    computeSize(axis: Axis, clipRect: Rect): void;
+    computeSize(axis: Axis, clipRect: Rect, scrollBarHeight: number): void;
 }
@@ -305,2 +306,3 @@ /**
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -440,2 +442,3 @@ desiredIntervals: number;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -557,2 +560,7 @@ interval: number;
     multiLevelLabelHeight: number;
+    zoomingScrollBar: ScrollBar;
+    /** @private */
+    scrollBarHeight: number;
+    /** @private */
+    isChart: boolean;
     /**
@@ -584,8 +592,2 @@ * The function used to find tick size.
     /**
-     * The function used to find whether the range is set.
-     * @return {boolean}
-     * @private
-     */
-    setRange(): boolean;
-    /**
      * Calculate visible range for axis.
@@ -597,8 +599,2 @@ * @return {void}
     /**
-     * Calculate desired interval for the axis.
-     * @return {void}
-     * @private
-     */
-    getActualDesiredIntervalsCount(availableSize: Size): number;
-    /**
      * Triggers the event.
@@ -608,8 +604,2 @@ * @return {void}
      */
-    triggerLabelRender(chart: Chart, tempInterval: number, text: string, labelStyle: FontModel): void;
-    /**
-     * Triggers the event.
-     * @return {void}
-     * @private
-     */
     triggerRangeRender(chart: Chart, minimum: number, maximum: number, interval: number): void;
@@ -616,0 +606,0 @@ /**

src/chart/axis/axis.js

@@ -30,7 +30,7 @@ var __extends = (this && this.__extends) || (function () {
         }
-        Row.prototype.computeSize = function (axis, clipRect) {
+        Row.prototype.computeSize = function (axis, clipRect, scrollBarHeight) {
             var width = 0;
             var innerPadding = 5;
             if (axis.visible) {
-                width += (axis.findTickSize(axis.crossInAxis) +
+                width += (axis.findTickSize(axis.crossInAxis) + scrollBarHeight +
                     axis.findLabelSize(axis.crossInAxis, innerPadding) + axis.lineStyle.width / 2);
@@ -64,7 +64,7 @@ }
         }
-        Column.prototype.computeSize = function (axis, clipRect) {
+        Column.prototype.computeSize = function (axis, clipRect, scrollBarHeight) {
             var height = 0;
             var innerPadding = 5;
             if (axis.visible) {
-                height += (axis.findTickSize(axis.crossInAxis) +
+                height += (axis.findTickSize(axis.crossInAxis) + scrollBarHeight +
                     axis.findLabelSize(axis.crossInAxis, innerPadding) + axis.lineStyle.width / 2);
@@ -204,2 +204,3 @@ }
             _this.multiLevelLabelHeight = 0;
+            _this.isChart = true;
             return _this;
@@ -284,8 +285,2 @@ }
         };
-        Axis.prototype.setRange = function () {
-            if (this.minimum != null && this.maximum != null) {
-                return true;
-            }
-            return false;
-        };
         Axis.prototype.calculateVisibleRange = function (size) {
@@ -318,24 +313,2 @@ if (this.zoomFactor < 1 || this.zoomPosition > 0) {
         };
-        Axis.prototype.getActualDesiredIntervalsCount = function (availableSize) {
-            var size = this.orientation === 'Horizontal' ? availableSize.width : availableSize.height;
-            if (this.desiredIntervals === null) {
-                var desiredIntervalsCount = (this.orientation === 'Horizontal' ? 0.533 : 1) * this.maximumLabels;
-                desiredIntervalsCount = Math.max((size * (desiredIntervalsCount / 100)), 1);
-                return desiredIntervalsCount;
-            }
-            else {
-                return this.desiredIntervals;
-            }
-        };
-        Axis.prototype.triggerLabelRender = function (chart, tempInterval, text, labelStyle) {
-            var argsData;
-            argsData = {
-                cancel: false, name: constants_1.axisLabelRender, axis: this,
-                text: text, value: tempInterval, labelStyle: labelStyle
-            };
-            chart.trigger(constants_1.axisLabelRender, argsData);
-            if (!argsData.cancel) {
-                this.visibleLabels.push(new VisibleLabels(argsData.text, argsData.value, argsData.labelStyle));
-            }
-        };
         Axis.prototype.triggerRangeRender = function (chart, minimum, maximum, interval) {
@@ -342,0 +315,0 @@ var argsData;

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

@@ -70,2 +70,8 @@ import { Chart } from '../chart';
     renderAxes(): Element;
+    /**
+     * To render scrollbar
+     * @param chart
+     * @param axis
+     */
+    private renderScrollbar(chart, axis);
     private findAxisPosition(axis);
@@ -72,0 +78,0 @@ private drawBottomLine(definition, index, isRow);

src/chart/axis/cartesian-panel.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-data", "../../common/utils/helper", "../../common/utils/helper", "../../common/utils/helper"], function (require, exports, ej2_data_1, helper_1, helper_2, helper_3) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../../common/utils/helper", "../../common/utils/helper", "../../common/utils/helper"], function (require, exports, ej2_base_1, ej2_data_1, helper_1, helper_2, helper_3) {
     "use strict";
@@ -80,5 +80,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 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.getModule(chart);
                 axis_1.baseModule.calculateRangeAndInterval(size, axis_1);
-                definition.computeSize(axis_1, clipRect);
+                definition.computeSize(axis_1, clipRect, axis_1.scrollBarHeight);
             }
@@ -362,2 +366,5 @@ if (definition.farSizes.length > 0) {
                 }
+                if (chart.scrollBarModule && chart.zoomSettings.enableScrollbar) {
+                    this.renderScrollbar(chart, axis);
+                }
             }
@@ -381,2 +388,22 @@ this.element = chart.renderer.createGroup({ id: chart.element.id + 'DefinitionLine' });
         };
+        CartesianAxisLayoutPanel.prototype.renderScrollbar = function (chart, axis) {
+            if (chart.zoomModule.isZoomed && (axis.zoomFactor < 1 || axis.zoomPosition > 0) && !axis.zoomingScrollBar.isScrollUI) {
+                var currentScrollSvg = axis.zoomingScrollBar.svgObject;
+                if (currentScrollSvg && currentScrollSvg.childElementCount) {
+                    chart.scrollElement.replaceChild(axis.zoomingScrollBar.render(), currentScrollSvg);
+                }
+                else {
+                    if (!chart.scrollElement) {
+                        chart.scrollElement = ej2_base_1.createElement('div', { id: chart.element.id + '_scrollElement' });
+                    }
+                    chart.scrollElement.appendChild(axis.zoomingScrollBar.render());
+                }
+            }
+            else if (axis.zoomFactor === 1 && axis.zoomPosition === 0 && axis.zoomingScrollBar.svgObject) {
+                axis.zoomingScrollBar.destroy();
+            }
+            if (axis.zoomingScrollBar.isScrollUI) {
+                axis.zoomingScrollBar.isScrollUI = false;
+            }
+        };
         CartesianAxisLayoutPanel.prototype.findAxisPosition = function (axis) {
@@ -448,3 +475,6 @@ return axis.crossAt !== null && axis.isInside(axis.crossInAxis.visibleRange);
                 0.5 : 0;
-            var ticks = axis.tickPosition === 'Inside' ? (rect.x - tickSize - axisLineSize) : (rect.x + tickSize + axisLineSize);
+            var scrollBarHeight = ej2_base_1.isNullOrUndefined(axis.crossesAt) ? axis.opposedPosition ? axis.scrollBarHeight :
+                -axis.scrollBarHeight : 0;
+            var isTickInside = axis.tickPosition === 'Inside';
+            var ticks = isTickInside ? (rect.x - tickSize - axisLineSize) : (rect.x + tickSize + axisLineSize + scrollBarHeight);
             var length = axis.visibleLabels.length;
@@ -464,3 +494,3 @@ if (axis.valueType.indexOf('Category') && axis.labelPlacement === 'BetweenTicks' && length > 0) {
                     }
-                    majorTick = majorTick.concat('M ' + (rect.x + axisLineSize) + ' ' + pointY +
+                    majorTick = majorTick.concat('M ' + (rect.x + axisLineSize + (isTickInside ? scrollBarHeight : 0)) + ' ' + pointY +
                         ' L ' + (ticks) + ' ' + pointY + ' ');
@@ -511,4 +541,5 @@ }
             var labelElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisLabels' + index });
+            var scrollBarHeight = ej2_base_1.isNullOrUndefined(axis.crossesAt) ? axis.scrollBarHeight * (isOpposed ? 1 : -1) : 0;
             for (var i = 0, len = axis.visibleLabels.length; i < len; i++) {
-                pointX = isLabelInside ? (rect.x - padding) : (rect.x + padding);
+                pointX = isLabelInside ? (rect.x - padding) : (rect.x + padding + scrollBarHeight);
                 elementSize = axis.visibleLabels[i].size;
@@ -551,2 +582,4 @@ pointY = helper_1.valueToCoefficient(axis.visibleLabels[i].value, axis) * rect.height;
                 var pointY = void 0;
+                var scrollBarHeight = axis.labelPosition === 'Outside' ? axis.scrollBarHeight : 0;
+                scrollBarHeight = (axis.opposedPosition ? 1 : -1) * scrollBarHeight;
                 var gap = (rect.height / axis.visibleRange.delta) * (axis.valueType === 'DateTime' ? axis.dateTimeInterval
@@ -559,4 +592,4 @@ : axis.visibleRange.interval);
                 var ticksbwtLabel = (axis.valueType === 'Category' && axis.labelPlacement === 'BetweenTicks') ? -0.5 : 0;
-                var endX = ((axis.opposedPosition && axis.labelPosition === 'Inside') ||
-                    (!axis.opposedPosition && axis.labelPosition === 'Outside')) ? rect.x - length_1 : rect.x + length_1;
+                var endX = ((axis.opposedPosition && axis.labelPosition === 'Inside') || (!axis.opposedPosition
+                    && axis.labelPosition === 'Outside')) ? rect.x - length_1 + scrollBarHeight : rect.x + length_1 + scrollBarHeight;
                 for (var i = 0; i < axis.visibleLabels.length; i++) {
@@ -580,10 +613,10 @@ pointY = helper_1.valueToCoefficient(axis.visibleLabels[i].value + ticksbwtLabel, axis);
                             else if (Math.floor(rect.y) > (endY)) {
-                                labelBorder += ('M' + ' ' + rect.x + ' ' + startY + ' ' + 'L' + ' ' + endX
+                                labelBorder += ('M' + ' ' + (rect.x + scrollBarHeight) + ' ' + startY + ' ' + 'L' + ' ' + endX
                                     + ' ' + startY + ' ' + 'L' + ' ' + endX + ' ' + (rect.y) + ' ');
                             }
                             else {
-                                labelBorder += ('M' + ' ' + rect.x + ' ' + startY + ' ' + 'L' + ' ' + endX +
+                                labelBorder += ('M' + ' ' + (rect.x + scrollBarHeight) + ' ' + startY + ' ' + 'L' + ' ' + endX +
                                     ' ' + startY + ' ' + 'L' + ' ' + endX + ' ' + endY + ' ');
                                 if (i === axis.visibleLabels.length - 1) {
-                                    labelBorder += ('M' + ' ' + rect.x + ' ' + endY + ' ' + 'L' + ' ' +
+                                    labelBorder += ('M' + ' ' + (rect.x + scrollBarHeight) + ' ' + endY + ' ' + 'L' + ' ' +
                                         endX + ' ' + endY + ' ');
@@ -595,5 +628,5 @@ }
                             if (!(startY > rect.y + rect.height) && !((endY) < Math.floor(rect.y))) {
-                                labelBorder += ('M' + ' ' + rect.x + ' ' + startY + ' ' + 'L' + ' ' + endX +
+                                labelBorder += ('M' + ' ' + (rect.x + scrollBarHeight) + ' ' + startY + ' ' + 'L' + ' ' + endX +
                                     ' ' + startY + ' ' + 'M' + ' ' + endX + ' ' + endY + ' ' +
-                                    'L' + ' ' + rect.x + ' ' + endY);
+                                    'L' + ' ' + (rect.x + scrollBarHeight) + ' ' + endY);
                             }
@@ -603,4 +636,4 @@ break;
                 }
-                labelBorder += (axis.border.type === 'Rectangle') ? ('M' + ' ' + rect.x + ' ' + rect.y + ' ' + 'L' + ' ' +
-                    rect.x + ' ' + (rect.y + rect.height) + ' ') : '';
+                labelBorder += (axis.border.type === 'Rectangle') ? ('M' + ' ' + (rect.x + scrollBarHeight) + ' ' + rect.y + ' ' + 'L' + ' ' +
+                    (rect.x + scrollBarHeight) + ' ' + (rect.y + rect.height) + ' ') : '';
                 if (labelBorder !== '') {
@@ -621,3 +654,3 @@ this.createAxisBorderElement(axis, index, labelBorder, parent);
                     (axis.maxLabelSize.width + axis.multiLevelLabelHeight + this.padding));
-            padding = axis.opposedPosition ? padding : -padding;
+            padding = axis.opposedPosition ? padding + axis.scrollBarHeight : -padding - axis.scrollBarHeight;
             var x = rect.x + padding;
@@ -641,6 +674,9 @@ var y = rect.y + rect.height / 2;
             var axisLineSize = (axis.opposedPosition) ? -axis.lineStyle.width / 2 : axis.lineStyle.width / 2;
+            var scrollBarHeight = ej2_base_1.isNullOrUndefined(axis.crossesAt) ? axis.opposedPosition ? -axis.scrollBarHeight :
+                axis.scrollBarHeight : 0;
             var ticksbwtLabel = (axis.valueType.indexOf('Category') > -1 && axis.labelPlacement === 'BetweenTicks') ?
                 0.5 : 0;
             var length = axis.visibleLabels.length;
-            var ticks = axis.tickPosition === 'Inside' ? (rect.y - tickSize - axisLineSize) : (rect.y + tickSize + axisLineSize);
+            var isTickInside = axis.tickPosition === 'Inside';
+            var ticks = isTickInside ? (rect.y - tickSize - axisLineSize) : (rect.y + tickSize + axisLineSize + scrollBarHeight);
             if (axis.valueType.indexOf('Category') > -1 && length > 0 && axis.labelPlacement === 'BetweenTicks') {
@@ -664,4 +700,4 @@ length += 1;
                     }
-                    majorTick = majorTick.concat('M ' + (pointX) + ' ' + (rect.y + axisLineSize) +
-                        ' L ' + (pointX) + ' ' + ticks + ' ');
+                    majorTick = majorTick.concat('M ' + (pointX) + ' ' + (rect.y + axisLineSize + (isTickInside ? scrollBarHeight : 0))
+                        + ' L ' + (pointX) + ' ' + ticks + ' ');
                 }
@@ -777,2 +813,4 @@ if (axis.minorTicksPerInterval > 0 && (axis.minorGridLines.width > 0 || axis.minorTickLines.width > 0)) {
             var label;
+            var scrollBarHeight = !islabelInside && ej2_base_1.isNullOrUndefined(axis.crossesAt) && (axis.zoomFactor < 1 || axis.zoomPosition > 0)
+                ? axis.scrollBarHeight : 0;
             for (var i = 0, len = length; i < len; i++) {
@@ -791,5 +829,5 @@ label = axis.visibleLabels[i];
                     labelPadding = (isOpposed && !islabelInside) || (!isOpposed && islabelInside) ?
-                        -(padding + (axis.angle ? (3 * (elementSize.height / 4) + (2 * axis.maxLabelSize.height / 5)) :
+                        -(padding + scrollBarHeight + (axis.angle ? (3 * (elementSize.height / 4) + (2 * axis.maxLabelSize.height / 5)) :
                             (label.index > 1 ? (2 * (elementSize.height / 4)) : 0)))
-                        : padding + (axis.angle ? (3 * (elementSize.height / 4)) + (2 * axis.maxLabelSize.height / 5)
+                        : padding + scrollBarHeight + (axis.angle ? (3 * (elementSize.height / 4)) + (2 * axis.maxLabelSize.height / 5)
                             : (3 * (elementSize.height / 4)));
@@ -853,4 +891,5 @@ pointY = (rect.y + (labelPadding * label.index));
             if (axis.border.width > 0) {
+                var scrollBarHeight = axis.labelPosition === 'Outside' ? axis.scrollBarHeight : 0;
                 var startX = void 0;
-                var startY = axisRect.y;
+                var startY = axisRect.y + ((axis.opposedPosition ? -1 : 1) * scrollBarHeight);
                 var padding = 10;
@@ -867,3 +906,3 @@ var pointX = void 0;
                     (!axis.opposedPosition && axis.labelPosition === 'Outside')) ?
-                    (axisRect.y + length_2 + padding) : (axisRect.y - length_2 - padding);
+                    (axisRect.y + length_2 + padding + scrollBarHeight) : (axisRect.y - length_2 - padding - scrollBarHeight);
                 for (var i = 0; i < axis.visibleLabels.length; i++) {
@@ -933,6 +972,8 @@ pointX = helper_1.valueToCoefficient(axis.visibleLabels[i].value + ticksbwtLabel, axis);
             var elementSize = helper_1.measureText(axis.title, axis.titleStyle);
+            var scrollBarHeight = ej2_base_1.isNullOrUndefined(axis.crossesAt) ? axis.scrollBarHeight : 0;
             var padding = (axis.tickPosition === 'Inside' ? 0 : axis.majorTickLines.height + this.padding) +
                 (axis.labelPosition === 'Inside' ? 0 :
                     axis.maxLabelSize.height + axis.multiLevelLabelHeight + this.padding);
-            padding = axis.opposedPosition ? -(padding + elementSize.height / 4) : (padding + (3 * elementSize.height / 4));
+            padding = axis.opposedPosition ? -(padding + elementSize.height / 4 + scrollBarHeight) : (padding + (3 *
+                elementSize.height / 4) + scrollBarHeight);
             var options = new helper_1.TextOption(chart.element.id + '_AxisTitle_' + index, rect.x + rect.width / 2, rect.y + padding, 'middle', axis.title);
@@ -939,0 +980,0 @@ var element = helper_3.textElement(options, axis.titleStyle, axis.titleStyle.color || chart.themeStyle.axisTitle, parent);

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

@@ -23,3 +23,3 @@ import { Axis } from '../axis/axis';
      */
-    protected getActualRange(axis: Axis, size: Size): void;
+    getActualRange(axis: Axis, size: Size): void;
     /**
@@ -29,3 +29,3 @@ * Padding for the axis.
      */
-    protected applyRangePadding(axis: Axis, size: Size): void;
+    applyRangePadding(axis: Axis, size: Size): void;
     /**
@@ -35,3 +35,3 @@ * Calculate label for the axis.
      */
-    protected calculateVisibleLabels(axis: Axis): void;
+    calculateVisibleLabels(axis: Axis): void;
     /**
@@ -38,0 +38,0 @@ * Get module name

src/chart/axis/category-axis.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "../utils/double-range", "../../common/utils/helper", "../axis/axis-helper"], function (require, exports, double_range_1, helper_1, axis_helper_1) {
+define(["require", "exports", "../../common/utils/helper", "../utils/double-range", "../../common/utils/helper", "../axis/axis-helper"], function (require, exports, helper_1, double_range_1, helper_2, axis_helper_1) {
     "use strict";
@@ -30,3 +30,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             if (!axis.interval) {
-                axis.actualRange.interval = Math.max(1, Math.floor(axis.doubleRange.delta / axis.getActualDesiredIntervalsCount(size)));
+                axis.actualRange.interval = Math.max(1, Math.floor(axis.doubleRange.delta / helper_1.getActualDesiredIntervalsCount(size, axis)));
             }
@@ -63,8 +63,10 @@ else {
             for (; tempInterval <= axis.visibleRange.max; tempInterval += axis.visibleRange.interval) {
-                if (helper_1.withIn(tempInterval, axis.visibleRange) && axis.labels.length > 0) {
+                if (helper_2.withIn(tempInterval, axis.visibleRange) && axis.labels.length > 0) {
                     position = Math.round(tempInterval);
-                    axis.triggerLabelRender(this.chart, position, axis.labels[position] ? axis.labels[position] : position.toString(), axis.labelStyle);
+                    helper_1.triggerLabelRender(this.chart, position, axis.labels[position] ? axis.labels[position] : position.toString(), axis.labelStyle, axis);
                 }
             }
-            axis.getMaxLabelWidth(this.chart);
+            if (axis.getMaxLabelWidth) {
+                axis.getMaxLabelWidth(this.chart);
+            }
         };
@@ -71,0 +73,0 @@ Category.prototype.getModuleName = function () {

src/chart/axis/date-time-axis.d.ts

@@ -5,2 +5,3 @@ import { Axis } from '../axis/axis';
 import { NiceInterval } from '../axis/axis-helper';
+import { RangeNavigator } from '../../range-navigator';
 /**
@@ -10,4 +11,4 @@ * `DateTime` module is used to render datetime axis.
 export declare class DateTime extends NiceInterval {
-    private start;
-    private end;
+    min: number;
+    max: number;
     /**
@@ -17,3 +18,3 @@ * Constructor for the dateTime module.
      */
-    constructor(chart: Chart);
+    constructor(chart?: Chart);
     /**
@@ -28,3 +29,3 @@ * The function to calculate the range and labels for the axis.
      */
-    protected getActualRange(axis: Axis, size: Size): void;
+    getActualRange(axis: Axis, size: Size): void;
     /**
@@ -34,3 +35,3 @@ * Apply padding for the range.
      */
-    protected applyRangePadding(axis: Axis, size: Size): void;
+    applyRangePadding(axis: Axis, size: Size): void;
     private getYear(minimum, maximum, rangePadding, interval);
@@ -49,3 +50,3 @@ private getMonth(minimum, maximum, rangePadding, interval);
      */
-    protected calculateVisibleLabels(axis: Axis): void;
+    calculateVisibleLabels(axis: Axis, chart: Chart | RangeNavigator): void;
     /** @private */
@@ -52,0 +53,0 @@ increaseDateTimeInterval(axis: Axis, value: number, interval: number): Date;

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

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "../utils/double-range", "../../common/utils/helper", "@syncfusion/ej2-data", "../axis/axis-helper"], function (require, exports, double_range_1, helper_1, ej2_data_1, axis_helper_1) {
+define(["require", "exports", "../../common/utils/helper", "../utils/double-range", "../../common/utils/helper", "@syncfusion/ej2-data", "../axis/axis-helper"], function (require, exports, helper_1, double_range_1, helper_2, ej2_data_1, axis_helper_1) {
     "use strict";
@@ -24,3 +24,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.applyRangePadding(axis, size);
-            this.calculateVisibleLabels(axis);
+            this.calculateVisibleLabels(axis, this.chart);
         };
@@ -63,15 +63,15 @@ DateTime.prototype.getActualRange = function (axis, size) {
         DateTime.prototype.applyRangePadding = function (axis, size) {
-            this.start = (axis.actualRange.min);
-            this.end = (axis.actualRange.max);
+            this.min = (axis.actualRange.min);
+            this.max = (axis.actualRange.max);
             var minimum;
             var maximum;
             var interval = axis.actualRange.interval;
-            if (!axis.setRange()) {
+            if (!helper_1.setRange(axis)) {
                 var rangePadding = axis.getRangePadding(this.chart);
-                minimum = new Date(this.start);
-                maximum = new Date(this.end);
+                minimum = new Date(this.min);
+                maximum = new Date(this.max);
                 var intervalType = axis.actualIntervalType;
                 if (rangePadding === 'None') {
-                    this.start = minimum.getTime();
-                    this.end = maximum.getTime();
+                    this.min = minimum.getTime();
+                    this.max = maximum.getTime();
                 }
@@ -96,8 +96,8 @@ else if (rangePadding === 'Additional' || rangePadding === 'Round') {
                             if (rangePadding === 'Round') {
-                                this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), minimum.getHours(), minute, 0)).getTime();
-                                this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), endMinute, 59)).getTime();
+                                this.min = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), minimum.getHours(), minute, 0)).getTime();
+                                this.max = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), endMinute, 59)).getTime();
                             }
                             else {
-                                this.start = (new Date(minimum.getFullYear(), maximum.getMonth(), minimum.getDate(), minimum.getHours(), minute + (-interval), 0)).getTime();
-                                this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), endMinute + (interval), 0)).getTime();
+                                this.min = (new Date(minimum.getFullYear(), maximum.getMonth(), minimum.getDate(), minimum.getHours(), minute + (-interval), 0)).getTime();
+                                this.max = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), endMinute + (interval), 0)).getTime();
                             }
@@ -109,8 +109,8 @@ break;
                             if (rangePadding === 'Round') {
-                                this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), minimum.getHours(), minimum.getMinutes(), second, 0)).getTime();
-                                this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), maximum.getMinutes(), endSecond, 0)).getTime();
+                                this.min = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), minimum.getHours(), minimum.getMinutes(), second, 0)).getTime();
+                                this.max = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), maximum.getMinutes(), endSecond, 0)).getTime();
                             }
                             else {
-                                this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), minimum.getHours(), minimum.getMinutes(), second + (-interval), 0)).getTime();
-                                this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), maximum.getMinutes(), endSecond + (interval), 0)).getTime();
+                                this.min = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), minimum.getHours(), minimum.getMinutes(), second + (-interval), 0)).getTime();
+                                this.max = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), maximum.getMinutes(), endSecond + (interval), 0)).getTime();
                             }
@@ -121,4 +121,4 @@ break;
             }
-            axis.actualRange.min = (axis.minimum != null) ? this.min : this.start;
-            axis.actualRange.max = (axis.maximum != null) ? this.max : this.end;
+            axis.actualRange.min = (axis.minimum != null) ? this.min : this.min;
+            axis.actualRange.max = (axis.maximum != null) ? this.max : this.max;
             axis.actualRange.delta = (axis.actualRange.max - axis.actualRange.min);
@@ -132,8 +132,8 @@ axis.doubleRange = new double_range_1.DoubleRange(axis.actualRange.min, axis.actualRange.max);
             if (rangePadding === 'Additional') {
-                this.start = (new Date(startYear - interval, 1, 1, 0, 0, 0)).getTime();
-                this.end = (new Date(endYear + interval, 1, 1, 0, 0, 0)).getTime();
+                this.min = (new Date(startYear - interval, 1, 1, 0, 0, 0)).getTime();
+                this.max = (new Date(endYear + interval, 1, 1, 0, 0, 0)).getTime();
             }
             else {
-                this.start = new Date(startYear, 0, 0, 0, 0, 0).getTime();
-                this.end = new Date(endYear, 11, 30, 23, 59, 59).getTime();
+                this.min = new Date(startYear, 0, 0, 0, 0, 0).getTime();
+                this.max = new Date(endYear, 11, 30, 23, 59, 59).getTime();
             }
@@ -145,8 +145,8 @@ };
             if (rangePadding === 'Round') {
-                this.start = (new Date(minimum.getFullYear(), month, 0, 0, 0, 0)).getTime();
-                this.end = (new Date(maximum.getFullYear(), endMonth, new Date(maximum.getFullYear(), maximum.getMonth(), 0).getDate(), 23, 59, 59)).getTime();
+                this.min = (new Date(minimum.getFullYear(), month, 0, 0, 0, 0)).getTime();
+                this.max = (new Date(maximum.getFullYear(), endMonth, new Date(maximum.getFullYear(), maximum.getMonth(), 0).getDate(), 23, 59, 59)).getTime();
             }
             else {
-                this.start = (new Date(minimum.getFullYear(), month + (-interval), 1, 0, 0, 0)).getTime();
-                this.end = (new Date(maximum.getFullYear(), endMonth + (interval), endMonth === 2 ? 28 : 30, 0, 0, 0)).getTime();
+                this.min = (new Date(minimum.getFullYear(), month + (-interval), 1, 0, 0, 0)).getTime();
+                this.max = (new Date(maximum.getFullYear(), endMonth + (interval), endMonth === 2 ? 28 : 30, 0, 0, 0)).getTime();
             }
@@ -158,8 +158,8 @@ };
             if (rangePadding === 'Round') {
-                this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), day, 0, 0, 0)).getTime();
-                this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), endDay, 23, 59, 59)).getTime();
+                this.min = (new Date(minimum.getFullYear(), minimum.getMonth(), day, 0, 0, 0)).getTime();
+                this.max = (new Date(maximum.getFullYear(), maximum.getMonth(), endDay, 23, 59, 59)).getTime();
             }
             else {
-                this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), day + (-interval), 0, 0, 0)).getTime();
-                this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), endDay + (interval), 0, 0, 0)).getTime();
+                this.min = (new Date(minimum.getFullYear(), minimum.getMonth(), day + (-interval), 0, 0, 0)).getTime();
+                this.max = (new Date(maximum.getFullYear(), maximum.getMonth(), endDay + (interval), 0, 0, 0)).getTime();
             }
@@ -171,8 +171,8 @@ };
             if (rangePadding === 'Round') {
-                this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), hour, 0, 0)).getTime();
-                this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), endHour, 59, 59)).getTime();
+                this.min = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), hour, 0, 0)).getTime();
+                this.max = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), endHour, 59, 59)).getTime();
             }
             else {
-                this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), hour + (-interval), 0, 0)).getTime();
-                this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), endHour + (interval), 0, 0)).getTime();
+                this.min = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), hour + (-interval), 0, 0)).getTime();
+                this.max = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), endHour + (interval), 0, 0)).getTime();
             }
@@ -197,10 +197,10 @@ };
         };
-        DateTime.prototype.calculateVisibleLabels = function (axis) {
+        DateTime.prototype.calculateVisibleLabels = function (axis, chart) {
             axis.visibleLabels = [];
             var tempInterval = axis.visibleRange.min;
-            if (!axis.setRange()) {
+            if (!helper_1.setRange(axis)) {
                 tempInterval = this.alignRangeStart(axis, tempInterval, axis.visibleRange.interval, axis.actualIntervalType).getTime();
             }
-            axis.format = this.chart.intl.getDateFormat({
-                format: axis.labelFormat, type: helper_1.firstToLowerCase(axis.skeletonType), skeleton: this.getSkeleton(axis)
+            axis.format = chart.intl.getDateFormat({
+                format: axis.labelFormat, type: helper_2.firstToLowerCase(axis.skeletonType), skeleton: this.getSkeleton(axis)
             });
@@ -210,8 +210,10 @@ axis.startLabel = axis.format(new Date(axis.visibleRange.min));
             while (tempInterval <= axis.visibleRange.max) {
-                if (helper_1.withIn(tempInterval, axis.visibleRange)) {
-                    axis.triggerLabelRender(this.chart, tempInterval, axis.format(new Date(tempInterval)), axis.labelStyle);
+                if (helper_2.withIn(tempInterval, axis.visibleRange)) {
+                    helper_1.triggerLabelRender(chart, tempInterval, axis.format(new Date(tempInterval)), axis.labelStyle, axis);
                 }
                 tempInterval = this.increaseDateTimeInterval(axis, tempInterval, axis.visibleRange.interval).getTime();
             }
-            axis.getMaxLabelWidth(this.chart);
+            if (axis.getMaxLabelWidth) {
+                axis.getMaxLabelWidth(this.chart);
+            }
         };
@@ -221,9 +223,16 @@ DateTime.prototype.increaseDateTimeInterval = function (axis, value, interval) {
             interval = Math.ceil(interval);
-            switch (axis.actualIntervalType) {
+            var intervalType = axis.actualIntervalType;
+            switch (intervalType) {
                 case 'Years':
                     result.setFullYear(result.getFullYear() + interval);
                     return result;
+                case 'Quarter':
+                    result.setMonth(result.getMonth() + (3 * interval));
+                    return result;
                 case 'Months':
                     result.setMonth(result.getMonth() + interval);
                     return result;
+                case 'Weeks':
+                    result.setDate(result.getDate() + (interval * 7));
+                    return result;
                 case 'Days':
@@ -230,0 +239,0 @@ result.setDate(result.getDate() + interval);

src/chart/axis/date-time-category-axis.d.ts

@@ -25,3 +25,3 @@ import { Axis } from '../axis/axis';
      */
-    protected calculateVisibleLabels(axis: Axis): void;
+    calculateVisibleLabels(axis: Axis): void;
     /**
@@ -28,0 +28,0 @@ * get same interval

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

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "../axis/category-axis", "../../common/utils/helper"], function (require, exports, category_axis_1, helper_1) {
+define(["require", "exports", "../axis/category-axis", "../../common/utils/helper", "../../common/utils/helper"], function (require, exports, category_axis_1, helper_1, helper_2) {
     "use strict";
@@ -37,12 +37,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
             axis.format = this.chart.intl.getDateFormat({
-                format: axis.labelFormat, type: helper_1.firstToLowerCase(axis.skeletonType), skeleton: this.getSkeleton(axis)
+                format: axis.labelFormat, type: helper_2.firstToLowerCase(axis.skeletonType), skeleton: this.getSkeleton(axis)
             });
             for (var i = 0; i < axis.labels.length; i++) {
                 if (!this.sameInterval(axis.labels.map(Number)[i], axis.labels.map(Number)[i - 1], axis.actualIntervalType, i)) {
-                    if (helper_1.withIn(i - padding, axis.visibleRange)) {
-                        axis.triggerLabelRender(this.chart, i, axis.format(new Date(axis.labels.map(Number)[i])), axis.labelStyle);
+                    if (helper_2.withIn(i - padding, axis.visibleRange)) {
+                        helper_1.triggerLabelRender(this.chart, i, axis.format(new Date(axis.labels.map(Number)[i])), axis.labelStyle, axis);
                     }
                 }
             }
-            axis.getMaxLabelWidth(this.chart);
+            if (axis.getMaxLabelWidth) {
+                axis.getMaxLabelWidth(this.chart);
+            }
         };
@@ -49,0 +51,0 @@ DateTimeCategory.prototype.sameInterval = function (currentDate, previousDate, type, index) {

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

 import { Axis } from '../axis/axis';
 import { Size } from '../../common/utils/helper';
 import { Chart } from '../chart';
+import { RangeNavigator } from '../../range-navigator';
 /**
@@ -19,3 +20,3 @@ * Numeric module is used to render numeric axis.
      */
-    constructor(chart: Chart);
+    constructor(chart?: Chart);
     /**
@@ -30,3 +31,3 @@ * Numeric Nice Interval for the axis.
      */
-    protected getActualRange(axis: Axis, size: Size): void;
+    getActualRange(axis: Axis, size: Size): void;
     /**
@@ -36,3 +37,3 @@ * Range for the axis.
      */
-    protected initializeDoubleRange(axis: Axis): void;
+    initializeDoubleRange(axis: Axis): void;
     /**
@@ -54,4 +55,4 @@ * The function to calculate the range and labels for the axis.
      */
-    protected applyRangePadding(axis: Axis, size: Size): void;
-    private updateActualRange(axis, minimum, maximum, interval);
+    applyRangePadding(axis: Axis, size: Size): void;
+    updateActualRange(axis: Axis, minimum: number, maximum: number, interval: number): void;
     private findAdditional(axis, start, end, interval);
@@ -68,3 +69,3 @@ private findNormal(axis, start, end, interval, size);
      */
-    protected calculateVisibleLabels(axis: Axis, chart: Chart): void;
+    calculateVisibleLabels(axis: Axis, chart: Chart | RangeNavigator): void;
     /**
@@ -79,3 +80,3 @@ * Format of the axis label.
      */
-    protected formatValue(axis: Axis, isCustom: boolean, format: string, tempInterval: number): string;
+    formatValue(axis: Axis, isCustom: boolean, format: string, tempInterval: number): string;
 }

src/chart/axis/double-axis.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "../../common/utils/helper", "../utils/double-range", "../../common/utils/helper"], function (require, exports, helper_1, double_range_1, helper_2) {
+define(["require", "exports", "../../common/utils/helper", "../utils/double-range", "../../common/utils/helper", "@syncfusion/ej2-base"], function (require, exports, helper_1, double_range_1, helper_2, ej2_base_1) {
     "use strict";
@@ -9,5 +9,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
         Double.prototype.calculateNumericNiceInterval = function (axis, delta, size) {
-            var actualDesiredIntervalsCount = axis.getActualDesiredIntervalsCount(size);
+            var actualDesiredIntervalsCount = helper_1.getActualDesiredIntervalsCount(size, axis);
             var niceInterval = delta / actualDesiredIntervalsCount;
-            if (axis.desiredIntervals != null) {
+            if (!ej2_base_1.isNullOrUndefined(axis.desiredIntervals)) {
                 return niceInterval;
@@ -61,3 +61,3 @@ }
             this.max = null;
-            if (!axis.setRange()) {
+            if (!helper_1.setRange(axis)) {
                 for (var _i = 0, _a = axis.series; _i < _a.length; _i++) {
@@ -69,3 +69,3 @@ var series_1 = _a[_i];
                     this.paddingInterval = 0;
-                    if ((series_1.type.indexOf('Column') > -1 && axis.orientation === 'Horizontal')
+                    if (((series_1.type.indexOf('Column') > -1 || series_1.type.indexOf('Histogram') > -1) && axis.orientation === 'Horizontal')
                         || (series_1.type.indexOf('Bar') > -1 && axis.orientation === 'Vertical')) {
@@ -108,3 +108,3 @@ if ((series_1.xAxis.valueType === 'Double' || series_1.xAxis.valueType === 'DateTime')
             var end = axis.actualRange.max;
-            if (!axis.setRange()) {
+            if (!helper_1.setRange(axis)) {
                 var interval = axis.actualRange.interval;
@@ -207,6 +207,8 @@ var padding = axis.getRangePadding(this.chart);
                 if (helper_2.withIn(tempInterval, axis.visibleRange)) {
-                    axis.triggerLabelRender(chart, tempInterval, this.formatValue(axis, isCustom, format, tempInterval), axis.labelStyle);
+                    helper_1.triggerLabelRender(chart, tempInterval, this.formatValue(axis, isCustom, format, tempInterval), axis.labelStyle, axis);
                 }
             }
-            axis.getMaxLabelWidth(chart);
+            if (axis.getMaxLabelWidth) {
+                axis.getMaxLabelWidth(this.chart);
+            }
         };
@@ -213,0 +215,0 @@ Double.prototype.getFormat = function (axis) {

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

@@ -5,2 +5,3 @@ import { Axis } from '../axis/axis';
 import { Chart } from '../chart';
+import { RangeNavigator } from '../../range-navigator';
 /**
@@ -24,3 +25,3 @@ * `Logarithmic` module is used to render log axis.
      */
-    protected getActualRange(axis: Axis, size: Size): void;
+    getActualRange(axis: Axis, size: Size): void;
     /**
@@ -40,3 +41,3 @@ * Calculates visible range for the axis.
      */
-    protected calculateVisibleLabels(axis: Axis, chart: Chart): void;
+    calculateVisibleLabels(axis: Axis, chart: Chart | RangeNavigator): void;
     /**
@@ -43,0 +44,0 @@ * Get module name

src/chart/axis/logarithmic-axis.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "../axis/double-axis", "../../common/utils/helper"], function (require, exports, double_axis_1, helper_1) {
+define(["require", "exports", "../axis/double-axis", "../../common/utils/helper", "../../common/utils/helper"], function (require, exports, double_axis_1, helper_1, helper_2) {
     "use strict";
@@ -29,5 +29,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.min = this.min < 0 ? 0 : this.min;
-            var logStart = helper_1.logBase(this.min, axis.logBase);
+            var logStart = helper_2.logBase(this.min, axis.logBase);
             logStart = isFinite(logStart) ? logStart : this.min;
-            var logEnd = helper_1.logBase(this.max, axis.logBase);
+            var logEnd = helper_2.logBase(this.max, axis.logBase);
             logEnd = isFinite(logStart) ? logEnd : this.max;
@@ -56,5 +56,5 @@ this.min = Math.floor(logStart / 1);
         Logarithmic.prototype.calculateLogNiceInterval = function (delta, size, axis) {
-            var actualDesiredIntervalsCount = axis.getActualDesiredIntervalsCount(size);
+            var actualDesiredIntervalsCount = helper_1.getActualDesiredIntervalsCount(size, axis);
             var niceInterval = delta;
-            var minInterval = Math.pow(10, Math.floor(helper_1.logBase(niceInterval, 10)));
+            var minInterval = Math.pow(10, Math.floor(helper_2.logBase(niceInterval, 10)));
             for (var j = 0, len = axis.intervalDivs.length; j < len; j++) {
@@ -84,7 +84,9 @@ var currentInterval = minInterval * axis.intervalDivs[j];
             for (; tempInterval <= axis.visibleRange.max; tempInterval += axis.visibleRange.interval) {
-                if (helper_1.withIn(tempInterval, axis.visibleRange)) {
-                    axis.triggerLabelRender(this.chart, tempInterval, this.formatValue(axis, isCustomFormat, axisFormat, Math.pow(axis.logBase, tempInterval)), axis.labelStyle);
+                if (helper_2.withIn(tempInterval, axis.visibleRange)) {
+                    helper_1.triggerLabelRender(this.chart, tempInterval, this.formatValue(axis, isCustomFormat, axisFormat, Math.pow(axis.logBase, tempInterval)), axis.labelStyle, axis);
                 }
             }
-            axis.getMaxLabelWidth(this.chart);
+            if (axis.getMaxLabelWidth) {
+                axis.getMaxLabelWidth(this.chart);
+            }
         };
@@ -91,0 +93,0 @@ Logarithmic.prototype.getModuleName = function () {

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

@@ -1,2 +0,2 @@
-define(["require", "exports", "../../common/utils/helper", "../../common/utils/helper", "../../common/model/constants"], function (require, exports, helper_1, helper_2, constants_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper", "../../common/model/constants"], function (require, exports, ej2_base_1, helper_1, helper_2, constants_1) {
     "use strict";
@@ -77,5 +77,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             var opposedPosition = axis.opposedPosition;
+            var scrollBarHeight = isOutside && ej2_base_1.isNullOrUndefined(axis.crossesAt) ? axis.scrollBarHeight : 0;
+            scrollBarHeight = scrollBarHeight * (opposedPosition ? -1 : 1);
             clipY = ((opposedPosition && !isOutside) || (!opposedPosition && isOutside)) ?
                 (axisRect.y + startY - axis.majorTickLines.width) : (axisRect.y - startY - axis.multiLevelLabelHeight);
-            this.createClipRect(axisRect.x - axis.majorTickLines.width, clipY, axis.multiLevelLabelHeight + padding, axisRect.width + 2 * axis.majorTickLines.width, this.chart.element.id + '_XAxis_Clippath_' + index, this.chart.element.id + 'XAxisMultiLevelLabel' + index);
+            this.createClipRect(axisRect.x - axis.majorTickLines.width, clipY + scrollBarHeight, axis.multiLevelLabelHeight + padding, axisRect.width + 2 * axis.majorTickLines.width, this.chart.element.id + '_XAxis_Clippath_' + index, this.chart.element.id + 'XAxisMultiLevelLabel' + index);
             axis.multiLevelLabels.map(function (multiLevel, level) {
@@ -97,5 +99,5 @@ pathRect = '';
                             x = startX + axisRect.x + padding;
-                            y = ((opposedPosition && !isOutside) || (!opposedPosition && isOutside)) ? (startY + axisRect.y +
+                            y = (((opposedPosition && !isOutside) || (!opposedPosition && isOutside)) ? (startY + axisRect.y +
                                 labelSize.height / 2 + padding + _this.xAxisPrevHeight[level]) : (axisRect.y - startY + labelSize.height / 2 -
-                                _this.xAxisMultiLabelHeight[level] - _this.xAxisPrevHeight[level]);
+                                _this.xAxisMultiLabelHeight[level] - _this.xAxisPrevHeight[level])) + scrollBarHeight;
                             if (argsData.alignment === 'Center') {
@@ -144,5 +146,7 @@ x += (endX - startX - padding) / 2;
             var height = this.xAxisMultiLabelHeight[labelIndex] + padding;
+            var scrollBarHeight = axis.labelPosition === 'Outside' ? axis.scrollBarHeight : 0;
             var x = startX + axisRect.x;
-            var y = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ?
-                (startY + axisRect.y + this.xAxisPrevHeight[labelIndex]) : (axisRect.y - startY - this.xAxisPrevHeight[labelIndex]);
+            var y = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? (startY + axisRect.y +
+                this.xAxisPrevHeight[labelIndex] + scrollBarHeight) : (axisRect.y - startY -
+                this.xAxisPrevHeight[labelIndex] - scrollBarHeight);
             switch (groupLabel.border.type) {
@@ -231,5 +235,8 @@ case 'WithoutTopandBottomBorder':
             var opposedPosition = axis.opposedPosition;
+            var scrollBarHeight = isOutside && ej2_base_1.isNullOrUndefined(axis.crossesAt) ? axis.scrollBarHeight : 0;
+            scrollBarHeight = scrollBarHeight * (opposedPosition ? 1 : -1);
             clipX = ((opposedPosition && !isOutside) || (!opposedPosition && isOutside)) ?
                 (rect.x - axis.multiLevelLabelHeight - startX - padding) : (rect.x + startX);
-            this.createClipRect(clipX, rect.y - axis.majorTickLines.width, rect.height + 2 * axis.majorTickLines.width, axis.multiLevelLabelHeight + padding, this.chart.element.id + '_YAxis_Clippath_' + index, this.chart.element.id + 'YAxisMultiLevelLabel' + index);
+            this.createClipRect(clipX + scrollBarHeight, rect.y - axis.majorTickLines.width, rect.height + 2 * axis.majorTickLines.width, axis.multiLevelLabelHeight + padding, this.chart.element.id + '_YAxis_Clippath_' + index, this.chart.element.id
+                + 'YAxisMultiLevelLabel' + index);
             axis.multiLevelLabels.map(function (multiLevel, level) {
@@ -255,7 +262,7 @@ path = '';
                                 x = isOutside ? rect.x + startX + padding / 2 + (_this.yAxisMultiLabelHeight[level] / 2) +
-                                    _this.yAxisPrevHeight[level] : rect.x - startX - (_this.yAxisMultiLabelHeight[level] / 2) -
+                                    _this.yAxisPrevHeight[level] + scrollBarHeight : rect.x - startX - (_this.yAxisMultiLabelHeight[level] / 2) -
                                     _this.yAxisPrevHeight[level] - padding / 2;
                             }
                             else {
-                                x = isOutside ? x : rect.x + startX + padding / 2 + (_this.yAxisMultiLabelHeight[level] / 2) +
+                                x = isOutside ? x + scrollBarHeight : rect.x + startX + padding / 2 + (_this.yAxisMultiLabelHeight[level] / 2) +
                                     _this.yAxisPrevHeight[level];
@@ -299,5 +306,7 @@ }
             var y = rect.y + rect.height - endY;
+            var scrollBarHeight = isOutside && ej2_base_1.isNullOrUndefined(axis.crossesAt) ? axis.scrollBarHeight : 0;
+            scrollBarHeight = scrollBarHeight * (opposedPosition ? 1 : -1);
             var width = this.yAxisMultiLabelHeight[labelIndex] + padding;
-            var x = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? rect.x - startX -
-                this.yAxisPrevHeight[labelIndex] : rect.x + startX + this.yAxisPrevHeight[labelIndex];
+            var x = (((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? rect.x - startX -
+                this.yAxisPrevHeight[labelIndex] : rect.x + startX + this.yAxisPrevHeight[labelIndex]) + scrollBarHeight;
             switch (groupLabel.border.type) {
@@ -304,0 +313,0 @@ case 'WithoutTopandBottomBorder':

src/chart/chart-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, NotifyPropertyChanges, Internationalization } from '@syncfusion/ej2-base';import { ModuleDeclaration, L10n, createElement } 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, setCulture, Browser, Touch } from '@syncfusion/ej2-base';import { Event, EventHandler, Complex, Collection } from '@syncfusion/ej2-base';import { findClipRect, measureText, TextOption, showTooltip, removeElement } from '../common/utils/helper';import { textElement, RectOption, createSvg, firstToLowerCase, titlePositionX, PointData } 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 { StepLineSeries } from './series/step-line-series';import { StepAreaSeries } from './series/step-area-series';import { ColumnSeries } from './series/column-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 } from '../common/model/interface';import { IAnnotationRenderEventArgs, IAxisMultiLabelRenderEventArgs, IThemeStyle } 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 } 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 } from '../common/utils/enum';import { MultiColoredLineSeries } from './series/multi-colored-line-series';import { MultiColoredAreaSeries } from './series/multi-colored-area-series';
+import { Component, Property, NotifyPropertyChanges, Internationalization } from '@syncfusion/ej2-base';import { ModuleDeclaration, L10n, createElement } 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, setCulture, Browser, Touch } from '@syncfusion/ej2-base';import { Event, EventHandler, Complex, Collection } from '@syncfusion/ej2-base';import { findClipRect, measureText, TextOption, showTooltip, removeElement } from '../common/utils/helper';import { textElement, RectOption, createSvg, firstToLowerCase, titlePositionX, PointData } 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 { 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 } 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 } 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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -122,2 +122,9 @@
 
+    /**
+     * Specifies whether axis needs to have scrollbar.
+     * @default false.
+     */
+
+    enableScrollbar?: boolean;
+
 }
@@ -335,2 +342,8 @@
     /**
+     * Triggers after resizing of chart
+     * @event
+     */
+    resized?: EmitType<IResizeEventArgs>;
+
+    /**
      * Triggers before the annotation gets rendered.
@@ -485,2 +498,3 @@ * @event
      * @private
+     * @aspType string
      */
@@ -487,0 +501,0 @@ currencyCode?: string;

src/chart/chart.d.ts

@@ -25,2 +25,3 @@ import { Component, Internationalization } from '@syncfusion/ej2-base';
 import { BarSeries } from './series/bar-series';
+import { HistogramSeries } from './series/histogram-series';
 import { StepLineSeries } from './series/step-line-series';
@@ -67,3 +68,3 @@ import { StepAreaSeries } from './series/step-area-series';
 import { TechnicalIndicatorModel } from './technical-indicators/technical-indicator-model';
-import { ILegendRenderEventArgs, IAxisLabelRenderEventArgs, ITextRenderEventArgs } from '../common/model/interface';
+import { ILegendRenderEventArgs, IAxisLabelRenderEventArgs, ITextRenderEventArgs, IResizeEventArgs } from '../common/model/interface';
 import { IAnnotationRenderEventArgs, IAxisMultiLabelRenderEventArgs, IThemeStyle } from '../common/model/interface';
@@ -79,2 +80,4 @@ import { IPointRenderEventArgs, ISeriesRenderEventArgs, IDragCompleteEventArgs, ITooltipRenderEventArgs } from '../common/model/interface';
 import { MultiColoredAreaSeries } from './series/multi-colored-area-series';
+import { ScrollBar } from '../common/scrollbar/scrollbar';
+import { AccumulationChart, RangeNavigator } from '..';
 /**
@@ -179,2 +182,7 @@ * Configures the crosshair in the chart.
     enablePan: boolean;
+    /**
+     * Specifies whether axis needs to have scrollbar.
+     * @default false.
+     */
+    enableScrollbar: boolean;
 }
@@ -269,2 +277,6 @@ /**
     /**
+     * histogramSeriesModule is used to add histogram series in chart
+     */
+    histogramSeriesModule: HistogramSeries;
+    /**
      * hiloSeriesModule is used to add hilo series in chart
@@ -389,2 +401,3 @@ */
     bollingerBandsModule: BollingerBands;
+    scrollBarModule: ScrollBar;
     /**
@@ -550,2 +563,7 @@ * The width of the chart as a string accepts input as both like '100px' or '100%'.
     /**
+     * Triggers after resizing of chart
+     * @event
+     */
+    resized: EmitType<IResizeEventArgs>;
+    /**
      * Triggers before the annotation gets rendered.
@@ -663,2 +681,3 @@ * @event
      * @private
+     * @aspType string
      */
@@ -774,2 +793,5 @@ private currencyCode;
     themeStyle: IThemeStyle;
+    /** @private */
+    scrollElement: Element;
+    private chartid;
     /**
@@ -823,3 +845,3 @@ * Constructor for creating the widget
     private performSelection();
-    private processData();
+    private processData(render?);
     private initializeDataModule(series);
@@ -836,3 +858,3 @@ private calculateBounds();
      */
-    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation): void;
+    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, controls?: (Chart | AccumulationChart | RangeNavigator)[], width?: number, height?: number): void;
     /**
@@ -839,0 +861,0 @@ * Defines the trendline initialization

src/chart/index.d.ts

@@ -34,2 +34,3 @@ /**
 export * from './series/spline-series';
+export * from './series/histogram-series';
 export * from './series/spline-area-series';
@@ -73,1 +74,2 @@ export * from './technical-indicators/technical-indicator';
 export * from './model/chart-base-model';
+export * from '../common/scrollbar/scrollbar';

src/chart/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./chart", "./axis/axis", "./axis/date-time-axis", "./axis/category-axis", "./axis/logarithmic-axis", "./axis/date-time-category-axis", "./axis/axis-helper", "./axis/strip-line", "../common/model/base", "./series/line-series", "./series/column-series", "./series/area-series", "./series/bar-series", "./series/polar-series", "./series/radar-series", "./series/stacking-bar-series", "./series/candle-series", "./series/stacking-column-series", "./series/step-line-series", "./series/step-area-series", "./series/stacking-area-series", "./series/scatter-series", "./series/range-column-series", "./series/waterfall-series", "./series/hilo-series", "./series/hilo-open-close-series", "./series/range-area-series", "./series/bubble-series", "./series/spline-series", "./series/spline-area-series", "./technical-indicators/technical-indicator", "./technical-indicators/sma-indicator", "./technical-indicators/ema-indicator", "./technical-indicators/tma-indicator", "./technical-indicators/ad-indicator", "./technical-indicators/atr-indicator", "./technical-indicators/momentum-indicator", "./technical-indicators/rsi-indicator", "./technical-indicators/stochastic-indicator", "./technical-indicators/bollinger-bands", "./technical-indicators/macd-indicator", "./trend-lines/trend-line", "../common/utils/helper", "./user-interaction/crosshair", "./user-interaction/tooltip", "./user-interaction/zooming", "./user-interaction/selection", "./series/data-label", "./series/error-bar", "./series/chart-series", "./legend/legend", "./annotation/annotation", "./model/chart-base", "./series/box-and-whisker-series", "./series/multi-colored-area-series", "./series/multi-colored-line-series", "./series/multi-colored-base", "./axis/multi-level-labels"], function (require, exports, chart_1, axis_1, date_time_axis_1, category_axis_1, logarithmic_axis_1, date_time_category_axis_1, axis_helper_1, strip_line_1, base_1, line_series_1, column_series_1, area_series_1, bar_series_1, polar_series_1, radar_series_1, stacking_bar_series_1, candle_series_1, stacking_column_series_1, step_line_series_1, step_area_series_1, stacking_area_series_1, scatter_series_1, range_column_series_1, waterfall_series_1, hilo_series_1, hilo_open_close_series_1, range_area_series_1, bubble_series_1, spline_series_1, spline_area_series_1, technical_indicator_1, sma_indicator_1, ema_indicator_1, tma_indicator_1, ad_indicator_1, atr_indicator_1, momentum_indicator_1, rsi_indicator_1, stochastic_indicator_1, bollinger_bands_1, macd_indicator_1, trend_line_1, helper_1, crosshair_1, tooltip_1, zooming_1, selection_1, data_label_1, error_bar_1, chart_series_1, legend_1, annotation_1, chart_base_1, box_and_whisker_series_1, multi_colored_area_series_1, multi_colored_line_series_1, multi_colored_base_1, multi_level_labels_1) {
+define(["require", "exports", "./chart", "./axis/axis", "./axis/date-time-axis", "./axis/category-axis", "./axis/logarithmic-axis", "./axis/date-time-category-axis", "./axis/axis-helper", "./axis/strip-line", "../common/model/base", "./series/line-series", "./series/column-series", "./series/area-series", "./series/bar-series", "./series/polar-series", "./series/radar-series", "./series/stacking-bar-series", "./series/candle-series", "./series/stacking-column-series", "./series/step-line-series", "./series/step-area-series", "./series/stacking-area-series", "./series/scatter-series", "./series/range-column-series", "./series/waterfall-series", "./series/hilo-series", "./series/hilo-open-close-series", "./series/range-area-series", "./series/bubble-series", "./series/spline-series", "./series/histogram-series", "./series/spline-area-series", "./technical-indicators/technical-indicator", "./technical-indicators/sma-indicator", "./technical-indicators/ema-indicator", "./technical-indicators/tma-indicator", "./technical-indicators/ad-indicator", "./technical-indicators/atr-indicator", "./technical-indicators/momentum-indicator", "./technical-indicators/rsi-indicator", "./technical-indicators/stochastic-indicator", "./technical-indicators/bollinger-bands", "./technical-indicators/macd-indicator", "./trend-lines/trend-line", "../common/utils/helper", "./user-interaction/crosshair", "./user-interaction/tooltip", "./user-interaction/zooming", "./user-interaction/selection", "./series/data-label", "./series/error-bar", "./series/chart-series", "./legend/legend", "./annotation/annotation", "./model/chart-base", "./series/box-and-whisker-series", "./series/multi-colored-area-series", "./series/multi-colored-line-series", "./series/multi-colored-base", "./axis/multi-level-labels", "../common/scrollbar/scrollbar"], function (require, exports, chart_1, axis_1, date_time_axis_1, category_axis_1, logarithmic_axis_1, date_time_category_axis_1, axis_helper_1, strip_line_1, base_1, line_series_1, column_series_1, area_series_1, bar_series_1, polar_series_1, radar_series_1, stacking_bar_series_1, candle_series_1, stacking_column_series_1, step_line_series_1, step_area_series_1, stacking_area_series_1, scatter_series_1, range_column_series_1, waterfall_series_1, hilo_series_1, hilo_open_close_series_1, range_area_series_1, bubble_series_1, spline_series_1, histogram_series_1, spline_area_series_1, technical_indicator_1, sma_indicator_1, ema_indicator_1, tma_indicator_1, ad_indicator_1, atr_indicator_1, momentum_indicator_1, rsi_indicator_1, stochastic_indicator_1, bollinger_bands_1, macd_indicator_1, trend_line_1, helper_1, crosshair_1, tooltip_1, zooming_1, selection_1, data_label_1, error_bar_1, chart_series_1, legend_1, annotation_1, chart_base_1, box_and_whisker_series_1, multi_colored_area_series_1, multi_colored_line_series_1, multi_colored_base_1, multi_level_labels_1, scrollbar_1) {
     "use strict";
@@ -36,2 +36,3 @@ function __export(m) {
     __export(spline_series_1);
+    __export(histogram_series_1);
     __export(spline_area_series_1);
@@ -66,2 +67,3 @@ __export(technical_indicator_1);
     __export(multi_level_labels_1);
+    __export(scrollbar_1);
 });

src/chart/legend/legend.js

@@ -166,2 +166,3 @@ var __extends = (this && this.__extends) || (function () {
                 chart.refreshBound();
+                chart.trigger('loaded', { chart: chart });
                 if (selectedDataIndexes.length > 0) {
@@ -168,0 +169,0 @@ chart.selectionModule.selectedDataIndexes = selectedDataIndexes;

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

@@ -129,2 +129,3 @@ import { ChildProperty, Property, Complex, Collection } from '@syncfusion/ej2-base';import { ZIndex, Anchor, BorderType } 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';
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -136,2 +137,3 @@ start?: number | Date | string;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -149,2 +151,3 @@ end?: number | Date | string;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -175,2 +178,3 @@ maximumTextWidth?: number;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -182,2 +186,3 @@ start?: number | Date | string;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -189,2 +194,3 @@ end?: number | Date | string;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -213,2 +219,3 @@ size?: number;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -215,0 +222,0 @@ rotation?: number;

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

@@ -108,2 +108,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -114,2 +115,3 @@ start: number | Date | string;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -125,2 +127,3 @@ end: number | Date | string;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -146,2 +149,3 @@ maximumTextWidth: number;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -152,2 +156,3 @@ start: number | Date | string;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -158,2 +163,3 @@ end: number | Date | string;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -178,2 +184,3 @@ size: number;
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -180,0 +187,0 @@ rotation: number;

src/chart/series/area-series.js

@@ -26,2 +26,5 @@ var __extends = (this && this.__extends) || (function () {
             var currentXValue;
+            var isDropMode = (series.emptyPointSettings && series.emptyPointSettings.mode === 'Drop');
+            var borderWidth = series.border ? series.border.width : 0;
+            var borderColor = series.border ? series.border.color : 'transparent';
             var getCoordinate = series.chart.chartAreaType === 'PolarRadar' ? helper_1.TransformToVisible : helper_1.getPoint;
@@ -36,10 +39,10 @@ series.points.map(function (point, i, seriesPoints) {
                     direction += _this.getAreaPathDirection(currentXValue, point.yValue, series, isInverted, getCoordinate, null, 'L');
-                    if (seriesPoints[i + 1] && !seriesPoints[i + 1].visible && series.emptyPointSettings.mode !== 'Drop') {
+                    if (seriesPoints[i + 1] && !seriesPoints[i + 1].visible && !isDropMode) {
                         direction += _this.getAreaEmptyDirection({ 'x': currentXValue, 'y': origin }, startPoint, series, isInverted, getCoordinate);
                         startPoint = null;
                     }
-                    _this.storePointLocation(point, series, isInverted, helper_1.getPoint);
+                    _this.storePointLocation(point, series, isInverted, getCoordinate);
                 }
             });
-            this.appendLinePath(new helper_1.PathOption(series.chart.element.id + '_Series_' + series.index, series.interior, series.border.width, series.border.color, series.opacity, series.dashArray, (series.points.length > 1 ? (direction + this.getAreaPathDirection(series.points[series.points.length - 1].xValue, series.chart.chartAreaType === 'PolarRadar' ?
+            this.appendLinePath(new helper_1.PathOption(series.chart.element.id + '_Series_' + series.index, series.interior, borderWidth, borderColor, series.opacity, series.dashArray, (series.points.length > 1 ? (direction + this.getAreaPathDirection(series.points[series.points.length - 1].xValue, series.chart.chartAreaType === 'PolarRadar' ?
                 series.points[series.points.length - 1].yValue : origin, series, isInverted, getCoordinate, null, 'L')) : '')), series, '');
@@ -46,0 +49,0 @@ this.renderMarker(series);

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

@@ -1,2 +0,2 @@
-import { Property, ChildProperty, Complex, Collection, SvgRenderer, DateFormatOptions } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';import { StackValues, RectOption, ControlPoints, PolarArc } from '../../common/utils/helper';import { firstToLowerCase, ChartLocation, Rect, logBase, CircleOption } from '../../common/utils/helper';import { ChartSeriesType, ChartShape, LegendShape, LabelPosition, SeriesValueType, EmptyPointMode, SplineType } from '../utils/enum';import { ChartDrawType } from '../utils/enum';import { BorderModel, FontModel, MarginModel, AnimationModel, EmptyPointSettingsModel } from '../../common/model/base-model';import { ConnectorModel } from '../../common/model/base-model';import { CornerRadiusModel } from '../../common/model/base-model';import { ErrorBarType, ErrorBarDirection, ErrorBarMode, TrendlineTypes, SeriesCategories } from '../utils/enum';import { Border, Font, Margin, Animation, EmptyPointSettings, CornerRadius, Connector } from '../../common/model/base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Chart } from '../chart';import { Axis, Column, Row } from '../axis/axis';import { Data } from '../../common/model/data';import { ISeriesRenderEventArgs } from '../../common/model/interface';import { seriesRender } from '../../common/model/constants';import { Alignment } from '../../common/utils/enum';import { BoxPlotMode, Segment } from '../utils/enum';
+import { Property, ChildProperty, Complex, Collection, SvgRenderer, DateFormatOptions } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';import { StackValues, RectOption, ControlPoints, PolarArc } from '../../common/utils/helper';import { firstToLowerCase, ChartLocation, Rect, CircleOption, IHistogramValues } from '../../common/utils/helper';import { ChartSeriesType, ChartShape, LegendShape, LabelPosition, SeriesValueType, EmptyPointMode, SplineType } from '../utils/enum';import { ChartDrawType } from '../utils/enum';import { BorderModel, FontModel, MarginModel, AnimationModel, EmptyPointSettingsModel } from '../../common/model/base-model';import { ConnectorModel } from '../../common/model/base-model';import { CornerRadiusModel } from '../../common/model/base-model';import { ErrorBarType, ErrorBarDirection, ErrorBarMode, TrendlineTypes } from '../utils/enum';import { Border, Font, Margin, Animation, EmptyPointSettings, CornerRadius, Connector } from '../../common/model/base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Chart } from '../chart';import { Axis, Column, Row } from '../axis/axis';import { Data } from '../../common/model/data';import { ISeriesRenderEventArgs } from '../../common/model/interface';import { seriesRender } from '../../common/model/constants';import { Alignment, SeriesCategories } from '../../common/utils/enum';import { BoxPlotMode, Segment } from '../utils/enum';
 
@@ -242,2 +242,3 @@ /**
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -700,2 +701,17 @@ intercept?: number;
     /**
+     * The bin interval of each histogram points.
+     * @default null
+     * @aspDefaultValueIgnore
+     */
+
+    binInterval?: number;
+
+    /**
+     * The normal distribution of histogram series.
+     * @default false
+     */
+
+    showNormalDistribution?: boolean;
+
+    /**
      * This property allows grouping series in `stacked column / bar` charts.
@@ -734,2 +750,3 @@ * Any string value can be provided to the stackingGroup property.
      * * Bar
+     * * Histogram
      * * StackingColumn
@@ -749,7 +766,7 @@ * * StackingArea
      * * Waterfall
-     * * RangeArea 
+     * * RangeArea
      * * Bubble
-     * * Candle 
-     * * Polar 
-     * * Radar 
+     * * Candle
+     * * Polar
+     * * Radar
      * * BoxAndWhisker
@@ -850,4 +867,6 @@ * @default 'Line'
     /**
-     * To render the column series points with particular column width.
-     * @default 0.7
+     * To render the column series points with particular column width. If the series type is histogram the
+     * default value is 1 otherwise 0.7.
+     * @default null
+     * @aspDefaultValueIgnore
      */
@@ -877,2 +896,3 @@ columnWidth?: number;
      * @default []
+     * @aspType int[]
      */
@@ -884,2 +904,3 @@ intermediateSumIndexes?: number[];
      * @default []
+     * @aspType int[]
      */
@@ -886,0 +907,0 @@ sumIndexes?: number[];

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

@@ -5,3 +5,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 import { ErrorBarSettingsModel, ErrorBarCapSettingsModel } from '../series/chart-series-model';
-import { ChartLocation, Rect } from '../../common/utils/helper';
+import { ChartLocation, Rect, IHistogramValues } from '../../common/utils/helper';
 import { ChartSeriesType, ChartShape, LegendShape, LabelPosition, SeriesValueType, SplineType } from '../utils/enum';
@@ -12,3 +12,3 @@ import { ChartDrawType } from '../utils/enum';
 import { CornerRadiusModel } from '../../common/model/base-model';
-import { ErrorBarType, ErrorBarDirection, ErrorBarMode, TrendlineTypes, SeriesCategories } from '../utils/enum';
+import { ErrorBarType, ErrorBarDirection, ErrorBarMode, TrendlineTypes } from '../utils/enum';
 import { DataManager, Query } from '@syncfusion/ej2-data';
@@ -18,3 +18,3 @@ import { Chart } from '../chart';
 import { Data } from '../../common/model/data';
-import { Alignment } from '../../common/utils/enum';
+import { Alignment, SeriesCategories } from '../../common/utils/enum';
 import { BoxPlotMode, Segment } from '../utils/enum';
@@ -234,2 +234,3 @@ /**
      * @default null
+     * @aspDefaultValueIgnore
      */
@@ -559,3 +560,3 @@ intercept: number;
     /** @private */
-    protected dataPoint(i: number, textMappingName: string): Points;
+    protected dataPoint(i: number, textMappingName: string, xName: string): Points;
     /**
@@ -686,2 +687,13 @@ * To set empty point value based on empty point mode
     /**
+     * The bin interval of each histogram points.
+     * @default null
+     * @aspDefaultValueIgnore
+     */
+    binInterval: number;
+    /**
+     * The normal distribution of histogram series.
+     * @default false
+     */
+    showNormalDistribution: boolean;
+    /**
      * This property allows grouping series in `stacked column / bar` charts.
@@ -713,2 +725,3 @@ * Any string value can be provided to the stackingGroup property.
      * * Bar
+     * * Histogram
      * * StackingColumn
@@ -812,4 +825,6 @@ * * StackingArea
     /**
-     * To render the column series points with particular column width.
-     * @default 0.7
+     * To render the column series points with particular column width. If the series type is histogram the
+     * default value is 1 otherwise 0.7.
+     * @default null
+     * @aspDefaultValueIgnore
      */
@@ -835,2 +850,3 @@ columnWidth: number;
      * @default []
+     * @aspType int[]
      */
@@ -841,2 +857,3 @@ intermediateSumIndexes: number[];
      * @default []
+     * @aspType int[]
      */
@@ -882,2 +899,4 @@ sumIndexes: number[];
     /** @private */
+    histogramValues: IHistogramValues;
+    /** @private */
     drawPoints: ControlPoints[];
@@ -913,8 +932,2 @@ /** @private */
     private findFrequencies(seriesCollection);
-    /**
-     * To find the log values.
-     * @return {void}
-     * @private
-     */
-    logWithIn(value: number, axis: Axis): number;
     /** @private */
@@ -921,0 +934,0 @@ renderSeries(chart: Chart, index: number): void;

src/chart/series/chart-series.js

@@ -263,10 +263,11 @@ var __extends = (this && this.__extends) || (function () {
             var i = 0;
-            var len = Object.keys(this.currentViewData).length;
             var point = new Points();
+            var xName = (this instanceof Series && this.type === 'Histogram') ? 'x' : this.xName;
             var textMappingName = this instanceof Series && this.marker.dataLabel.name ?
                 this.marker.dataLabel.name : '';
-            if (this instanceof Series && this.type === 'Waterfall') {
-                this.chart[helper_2.firstToLowerCase(this.type) + 'SeriesModule'].
-                    processWaterfallData(this.currentViewData, this);
+            if (this instanceof Series && (this.type === 'Waterfall' || this.type === 'Histogram')) {
+                this.currentViewData = this.chart[helper_2.firstToLowerCase(this.type) + 'SeriesModule'].
+                    processInternalData(this.currentViewData, this);
             }
+            var len = Object.keys(this.currentViewData).length;
             this.points = [];
@@ -281,3 +282,3 @@ this.xMin = Infinity;
                 while (i < len) {
-                    point = this.dataPoint(i, textMappingName);
+                    point = this.dataPoint(i, textMappingName, xName);
                     this.pushCategoryData(point, i, point.x);
@@ -297,3 +298,3 @@ this.pushData(point, i);
                 while (i < len) {
-                    point = this.dataPoint(i, textMappingName);
+                    point = this.dataPoint(i, textMappingName, xName);
                     point.x = new Date(ej2_data_1.DataUtil.parse.parseJson({ val: point.x }).val);
@@ -313,3 +314,3 @@ if (this.xAxis.valueType === 'DateTime') {
                 while (i < len) {
-                    point = this.dataPoint(i, textMappingName);
+                    point = this.dataPoint(i, textMappingName, xName);
                     point.xValue = point.x;
@@ -335,3 +336,3 @@ this.pushData(point, i);
         };
-        SeriesBase.prototype.dataPoint = function (i, textMappingName) {
+        SeriesBase.prototype.dataPoint = function (i, textMappingName, xName) {
             var point;
@@ -341,3 +342,3 @@ this.points[i] = new Points();
             var currentViewData = this.currentViewData;
-            point.x = ej2_base_2.getValue(this.xName, currentViewData[i]);
+            point.x = ej2_base_2.getValue(xName, currentViewData[i]);
             point.high = ej2_base_2.getValue(this.high, currentViewData[i]);
@@ -635,3 +636,3 @@ point.low = ej2_base_2.getValue(this.low, currentViewData[i]);
             var type = (series.type).toLowerCase();
-            return (type.indexOf('column') !== -1 || type.indexOf('bar') !== -1 ||
+            return (type.indexOf('column') !== -1 || type.indexOf('bar') !== -1 || type.indexOf('histogram') !== -1 ||
                 type.indexOf('hiloopenclose') !== -1 || type.indexOf('candle') !== -1 ||
@@ -742,11 +743,2 @@ type.indexOf('hilo') !== -1 || series.drawType.indexOf('Column') !== -1 ||
         };
-        Series.prototype.logWithIn = function (value, axis) {
-            if (axis.valueType === 'Logarithmic') {
-                value = helper_2.logBase(value, axis.logBase);
-            }
-            else {
-                value = value;
-            }
-            return value;
-        };
         Series.prototype.renderSeries = function (chart, index) {
@@ -885,2 +877,8 @@ var seriesType = helper_2.firstToLowerCase(this.type);
         __decorate([
+            ej2_base_1.Property(null)
+        ], Series.prototype, "binInterval", void 0);
+        __decorate([
+            ej2_base_1.Property(false)
+        ], Series.prototype, "showNormalDistribution", void 0);
+        __decorate([
             ej2_base_1.Property('')
@@ -940,3 +938,3 @@ ], Series.prototype, "stackingGroup", void 0);
         __decorate([
-            ej2_base_1.Property(0.7)
+            ej2_base_1.Property(null)
         ], Series.prototype, "columnWidth", void 0);
@@ -943,0 +941,0 @@ __decorate([

src/chart/series/column-base.js

@@ -16,3 +16,4 @@ define(["require", "exports", "@syncfusion/ej2-base", "../utils/double-range", "../../common/utils/helper", "../../common/utils/helper", "../../common/model/constants"], function (require, exports, ej2_base_1, double_range_1, helper_1, helper_2, constants_1) {
             var seriesSpacing = series.chart.enableSideBySidePlacement ? series.columnSpacing : 0;
-            var pointSpacing = series.columnWidth;
+            var pointSpacing = (series.columnWidth === null) ? ((series.type === 'Histogram') ? 1 : 0.7) :
+                series.columnWidth;
             var minimumPointDelta = helper_1.getMinPointsDelta(series.xAxis, visibleSeries);
@@ -85,2 +86,6 @@ var width = minimumPointDelta * pointSpacing;
             }
+            if (series.type === 'Histogram') {
+                point.minimum = +point.x - series.histogramValues.binWidth / 2;
+                point.maximum = +point.x + series.histogramValues.binWidth / 2;
+            }
         };
@@ -87,0 +92,0 @@ ColumnBase.prototype.updateXRegion = function (point, rect, series) {

src/chart/series/line-base.js

@@ -53,3 +53,3 @@ define(["require", "exports", "../../common/utils/helper", "@syncfusion/ej2-base"], function (require, exports, helper_1, ej2_base_1) {
         LineBase.prototype.renderMarker = function (series) {
-            if (series.marker.visible) {
+            if (series.marker && series.marker.visible) {
                 series.chart.markerRender.render(series);
@@ -82,4 +82,6 @@ }
         LineBase.prototype.storePointLocation = function (point, series, isInverted, getLocation) {
+            var markerWidth = (series.marker && series.marker.width) ? series.marker.width : 0;
+            var markerHeight = (series.marker && series.marker.height) ? series.marker.height : 0;
             point.symbolLocations.push(getLocation(point.xValue, point.yValue, series.xAxis, series.yAxis, isInverted, series));
-            point.regions.push(new helper_1.Rect(point.symbolLocations[0].x - series.marker.width, point.symbolLocations[0].y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height));
+            point.regions.push(new helper_1.Rect(point.symbolLocations[0].x - markerWidth, point.symbolLocations[0].y - markerHeight, 2 * markerWidth, 2 * markerHeight));
         };
@@ -86,0 +88,0 @@ LineBase.prototype.doLinearAnimation = function (series, animation) {

src/chart/series/line-series.js

@@ -26,3 +26,5 @@ var __extends = (this && this.__extends) || (function () {
             var options;
-            var getCoordinate = series.chart.chartAreaType === 'PolarRadar' ? helper_1.TransformToVisible : helper_1.getPoint;
+            var isPolar = (series.chart && series.chart.chartAreaType === 'PolarRadar');
+            var isDrop = (series.emptyPointSettings && series.emptyPointSettings.mode === 'Drop');
+            var getCoordinate = isPolar ? helper_1.TransformToVisible : helper_1.getPoint;
             var visiblePoints = this.improveChartPerformance(series);
@@ -39,8 +41,8 @@ for (var _i = 0, visiblePoints_1 = visiblePoints; _i < visiblePoints_1.length; _i++) {
                 else {
-                    prevPoint = (series.emptyPointSettings.mode === 'Drop') ? prevPoint : null;
-                    startPoint = (series.emptyPointSettings.mode === 'Drop') ? startPoint : 'M';
+                    prevPoint = isDrop ? prevPoint : null;
+                    startPoint = isDrop ? startPoint : 'M';
                     point.symbolLocations = [];
                 }
             }
-            if (series.chart.chartAreaType === 'PolarRadar') {
+            if (isPolar) {
                 if (series.isClosed) {
@@ -47,0 +49,0 @@ point2 = getCoordinate(visiblePoints[visiblePoints.length - 1].xValue, visiblePoints[visiblePoints.length - 1].yValue, xAxis, yAxis, isInverted, series);

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

@@ -37,3 +37,3 @@ import { Chart } from '../chart';
      */
-    processWaterfallData(json: Object[], series: Series): Object[];
+    processInternalData(json: Object[], series: Series): Object[];
     /**
@@ -40,0 +40,0 @@ * Animates the series.

src/chart/series/waterfall-series.js

@@ -111,3 +111,3 @@ var __extends = (this && this.__extends) || (function () {
         };
-        WaterfallSeries.prototype.processWaterfallData = function (json, series) {
+        WaterfallSeries.prototype.processInternalData = function (json, series) {
             var data = json;
@@ -114,0 +114,0 @@ var length = json.length;

src/chart/technical-indicators/technical-indicator-model.d.ts

@@ -89,2 +89,3 @@ import { Property, Complex } from '@syncfusion/ej2-base';import { TechnicalIndicators, FinancialDataFields, MacdType } from './../utils/enum';import { ConnectorModel } from '../../common/model/base-model';import { Connector } from '../../common/model/base';import { Series, SeriesBase } from '../series/chart-series';import { Rect, firstToLowerCase } from '../../common/utils/helper';import { Chart } from '../chart';
      * Defines the color of the positive bars in Macd indicators
+     * @default '#2ecd71'
      */
@@ -95,2 +96,3 @@ macdPositiveColor?: string;
      * Defines the color of the negative bars in Macd indicators
+     * @default '#e74c3d'
      */
@@ -97,0 +99,0 @@ macdNegativeColor?: string;

src/chart/technical-indicators/technical-indicator.d.ts

@@ -78,2 +78,3 @@ /// <reference path="../series/chart-series-model.d.ts" />
      * Defines the color of the positive bars in Macd indicators
+     * @default '#2ecd71'
      */
@@ -83,2 +84,3 @@ macdPositiveColor: string;
      * Defines the color of the negative bars in Macd indicators
+     * @default '#e74c3d'
      */
@@ -85,0 +87,0 @@ macdNegativeColor: string;

src/chart/user-interaction/crosshair.js

@@ -183,10 +183,13 @@ define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper"], function (require, exports, ej2_base_1, helper_1) {
             var islabelInside = axis.labelPosition === 'Inside';
+            var scrollBarHeight = axis.zoomingScrollBar && axis.zoomingScrollBar.svgObject ? axis.scrollBarHeight : 0;
             this.elementSize = helper_1.measureText(text, axis.crosshairTooltip.textStyle);
             if (axis.orientation === 'Horizontal') {
-                var yLocation = islabelInside ? axisRect.y - this.elementSize.height - (padding * 2 + arrowPadding) : axisRect.y;
+                var yLocation = islabelInside ? axisRect.y - this.elementSize.height - (padding * 2 + arrowPadding) :
+                    axisRect.y + scrollBarHeight;
                 var height = islabelInside ? axisRect.y - this.elementSize.height - arrowPadding : axisRect.y + arrowPadding;
                 this.arrowLocation = new helper_1.ChartLocation(this.valueX, yLocation);
-                tooltipRect = new helper_1.Rect((this.valueX - (this.elementSize.width / 2) - padding), height, this.elementSize.width + padding * 2, this.elementSize.height + padding * 2);
+                tooltipRect = new helper_1.Rect((this.valueX - (this.elementSize.width / 2) - padding), height + (!islabelInside ? scrollBarHeight : 0), this.elementSize.width + padding * 2, this.elementSize.height + padding * 2);
                 if (axis.opposedPosition) {
-                    tooltipRect.y = islabelInside ? axisRect.y : axisRect.y - (this.elementSize.height + padding * 2 + arrowPadding);
+                    tooltipRect.y = islabelInside ? axisRect.y : axisRect.y -
+                        (this.elementSize.height + padding * 2 + arrowPadding) - scrollBarHeight;
                 }
@@ -207,7 +210,10 @@ if (tooltipRect.x < boundsX) {
             else {
+                scrollBarHeight = scrollBarHeight * (axis.opposedPosition ? 1 : -1);
                 this.arrowLocation = new helper_1.ChartLocation(axisRect.x, this.valueY);
-                var width = islabelInside ? axisRect.x : axisRect.x - (this.elementSize.width) - (padding * 2 + arrowPadding);
-                tooltipRect = new helper_1.Rect(width, this.valueY - (this.elementSize.height / 2) - padding, this.elementSize.width + (padding * 2), this.elementSize.height + padding * 2);
+                var width = islabelInside ? axisRect.x - scrollBarHeight :
+                    axisRect.x - (this.elementSize.width) - (padding * 2 + arrowPadding);
+                tooltipRect = new helper_1.Rect(width + scrollBarHeight, this.valueY - (this.elementSize.height / 2) - padding, this.elementSize.width + (padding * 2), this.elementSize.height + padding * 2);
                 if (axis.opposedPosition) {
-                    tooltipRect.x = islabelInside ? axisRect.x - this.elementSize.width - arrowPadding : axisRect.x + arrowPadding;
+                    tooltipRect.x = islabelInside ? axisRect.x - this.elementSize.width - arrowPadding :
+                        axisRect.x + arrowPadding + scrollBarHeight;
                     if ((tooltipRect.x + tooltipRect.width) > this.chart.availableSize.width) {
@@ -214,0 +220,0 @@ this.arrowLocation.x -= ((tooltipRect.x + tooltipRect.width) - this.chart.availableSize.width);

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

@@ -32,5 +32,9 @@ import { Chart } from '../chart';
     private findHeader(data);
+    private findShapes();
     private renderSeriesTooltip(chart, isFirst, tooltipDiv);
+    private findMarkerHeight(pointData);
     private findData(data, previous);
     private getSymbolLocation(data);
+    private getRangeArea(data, location);
+    private getWaterfallRegion(data, location);
     private getTooltipText(pointData);
@@ -40,5 +44,4 @@ private getTemplateText(data);
     private renderGroupedTooltip(chart, isFirst, tooltipDiv);
+    private findSharedLocation();
     private getBoxLocation(data);
-    private drawMarker(isBottom, isRight, size);
-    private findColor(data, series);
     private parseTemplate(point, series, format, xAxis, yAxis);
@@ -50,8 +53,2 @@ private formatPointValue(point, axis, dataValue, isXPoint, isYPoint);
     /**
-     * Removes the tooltip on mouse leave.
-     * @return {void}
-     * @private
-     */
-    removeTooltip(duration: number): void;
-    /**
      * Get module name.
@@ -58,0 +55,0 @@ */

src/chart/user-interaction/tooltip.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper", "../../common/user-interaction/tooltip"], function (require, exports, ej2_base_1, ej2_base_2, helper_1, helper_2, tooltip_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper", "../../common/user-interaction/tooltip"], function (require, exports, ej2_base_1, helper_1, helper_2, tooltip_1) {
     "use strict";
@@ -75,3 +75,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
         Tooltip.prototype.tooltip = function () {
-            var isTooltip = this.getElement(this.element.id + '_tooltip');
+            var svgElement = this.getElement(this.element.id + '_tooltip_svg');
+            var isTooltip = (svgElement && parseInt(svgElement.getAttribute('opacity'), 10) > 0);
             var tooltipDiv = this.getTooltipElement(isTooltip);
@@ -86,31 +87,36 @@ if (!this.chart.tooltip.shared) {
         Tooltip.prototype.findHeader = function (data) {
+            if (this.header === '') {
+                return '';
+            }
             this.header = this.parseTemplate(data.point, data.series, this.header, data.series.xAxis, data.series.yAxis);
             if (this.header.replace(/<b>/g, '').replace(/<\/b>/g, '').trim() !== '') {
-                this.formattedText = this.formattedText.concat(this.header);
+                return this.header;
             }
+            return '';
         };
+        Tooltip.prototype.findShapes = function () {
+            var marker = [];
+            for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {
+                var data = _a[_i];
+                marker.push(data.point.marker.shape || data.series.marker.shape);
+            }
+            return marker;
+        };
         Tooltip.prototype.renderSeriesTooltip = function (chart, isFirst, tooltipDiv) {
             var data = this.getData();
-            var markerSide;
             data.lierIndex = this.lierIndex;
             var rect = chart.chartAxisLayoutPanel.seriesClipRect;
             this.currentPoints = [];
+            var tool;
             if (this.findData(data, this.previousPoints[0])) {
                 if (this.pushData(data, isFirst, tooltipDiv, true)) {
-                    var text = this.getTooltipText(data);
-                    if (!chart.tooltip.template) {
-                        if (this.header !== '') {
-                            this.findHeader(data);
-                        }
-                        markerSide = this.renderTooltip(data, rect, this.getSymbolLocation(data), text, isFirst, chart.chartAreaType === 'Cartesian');
-                        if (markerSide) {
-                            this.drawMarker(markerSide.isBottom, markerSide.isRight, 10);
-                        }
+                    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));
                     }
                     else {
-                        this.renderTemplate(data, rect, this.getSymbolLocation(data), this.getTemplateText(data), isFirst);
+                        this.removeHighlight(this.control);
+                        this.getElement(this.element.id + '_tooltip').remove();
                     }
                     this.isRemove = true;
                 }
-                this.previousPoints = ej2_base_1.extend([], this.currentPoints, null, true);
             }
@@ -135,2 +141,11 @@ else {
         };
+        Tooltip.prototype.findMarkerHeight = function (pointData) {
+            var markerHeight = 0;
+            var series = pointData.series;
+            if (!series.isRectSeries) {
+                markerHeight = (this.chart.tooltip.shared || series.marker.visible || series.type === 'Scatter'
+                    || series.drawType === 'Scatter') ? ((series.marker.height + 2) / 2 + (2 * series.marker.border.width)) : 0;
+            }
+            return markerHeight;
+        };
         Tooltip.prototype.findData = function (data, previous) {
@@ -141,21 +156,62 @@ return data.point && ((!previous || (previous.point !== data.point)) ||
         Tooltip.prototype.getSymbolLocation = function (data) {
-            return data.series.type === 'BoxAndWhisker' ?
-                this.getBoxLocation(data) : data.point.symbolLocations[0];
+            var location;
+            if (data.series.type !== 'BoxAndWhisker') {
+                if (!data.point.symbolLocations[0]) {
+                    return null;
+                }
+                location = new helper_1.ChartLocation(data.point.symbolLocations[0].x, data.point.symbolLocations[0].y);
+            }
+            switch (data.series.type) {
+                case 'BoxAndWhisker':
+                    return this.getBoxLocation(data);
+                case 'Waterfall':
+                    return this.getWaterfallRegion(data, location);
+                case 'RangeArea':
+                    return this.getRangeArea(data, location);
+                default:
+                    return location;
+            }
         };
+        Tooltip.prototype.getRangeArea = function (data, location) {
+            if (data.point.regions[0]) {
+                if (!this.inverted) {
+                    location.y = data.point.regions[0].y + data.point.regions[0].height / 2;
+                }
+                else {
+                    location.x = data.point.regions[0].x + data.point.regions[0].width / 2;
+                }
+            }
+            return location;
+        };
+        Tooltip.prototype.getWaterfallRegion = function (data, location) {
+            if (!this.inverted) {
+                location.y = (data.point.y < 0) ?
+                    location.y - data.point.regions[0].height : location.y;
+            }
+            else {
+                location.x = (data.point.y < 0) ?
+                    location.x + data.point.regions[0].width : location.x;
+            }
+            return location;
+        };
         Tooltip.prototype.getTooltipText = function (pointData) {
             var series = pointData.series;
-            var text;
             return this.parseTemplate(pointData.point, series, this.getFormat(this.chart, series), series.xAxis, series.yAxis);
         };
         Tooltip.prototype.getTemplateText = function (data) {
-            var point = ej2_base_1.extend({}, data.point);
-            point.x = this.formatPointValue(data.point, data.series.xAxis, 'x', true, false);
-            if ((data.series.seriesType === 'XY')) {
-                point.y = this.formatPointValue(data.point, data.series.yAxis, 'y', false, true);
+            if (this.chart.tooltip.template) {
+                var point = ej2_base_1.extend({}, data.point);
+                point.x = this.formatPointValue(data.point, data.series.xAxis, 'x', true, false);
+                if ((data.series.seriesType === 'XY')) {
+                    point.y = this.formatPointValue(data.point, data.series.yAxis, 'y', false, true);
+                }
+                else {
+                    point.low = this.formatPointValue(data.point, data.series.yAxis, 'low', false, true);
+                    point.high = this.formatPointValue(data.point, data.series.yAxis, 'high', false, true);
+                }
+                return point;
             }
             else {
-                point.low = this.formatPointValue(data.point, data.series.yAxis, 'low', false, true);
-                point.high = this.formatPointValue(data.point, data.series.yAxis, 'high', false, true);
+                return data.point;
             }
-            return point;
         };
@@ -189,3 +245,3 @@ Tooltip.prototype.findMouseValue = function (data, chart) {
             var extraPoints = [];
-            var markerSide;
+            var headerContent = '';
             if (isFirst) {
@@ -207,8 +263,5 @@ document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);
                 if (data && this.header !== '' && this.currentPoints.length === 0) {
-                    this.findHeader(data);
+                    headerContent = this.findHeader(data);
                 }
                 if (data && this.triggerEvent(data, isFirst, this.getTooltipText(data))) {
-                    if (series.category === 'Series') {
-                        this.highlightPoints(data);
-                    }
                     this.findMouseValue(data, chart);
@@ -223,12 +276,16 @@ this.currentPoints.push(data);
             if (this.currentPoints.length > 0) {
-                this.renderText(isFirst, chart);
-                markerSide = this.renderTooltipElement(chart, this.currentPoints[0], chart.chartAxisLayoutPanel.seriesClipRect, this.getSymbolLocation(this.currentPoints[0]), chart.chartAreaType === 'Cartesian', isFirst);
-                this.drawMarker(markerSide.isBottom, markerSide.isRight, 10);
+                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);
             }
-            else {
+            else if (this.getElement(this.element.id + '_tooltip_path')) {
                 this.getElement(this.element.id + '_tooltip_path').setAttribute('d', '');
             }
-            this.currentPoints = this.currentPoints.concat(extraPoints);
-            this.previousPoints = ej2_base_1.extend([], this.currentPoints, null, true);
         };
+        Tooltip.prototype.findSharedLocation = function () {
+            if (this.currentPoints.length > 1) {
+                return new helper_1.ChartLocation(this.valueX, this.valueY);
+            }
+            else {
+                return this.getSymbolLocation(this.currentPoints[0]);
+            }
+        };
         Tooltip.prototype.getBoxLocation = function (data) {
@@ -243,28 +300,2 @@ var location;
         };
-        Tooltip.prototype.drawMarker = function (isBottom, isRight, size) {
-            var shapeOption;
-            var count = 0;
-            var series;
-            var markerGroup = this.chart.renderer.createGroup({ id: this.element.id + '_tooltip_trackball_group' });
-            var groupElement = this.getElement(this.element.id + '_tooltip_group');
-            var x = (this.padding * 2) + (size / 2) + (isRight ? this.arrowPadding : 0);
-            for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {
-                var data = _a[_i];
-                series = data.series;
-                if (series.visible && series.enableTooltip && data.point.visible) {
-                    shapeOption = new helper_2.PathOption(this.element.id + '_Tooltip_Trackball_' + series.index, this.findColor(data, series) || series.interior, 1, '#cccccc', series.opacity, null);
-                    markerGroup.appendChild(helper_2.drawSymbol(new helper_1.ChartLocation(x, this.markerPoint[count] - this.padding + (isBottom ? this.arrowPadding : 0)), data.point.marker.shape || series.marker.shape, new helper_1.Size(size, size), series.marker.imageUrl, shapeOption, null));
-                    count++;
-                }
-            }
-            groupElement.appendChild(markerGroup);
-        };
-        Tooltip.prototype.findColor = function (data, series) {
-            if (series.isRectSeries) {
-                return data.point.color;
-            }
-            else {
-                return (data.point.color && data.point.color !== '#ffffff' ? data.point.color : data.point.interior) || series.marker.fill;
-            }
-        };
         Tooltip.prototype.parseTemplate = function (point, series, format, xAxis, yAxis) {
@@ -326,3 +357,4 @@ var val;
             }
-            var format = !chart.tooltip.shared ? '${point.x}' : '${series.name}';
+            var textX = (series.type === 'Histogram') ? '${point.minimum}' + '-' + '${point.maximum}' : '${point.x}';
+            var format = !chart.tooltip.shared ? textX : '${series.name}';
             switch (series.seriesType) {
@@ -370,34 +402,2 @@ case 'XY':
         };
-        Tooltip.prototype.removeTooltip = function (duration) {
-            var _this = this;
-            var chart = this.chart;
-            var tooltipElement = this.getElement(this.element.id + '_tooltip');
-            this.stopAnimation();
-            if (tooltipElement && this.previousPoints.length > 0) {
-                var data_2 = this.previousPoints;
-                this.toolTipInterval = setTimeout(function () {
-                    var rectOpacity;
-                    var tooltipGroup = tooltipElement.firstChild;
-                    var series = data_2[0].series;
-                    var element = _this.getElement(chart.element.id + '_Series_' + data_2[0].series.index
-                        + '_Point_' + data_2[0].point.index);
-                    var opacity = parseFloat(tooltipGroup.getAttribute('opacity')) || 1;
-                    if (element && series.isRectSeries && !chart.tooltip.shared) {
-                        rectOpacity = parseFloat(element.getAttribute('opacity'));
-                    }
-                    new ej2_base_2.Animation({}).animate(tooltipGroup, {
-                        duration: 200,
-                        progress: function (args) {
-                            _this.progressAnimation(element, tooltipGroup, series, opacity, rectOpacity, (args.timeStamp / args.duration), series.isRectSeries, !chart.tooltip.shared);
-                        },
-                        end: function (model) {
-                            _this.valueX = null;
-                            _this.valueY = null;
-                            _this.endAnimation(element, tooltipGroup, series, chart.tooltip.shared);
-                            _this.removeHighlightedMarker(data_2);
-                        }
-                    });
-                }, duration);
-            }
-        };
         Tooltip.prototype.getModuleName = function () {
@@ -404,0 +404,0 @@ return 'Tooltip';

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

@@ -118,2 +118,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper"], function (require, exports, ej2_base_1, ej2_base_2, helper_1, helper_2) {
                 axis.zoomPosition = 0;
+                if (axis.zoomingScrollBar) {
+                    axis.zoomingScrollBar.isScrollUI = false;
+                }
             });
@@ -120,0 +123,0 @@ chart.disableTrackTooltip = false;

src/chart/user-interaction/zooming.js

@@ -22,2 +22,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "./zooming-toolkit", "../../common/model/constants", "../../common/utils/helper"], function (require, exports, ej2_base_1, helper_1, zooming_toolkit_1, constants_1, helper_2) {
             this.isZoomed = this.performedUI = this.zooming.enablePan && this.zooming.enableSelectionZooming;
+            if (zooming.enableScrollbar) {
+                chart.scrollElement = ej2_base_1.createElement('div', { id: chart.element.id + '_scrollElement' });
+            }
         }
@@ -312,3 +315,3 @@ Zoom.prototype.renderZooming = function (e, chart, isTouch) {
                     if (value.category === 'Indicator') {
-                        value.seriesElement.parentElement.setAttribute('transform', translate);
+                        value.seriesElement.parentNode.setAttribute('transform', translate);
                     }
@@ -315,0 +318,0 @@ else {

src/chart/utils/enum.d.ts

@@ -46,2 +46,3 @@ /**
  * * bar - Renders the stacking column series
+ * * histogram - Renders the histogram series
  * * stackingColumn - Renders the stacking column series.
@@ -63,3 +64,3 @@ * * stackingArea - Renders the stacking area series
  */
-export declare type ChartSeriesType = 'Line' | 'Column' | 'Area' | 'Bar' | 'StackingColumn' | 'StackingArea' | 'StackingBar' | 'StepLine' | 'StepArea' | 'SplineArea' | 'Scatter' | 'Spline' | 'StackingColumn100' | 'StackingBar100' | 'StackingArea100' | 'RangeColumn' | 'Hilo' | 'HiloOpenClose' | 'Waterfall' | 'RangeArea' | 'Bubble' | 'Candle' | 'Polar' | 'Radar' | 'BoxAndWhisker' | 'MultiColoredLine' | 'MultiColoredArea';
+export declare type ChartSeriesType = 'Line' | 'Column' | 'Area' | 'Bar' | 'Histogram' | 'StackingColumn' | 'StackingArea' | 'StackingBar' | 'StepLine' | 'StepArea' | 'SplineArea' | 'Scatter' | 'Spline' | 'StackingColumn100' | 'StackingBar100' | 'StackingArea100' | 'RangeColumn' | 'Hilo' | 'HiloOpenClose' | 'Waterfall' | 'RangeArea' | 'Bubble' | 'Candle' | 'Polar' | 'Radar' | 'BoxAndWhisker' | 'MultiColoredLine' | 'MultiColoredArea';
 /**
@@ -283,4 +284,2 @@ * * Type of series to be drawn in radar or polar series. They are
 export declare type TrendlineTypes = 'Linear' | 'Exponential' | 'Polynomial' | 'Power' | 'Logarithmic' | 'MovingAverage';
-/** @private */
-export declare type SeriesCategories = 'TrendLine' | 'Indicator' | 'Series';
 /**
@@ -287,0 +286,0 @@ * Defines the financial data fields

src/common/legend/legend.js

@@ -261,3 +261,3 @@ var __extends = (this && this.__extends) || (function () {
             if (shape === 'Line' && legendOption.markerVisibility && legendOption.markerShape !== 'Image' ||
-                legendOption.type === 'Doughnut') {
+                (legendOption.type === 'Doughnut' && this.chart.series[0].legendShape === 'SeriesType')) {
                 symbolOption.id = this.legendID + this.generateId(legendOption, '_shape_marker_', i);
@@ -264,0 +264,0 @@ shape = legendOption.type === 'Doughnut' ? 'Circle' : legendOption.markerShape;

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

@@ -207,2 +207,3 @@ 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';
      * @default 0
+     * @aspType int
      */
@@ -214,2 +215,3 @@ series?: number;
      * @default 0
+     * @aspType int
      */
@@ -304,3 +306,4 @@ point?: number;
     /**
-     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string. 
+     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.
+     * @default null 
      */
@@ -312,2 +315,3 @@
      * Header for tooltip. 
+     * @default null
      */
@@ -319,2 +323,3 @@
      * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string. 
+     * @default 0.75
      */
@@ -321,0 +326,0 @@

src/common/model/base.d.ts

@@ -166,2 +166,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * @default 0
+     * @aspType int
      */
@@ -172,2 +173,3 @@ series: number;
      * @default 0
+     * @aspType int
      */
@@ -245,2 +247,3 @@ point: number;
      * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -250,2 +253,3 @@ fill: string;
      * Header for tooltip.
+     * @default null
      */
@@ -255,2 +259,3 @@ header: string;
      * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.
+     * @default 0.75
      */
@@ -257,0 +262,0 @@ opacity: number;

src/common/model/interface.d.ts

@@ -8,4 +8,6 @@ import { Chart, Alignment } from '../../chart';
 import { BorderModel, FontModel } from './base-model';
-import { ChartLocation } from '../utils/helper';
+import { ChartLocation, Size } from '../utils/helper';
 import { AccPoints, AccumulationSeries } from '../../accumulation-chart/model/acc-base';
+import { AccumulationChart } from '../../accumulation-chart';
+import { RangeNavigator } from '../../range-navigator';
 export interface IChartEventArgs {
@@ -164,2 +166,3 @@ /** Defines the name of the event */
     fontFamily?: string;
+    opacity?: number;
 }
@@ -202,2 +205,22 @@ /** @private */
 }
+export interface IResizeEventArgs {
+    /** Defines the name of the Event */
+    name: string;
+    /** Defines the previous size of the accumulation chart */
+    previousSize: Size;
+    /** Defines the current size of the accumulation chart */
+    currentSize: Size;
+    /** Defines the accumulation chart instance */
+    chart: Chart | AccumulationChart;
+}
+export interface IResizeRangeNavigatorEventArgs {
+    /** Defines the name of the Event */
+    name: string;
+    /** Defines the previous size of the accumulation chart */
+    previousSize: Size;
+    /** Defines the current size of the accumulation chart */
+    currentSize: Size;
+    /** Defines the range navigator instance */
+    rangeNavigator: RangeNavigator;
+}
 /** @private */
@@ -242,1 +265,15 @@ export interface IBoxPlotQuartile {
 }
+/** @private */
+/**
+ * Specifies the Theme style for scrollbar.
+ */
+export interface IScrollbarThemeStyle {
+    backRect: string;
+    thumb: string;
+    circle: string;
+    circleHover: string;
+    arrow: string;
+    grip: string;
+    arrowHover?: string;
+    backRectBorder?: string;
+}

src/common/model/theme.d.ts

 import { IFontMapping } from './interface';
 import { AccumulationTheme } from '../../accumulation-chart/model/enum';
 import { ChartTheme } from '../../chart/utils/enum';
-import { IThemeStyle } from '../../index';
+import { IThemeStyle, IScrollbarThemeStyle } from '../../index';
 /**
@@ -28,1 +28,3 @@ * Specifies Chart Themes
 export declare function getThemeColor(theme: ChartTheme | AccumulationTheme): IThemeStyle;
+/** @private */
+export declare function getScrollbarThemeColor(theme: ChartTheme): IScrollbarThemeStyle;

src/common/model/theme.js

@@ -140,2 +140,51 @@ define(["require", "exports"], function (require, exports) {
     exports.getThemeColor = getThemeColor;
+    function getScrollbarThemeColor(theme) {
+        var scrollStyle;
+        switch (theme) {
+            case 'Highcontrast':
+                scrollStyle = {
+                    backRect: '#333',
+                    thumb: '#bfbfbf',
+                    circle: '#fff',
+                    circleHover: '#685708',
+                    arrow: '#333',
+                    grip: '#333',
+                    arrowHover: '#fff',
+                    backRectBorder: '#969696',
+                };
+                break;
+            case 'Bootstrap':
+                scrollStyle = {
+                    backRect: '#f5f5f5',
+                    thumb: '#e6e6e6',
+                    circle: '#fff',
+                    circleHover: '#eee',
+                    arrow: '#8c8c8c',
+                    grip: '#8c8c8c'
+                };
+                break;
+            case 'Fabric':
+                scrollStyle = {
+                    backRect: '#f8f8f8',
+                    thumb: '#eaeaea',
+                    circle: '#fff',
+                    circleHover: '#eaeaea',
+                    arrow: '#a6a6a6',
+                    grip: '#a6a6a6'
+                };
+                break;
+            default:
+                scrollStyle = {
+                    backRect: '#f5f5f5',
+                    thumb: '#e0e0e0',
+                    circle: '#fff',
+                    circleHover: '#eee',
+                    arrow: '#9e9e9e',
+                    grip: '#9e9e9e'
+                };
+                break;
+        }
+        return scrollStyle;
+    }
+    exports.getScrollbarThemeColor = getScrollbarThemeColor;
 });

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

@@ -9,2 +9,4 @@ import { Chart } from '../../chart';
 import { FontModel } from '../../common/model/base-model';
+import { Tooltip as SVGTooltip } from '@syncfusion/ej2-svg-base';
+import { ChartShape } from '../../chart/utils/enum';
 /**
@@ -19,13 +21,6 @@ * Tooltip Module used to render the tooltip for series.
     toolTipInterval: number;
-    padding: number;
-    arrowPadding: number;
     textElements: Element[];
-    templateFn: Function;
-    rx: number;
-    ry: number;
-    isComplete: boolean;
     inverted: boolean;
     formattedText: string[];
     header: string;
-    markerPoint: number[];
     /** @private */
@@ -35,4 +30,5 @@ valueX: number;
     valueY: number;
-    tipRadius: number;
     control: AccumulationChart | Chart;
+    text: string[];
+    svgTooltip: SVGTooltip;
     /**
@@ -49,29 +45,23 @@ * Constructor for tooltip module.
      */
-    getTooltipElement(isTooltip: HTMLElement): HTMLDivElement;
-    private createElement(chart);
+    getTooltipElement(isTooltip: boolean): HTMLDivElement;
+    private createElement();
     pushData(data: PointData | AccPointData, isFirst: boolean, tooltipDiv: HTMLDivElement, isChart: boolean): boolean;
-    renderTooltip(data: PointData | AccPointData, areaRect: Rect, location: ChartLocation, textCollection: string, isFirst: boolean, cartesain: boolean): Side;
-    renderTemplate(data: PointData | AccPointData, rect: Rect, location: ChartLocation, point: Points | AccPoints, isFirst: boolean): void;
-    renderTooltipElement(chart: Chart | AccumulationChart, pointData: PointData | AccPointData, areaRect: Rect, location: ChartLocation, cartesain: boolean, isFirst: boolean): Side;
-    private changeText(point, isBottom, isRight, rect);
-    renderText(isRender: boolean, chart: Chart | AccumulationChart): void;
-    private createTemplate(point, data, areaRect, location, parent, isFirst);
-    private sharedTooltipLocation(bounds, x, y);
-    private seriesTooltipLocation(pointData, bounds, symbolLocation, arrowLocation, tipLocation);
-    progressAnimation(element: HTMLElement, tooltipGroup: HTMLElement, series: Series | AccumulationSeries, opacity: number, rectOpacity: number, timeStamp: number, isRect: boolean, shared: boolean): void;
-    endAnimation(element: HTMLElement, tooltipGroup: HTMLElement, series: Series | AccumulationSeries, shared: boolean): void;
     removeHighlight(chart: Chart | AccumulationChart): void;
     highlightPoint(series: Series | AccumulationSeries, pointIndex: number, highlight: boolean): void;
-    highlightPoints(item: PointData | AccPointData): void;
-    private animateTooltipDiv(tooltipDiv, rect);
-    private updateDiv(tooltipDiv, x, y);
+    highlightPoints(): 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();
+    private findColor(data, series);
+    updatePreviousPoint(extraPoints: PointData[]): void;
+    fadeOut(data: PointData[], chart: Chart | AccumulationChart): void;
+    removeHighlightedMarker(data: PointData[]): void;
     triggerEvent(point: PointData | AccPointData, isFirst: boolean, textCollection: string, firstText?: boolean): boolean;
     removeText(): void;
-    private updateTemplateFn(chart);
     stopAnimation(): void;
+    /**
+     * Removes the tooltip on mouse leave.
+     * @return {void}
+     * @private
+     */
+    removeTooltip(duration: number): void;
 }
-export declare class Side {
-    isRight: boolean;
-    isBottom: boolean;
-    constructor(bottom: boolean, right: boolean);
-}

src/common/user-interaction/tooltip.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper", "../../chart/utils/get-data", "../../common/model/constants", "../../common/model/theme"], function (require, exports, ej2_base_1, ej2_base_2, helper_1, helper_2, get_data_1, constants_1, theme_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper", "../../chart/utils/get-data", "../../common/model/constants", "@syncfusion/ej2-svg-base"], function (require, exports, ej2_base_1, helper_1, helper_2, get_data_1, constants_1, ej2_svg_base_1) {
     "use strict";
@@ -19,7 +19,2 @@ Object.defineProperty(exports, "__esModule", { value: true });
             var _this = _super.call(this, chart) || this;
-            _this.padding = 5;
-            _this.arrowPadding = 12;
-            _this.rx = 2;
-            _this.ry = 2;
-            _this.markerPoint = [];
             _this.element = _this.chart.element;
@@ -35,20 +30,12 @@ _this.textStyle = chart.tooltip.textStyle;
             this.inverted = this.chart.requireInvertedAxis;
-            this.updateTemplateFn(this.control);
-            this.formattedText = [];
             this.header = (this.control.tooltip.header === null) ?
                 ((this.control.tooltip.shared) ? '<b>${point.x}</b>' : '<b>${series.name}</b>')
                 : (this.control.tooltip.header);
+            this.formattedText = [];
             if (!isTooltip) {
-                var elementCollection = document.getElementsByClassName('ejSVGTooltip');
-                for (var i = elementCollection.length - 1; i >= 0; i--) {
-                    if (!this.getElement(this.element.id).contains(elementCollection[i])) {
-                        elementCollection[i].remove();
-                    }
-                }
-                return this.createElement(this.control);
+                return this.createElement();
             }
             return null;
         };
-        BaseTooltip.prototype.createElement = function (chart) {
-            this.textElements = [];
+        BaseTooltip.prototype.createElement = function () {
             var tooltipDiv = document.createElement('div');
@@ -58,14 +45,2 @@ tooltipDiv.id = this.element.id + '_tooltip';
             tooltipDiv.setAttribute('style', 'pointer-events:none; position:absolute;z-index: 1');
-            if (!chart.tooltip.template || chart.tooltip.shared) {
-                var svgObject = chart.renderer.createSvg({ id: this.element.id + '_tooltip_svg' });
-                tooltipDiv.appendChild(svgObject);
-                var groupElement = chart.renderer.createGroup({ id: this.element.id + '_tooltip_group' });
-                svgObject.appendChild(groupElement);
-                var pathElement = chart.renderer.drawPath({
-                    'id': this.element.id + '_tooltip_path', 'stroke-width': chart.tooltip.border.width,
-                    'fill': chart.tooltip.fill || chart.themeStyle.tooltipFill, 'opacity': chart.tooltip.opacity,
-                    'stroke': chart.tooltip.border.color
-                });
-                groupElement.appendChild(pathElement);
-            }
             return tooltipDiv;
@@ -89,357 +64,2 @@ };
         };
-        BaseTooltip.prototype.renderTooltip = function (data, areaRect, location, textCollection, isFirst, cartesain) {
-            if (this.triggerEvent(data, isFirst, textCollection)) {
-                this.renderText(isFirst, this.control);
-                this.removeHighlight(this.control);
-                this.highlightPoints(data);
-                return this.renderTooltipElement(this.control, data, areaRect, location, cartesain, isFirst);
-            }
-            else {
-                this.removeHighlight(this.control);
-                this.getElement(this.element.id + '_tooltip').remove();
-                return null;
-            }
-        };
-        BaseTooltip.prototype.renderTemplate = function (data, rect, location, point, isFirst) {
-            this.removeHighlight(this.control);
-            this.createTemplate(point, data, rect, location, this.getElement(this.element.id + '_tooltip'), isFirst);
-        };
-        BaseTooltip.prototype.renderTooltipElement = function (chart, pointData, areaRect, location, cartesain, isFirst) {
-            var tooltipDiv = this.getElement(this.element.id + '_tooltip');
-            var arrowLocation = new helper_1.ChartLocation(0, 0);
-            var tipLocation = new helper_1.ChartLocation(0, 0);
-            var textHeights;
-            var svgObject = this.getElement(this.element.id + '_tooltip_svg');
-            var groupElement = this.getElement(this.element.id + '_tooltip_group');
-            var pathElement = this.getElement(this.element.id + '_tooltip_path');
-            var rect;
-            var isTop = false;
-            var isLeft = false;
-            var isBottom = false;
-            var x = 0;
-            var y = 0;
-            this.tipRadius = 1;
-            var series = pointData.series;
-            if (this.header !== '') {
-                this.elementSize.height += 5;
-            }
-            if (this.currentPoints.length > 1) {
-                this.arrowPadding = 0;
-                rect = this.sharedTooltipLocation(areaRect, this.valueX, this.valueY);
-                isTop = true;
-            }
-            else {
-                this.arrowPadding = 12;
-                rect = this.seriesTooltipLocation(pointData, areaRect, location, arrowLocation, tipLocation);
-                if (!this.inverted || !series.isRectSeries) {
-                    isTop = (rect.y < (location.y + (cartesain ? series.clipRect.y : 0)));
-                    isBottom = !isTop;
-                    y = (isTop ? 0 : this.arrowPadding);
-                }
-                else {
-                    isLeft = (rect.x < (location.x + series.clipRect.x));
-                    x = (isLeft ? 0 : this.arrowPadding);
-                }
-            }
-            if (this.header !== '') {
-                var headerSize = helper_1.measureText(this.header, chart.tooltip.textStyle).height + (this.padding * 2) +
-                    (isBottom ? this.arrowPadding : 0);
-                var xLength = (this.padding * 3) + (!isLeft && !isTop && !isBottom ? this.arrowPadding : 0);
-                var direction = 'M ' + xLength + ' ' + headerSize +
-                    'L ' + (rect.width + (!isLeft && !isTop && !isBottom ? this.arrowPadding : 0) - (this.padding * 2)) +
-                    ' ' + headerSize;
-                var pathElement_1 = this.chart.renderer.drawPath({
-                    'id': this.element.id + '_header_path', 'stroke-width': 1,
-                    'fill': null, 'opacity': 0.8, 'stroke': chart.themeStyle.tooltipHeaderLine, 'd': direction
-                });
-                groupElement.appendChild(pathElement_1);
-            }
-            var start = chart.tooltip.border.width / 2;
-            var pointRect = new helper_1.Rect(start + x, start + y, rect.width - start, rect.height - start);
-            groupElement.setAttribute('opacity', '1');
-            if (chart.tooltip.enableAnimation && !chart.tooltip.shared && !isFirst && !this.isComplete) {
-                this.animateTooltipDiv(tooltipDiv, rect);
-            }
-            else {
-                this.updateDiv(tooltipDiv, rect.x, rect.y);
-            }
-            this.isComplete = false;
-            svgObject.setAttribute('height', (rect.height + chart.tooltip.border.width + (!((!this.inverted) ||
-                (!pointData.series.isRectSeries)) ? 0 : this.arrowPadding)).toString());
-            svgObject.setAttribute('width', (rect.width + chart.tooltip.border.width + (((!this.inverted) ||
-                (!pointData.series.isRectSeries)) ? 0 : this.arrowPadding)).toString());
-            svgObject.setAttribute('opacity', '1');
-            pathElement.setAttribute('d', helper_2.findDirection(this.rx, this.ry, pointRect, arrowLocation, this.arrowPadding, isTop, isBottom, isLeft, tipLocation.x, tipLocation.y, this.tipRadius));
-            pathElement.setAttribute('filter', ej2_base_1.Browser.isIE ? '' : 'url(#chart_shadow_tooltip)');
-            var shadowElement = '<filter id="chart_shadow_tooltip" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"/>';
-            shadowElement += '<feOffset dx="3" dy="3" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.5"/>';
-            shadowElement += '</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
-            var defElement = chart.renderer.createDefs();
-            defElement.setAttribute('id', 'chart_tooltip_definition');
-            groupElement.appendChild(defElement);
-            defElement.innerHTML = shadowElement;
-            pathElement.setAttribute('stroke', chart.tooltip.border.color);
-            this.changeText(new helper_1.ChartLocation(x, y), isBottom, !isLeft && !isTop && !isBottom, rect);
-            return new Side(isBottom, !isLeft && !isTop && !isBottom);
-        };
-        BaseTooltip.prototype.changeText = function (point, isBottom, isRight, rect) {
-            var element = document.getElementById(this.element.id + '_tooltip_text');
-            if (isBottom) {
-                element.setAttribute('transform', 'translate(0,' + this.arrowPadding + ')');
-            }
-            if (isRight) {
-                element.setAttribute('transform', 'translate(' + this.arrowPadding + ' 0)');
-            }
-        };
-        BaseTooltip.prototype.renderText = function (isRender, chart) {
-            var height = 0;
-            var width = 0;
-            var subWidth = 0;
-            var size;
-            var lines;
-            var key = 'properties';
-            var font = ej2_base_1.extend({}, this.chart.tooltip.textStyle, null, true)[key];
-            var groupElement = this.getElement(this.element.id + '_tooltip_group');
-            var tspanElement;
-            var tspanStyle = '';
-            var line;
-            var tspanOption;
-            this.header = this.header.replace(/<b>/g, '').replace(/<\/b>/g, '').trim();
-            var headerSpace = (this.header !== '' && this.formattedText[0] !== '') ? 5 : 0;
-            var isRow = true;
-            var isColumn = true;
-            this.markerPoint = [];
-            var markerSize = 10;
-            var spaceWidth = 4;
-            var dy = (22 / parseFloat(theme_1.Theme.tooltipLabelFont.size)) * (parseFloat(font.size));
-            if (!isRender) {
-                helper_2.removeElement(this.element.id + '_tooltip_text');
-                helper_2.removeElement(this.element.id + '_header_path');
-                helper_2.removeElement(this.element.id + '_tooltip_trackball_group');
-                helper_2.removeElement('chart_tooltip_definition');
-            }
-            var options = new helper_1.TextOption(this.element.id + '_tooltip_text', this.padding * 2, this.padding * 4, 'start', '');
-            var parentElement = helper_1.textElement(options, font, null, groupElement, false);
-            for (var k = 0, pointsLength = this.formattedText.length; k < pointsLength; k++) {
-                var textCollection = this.formattedText[k].replace(/<(b|strong)>/g, '<b>')
-                    .replace(/<\/(b|strong)>/g, '</b>')
-                    .split(/<br.*?>/g);
-                size = helper_1.measureText(this.formattedText[k], font);
-                if ((k !== 0) || (this.header === '')) {
-                    this.markerPoint.push((this.header !== '' ? (this.padding) : 0) + options.y + height);
-                }
-                for (var i = 0, len = textCollection.length; i < len; i++) {
-                    lines = textCollection[i].replace(/<b>/g, '<br><b>').replace(/<\/b>/g, '</b><br>').split('<br>');
-                    subWidth = 0;
-                    isColumn = true;
-                    height += dy;
-                    for (var k_1 = 0, len_1 = lines.length; k_1 < len_1; k_1++) {
-                        line = lines[k_1];
-                        if (line.replace(/<b>/g, '').replace(/<\/b>/g, '').trim() !== '') {
-                            subWidth += spaceWidth;
-                            if (isColumn && !isRow) {
-                                tspanOption = { x: (this.padding * 2) + (markerSize + 5), dy: dy + ((isColumn) ? headerSpace : 0), fill: '' };
-                                headerSpace = null;
-                            }
-                            else {
-                                if (isRow && isColumn) {
-                                    tspanOption = { x: (this.header === '') ? ((this.padding * 2) + (markerSize + 5)) : (this.padding * 2) };
-                                }
-                                else {
-                                    tspanOption = {};
-                                }
-                            }
-                            isColumn = false;
-                            tspanElement = chart.renderer.createTSpan(tspanOption, '');
-                            parentElement.appendChild(tspanElement);
-                            if (line.indexOf('<b>') > -1) {
-                                tspanStyle = 'font-weight:bold';
-                                font.fontWeight = 'bold';
-                                (tspanElement).setAttribute('fill', chart.tooltip.textStyle.color || chart.themeStyle.tooltipBoldLabel);
-                            }
-                            else {
-                                tspanStyle = '';
-                                font.fontWeight = 'Normal';
-                                (tspanElement).setAttribute('fill', chart.tooltip.textStyle.color || chart.themeStyle.tooltipLightLabel);
-                            }
-                            (tspanElement).textContent = line = line.replace(/<[a-zA-Z\/](.|\n)*?>/g, '');
-                            subWidth += helper_1.measureText(line, font).width;
-                            if (tspanStyle !== '') {
-                                tspanElement.setAttribute('style', tspanStyle);
-                            }
-                            isRow = false;
-                        }
-                    }
-                    subWidth -= spaceWidth;
-                    width = Math.max(width, subWidth);
-                }
-            }
-            height -= (this.header ? this.padding : 0);
-            this.elementSize = new helper_1.Size(width + (width > 0 ? (2 * this.padding) : 0), height + (this.header !== '' ? this.padding : 0));
-            this.elementSize.width += (markerSize + 5);
-            var element = (parentElement.childNodes[0]);
-            if (this.header !== '' && element) {
-                font.fontWeight = 'bold';
-                var width_1 = (this.elementSize.width + (2 * this.padding)) / 2 - helper_1.measureText(this.header, font).width / 2;
-                element.setAttribute('x', width_1.toString());
-            }
-        };
-        BaseTooltip.prototype.createTemplate = function (point, data, areaRect, location, parent, isFirst) {
-            var chart = this.control;
-            this.highlightPoints(data);
-            var argsData = { cancel: false, name: constants_1.tooltipRender, point: data.point, series: data.series, };
-            this.chart.trigger(constants_1.tooltipRender, argsData);
-            var firstElement = this.getElement(this.element.id + '_tooltip').firstChild;
-            if (firstElement) {
-                firstElement.remove();
-            }
-            if (!argsData.cancel) {
-                var templateElement = this.templateFn(point);
-                var elem = ej2_base_1.createElement('div');
-                while (templateElement.length > 0) {
-                    elem.appendChild(templateElement[0]);
-                }
-                parent.appendChild(elem);
-                var rect = parent.getBoundingClientRect();
-                this.padding = 0;
-                this.elementSize = new helper_1.Size(rect.width, rect.height);
-                var tooltipRect = this.seriesTooltipLocation(data, areaRect, location, new helper_1.ChartLocation(0, 0), new helper_1.ChartLocation(0, 0));
-                if (chart.tooltip.enableAnimation && !chart.tooltip.shared && !isFirst && !this.isComplete) {
-                    this.animateTooltipDiv(parent, tooltipRect);
-                }
-                else {
-                    this.updateDiv(parent, tooltipRect.x, tooltipRect.y);
-                }
-                this.isComplete = false;
-            }
-            else {
-                this.removeHighlight(chart);
-                this.getElement(this.element.id + '_tooltip').remove();
-            }
-        };
-        BaseTooltip.prototype.sharedTooltipLocation = function (bounds, x, y) {
-            var width = this.elementSize.width + (2 * this.padding);
-            var height = this.elementSize.height + (2 * this.padding);
-            var tooltipRect = new helper_1.Rect(x + 2 * this.padding, y - height - this.padding, width, height);
-            if (tooltipRect.y < bounds.y) {
-                tooltipRect.y += (tooltipRect.height + 2 * this.padding);
-            }
-            if (tooltipRect.x + tooltipRect.width > bounds.x + bounds.width) {
-                tooltipRect.x -= (tooltipRect.width + 4 * this.padding);
-            }
-            return tooltipRect;
-        };
-        BaseTooltip.prototype.seriesTooltipLocation = function (pointData, bounds, symbolLocation, arrowLocation, tipLocation) {
-            var series = pointData.series;
-            var location = new helper_1.ChartLocation(symbolLocation.x, symbolLocation.y);
-            if (series.type === 'RangeArea' && pointData.point.regions[0]) {
-                if (!series.chart.requireInvertedAxis) {
-                    location.y = pointData.point.regions[0].y + pointData.point.regions[0].height / 2;
-                }
-                else {
-                    location.x = pointData.point.regions[0].x + pointData.point.regions[0].width / 2;
-                }
-            }
-            var width = this.elementSize.width + (2 * this.padding);
-            var height = this.elementSize.height + (2 * this.padding);
-            var markerHeight = 0;
-            if (!series.isRectSeries) {
-                var chartSeries = pointData.series;
-                markerHeight = (this.chart.tooltip.shared || chartSeries.marker.visible || series.type === 'Scatter'
-                    || chartSeries.drawType === 'Scatter') ? ((chartSeries.marker.height + 2) / 2 + (2 * chartSeries.marker.border.width)) : 0;
-            }
-            var clipX = this.chart.chartAreaType === 'PolarRadar' ? 0 : series.clipRect.x;
-            var clipY = this.chart.chartAreaType === 'PolarRadar' ? 0 : series.clipRect.y;
-            var boundsX = bounds.x;
-            var boundsY = bounds.y;
-            if (!this.inverted || !series.isRectSeries) {
-                location.y = (series.type === 'Waterfall' && pointData.point.y < 0) ?
-                    location.y - pointData.point.regions[0].height : location.y;
-                location = new helper_1.ChartLocation(location.x + clipX - this.elementSize.width / 2 - this.padding, location.y + clipY - this.elementSize.height - (2 * this.padding) - this.arrowPadding - markerHeight);
-                arrowLocation.x = tipLocation.x = width / 2;
-                if (location.y < boundsY || (series.isRectSeries && pointData.point.y < 0 && series.type !== 'Waterfall')) {
-                    location.y = (symbolLocation.y < 0 ? 0 : symbolLocation.y) + clipY + markerHeight;
-                }
-                if (location.y + height + this.arrowPadding > boundsY + bounds.height) {
-                    location.y = (symbolLocation.y > bounds.height ? bounds.height : symbolLocation.y)
-                        + clipY - this.elementSize.height - (2 * this.padding) - this.arrowPadding - markerHeight;
-                }
-                tipLocation.x = width / 2;
-                if (location.x < boundsX) {
-                    arrowLocation.x -= (boundsX - location.x);
-                    tipLocation.x -= (boundsX - location.x);
-                    location.x = boundsX;
-                }
-                if (location.x + width > boundsX + bounds.width) {
-                    arrowLocation.x += ((location.x + width) - (boundsX + bounds.width));
-                    tipLocation.x += ((location.x + width) - (boundsX + bounds.width));
-                    location.x -= ((location.x + width) - (boundsX + bounds.width));
-                }
-                if (arrowLocation.x + this.arrowPadding / 2 > width - this.rx) {
-                    arrowLocation.x = width - this.rx - this.arrowPadding / 2;
-                    tipLocation.x = width;
-                    this.tipRadius = 0;
-                }
-                if (arrowLocation.x - this.arrowPadding / 2 < this.rx) {
-                    arrowLocation.x = this.rx + this.arrowPadding / 2;
-                    tipLocation.x = 0;
-                    this.tipRadius = 0;
-                }
-            }
-            else {
-                location.x = (series.type === 'Waterfall' && pointData.point.y < 0) ?
-                    location.x + pointData.point.regions[0].width : location.x;
-                location = new helper_1.ChartLocation(location.x + clipX + markerHeight, location.y + clipY - this.elementSize.height / 2 - (this.padding));
-                arrowLocation.y = tipLocation.y = height / 2;
-                if ((location.x + width + this.arrowPadding > boundsX + bounds.width) || (series.isRectSeries &&
-                    pointData.point.y < 0 && series.type !== 'Waterfall')) {
-                    location.x = (symbolLocation.x > bounds.width ? bounds.width : symbolLocation.x)
-                        + clipX - markerHeight - (width + this.arrowPadding);
-                }
-                if (location.x < boundsX) {
-                    location.x = (symbolLocation.x < 0 ? 0 : symbolLocation.x) + clipX + markerHeight;
-                }
-                if (location.y <= boundsY) {
-                    arrowLocation.y -= (boundsY - location.y);
-                    tipLocation.y -= (boundsY - location.y);
-                    location.y = boundsY;
-                }
-                if (location.y + height >= boundsY + bounds.height) {
-                    arrowLocation.y += ((location.y + height) - (boundsY + bounds.height));
-                    tipLocation.y += ((location.y + height) - (boundsY + bounds.height));
-                    location.y -= ((location.y + height) - (boundsY + bounds.height));
-                }
-                if (arrowLocation.y + this.arrowPadding / 2 > height - this.ry) {
-                    arrowLocation.y = height - this.ry - this.arrowPadding / 2;
-                    tipLocation.y = height;
-                    this.tipRadius = 0;
-                }
-                if (arrowLocation.y - this.arrowPadding / 2 < this.ry) {
-                    arrowLocation.y = this.ry + this.arrowPadding / 2;
-                    tipLocation.y = 0;
-                    this.tipRadius = 0;
-                }
-            }
-            return new helper_1.Rect(location.x, location.y, width, height);
-        };
-        BaseTooltip.prototype.progressAnimation = function (element, tooltipGroup, series, opacity, rectOpacity, timeStamp, isRect, shared) {
-            tooltipGroup.style.animation = '';
-            tooltipGroup.setAttribute('opacity', (opacity - timeStamp).toString());
-            if (element && isRect && !shared) {
-                element.setAttribute('opacity', (rectOpacity + (rectOpacity * timeStamp)).toString());
-            }
-        };
-        BaseTooltip.prototype.endAnimation = function (element, tooltipGroup, series, shared) {
-            this.currentPoints = [];
-            if (element && series.isRectSeries) {
-                element.setAttribute('opacity', series.opacity.toString());
-            }
-            this.removeHighlight(this.control);
-            tooltipGroup.setAttribute('opacity', '0');
-            if (this.control.tooltip.template && !shared) {
-                tooltipGroup.style.display = 'none';
-            }
-            this.isComplete = true;
-            this.control.trigger('animationComplete', {});
-        };
         BaseTooltip.prototype.removeHighlight = function (chart) {
@@ -469,30 +89,102 @@ var item;
         };
-        BaseTooltip.prototype.highlightPoints = function (item) {
-            if (item.series.isRectSeries) {
-                this.highlightPoint(item.series, item.point.index, true);
-                return null;
+        BaseTooltip.prototype.highlightPoints = function () {
+            for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {
+                var item = _a[_i];
+                if (item.series.isRectSeries && item.series.category === 'Series') {
+                    this.highlightPoint(item.series, item.point.index, true);
+                }
             }
         };
-        BaseTooltip.prototype.animateTooltipDiv = function (tooltipDiv, rect) {
-            var _this = this;
-            var x = parseFloat(tooltipDiv.style.left);
-            var y = parseFloat(tooltipDiv.style.top);
-            var currenDiff;
-            new ej2_base_2.Animation({}).animate(tooltipDiv, {
-                duration: 300,
-                progress: function (args) {
-                    currenDiff = (args.timeStamp / args.duration);
-                    tooltipDiv.style.animation = null;
-                    tooltipDiv.style.left = (x + currenDiff * (rect.x - x)) + 'px';
-                    tooltipDiv.style.top = (y + currenDiff * (rect.y - y)) + 'px';
-                },
-                end: function (model) {
-                    _this.updateDiv(tooltipDiv, rect.x, rect.y);
+        BaseTooltip.prototype.createTooltip = function (chart, isFirst, header, location, clipLocation, point, shapes, offset, bounds, extraPoints, templatePoint) {
+            if (extraPoints === void 0) { extraPoints = null; }
+            if (templatePoint === void 0) { templatePoint = null; }
+            var series = this.currentPoints[0].series;
+            var module = chart.tooltipModule || chart.accumulationTooltipModule;
+            if (isFirst) {
+                this.svgTooltip = new ej2_svg_base_1.Tooltip({
+                    opacity: chart.tooltip.opacity,
+                    header: header, content: this.text, fill: chart.tooltip.fill, border: chart.tooltip.border,
+                    enableAnimation: chart.tooltip.enableAnimation, location: location, shared: chart.tooltip.shared,
+                    shapes: shapes, clipBounds: this.chart.chartAreaType === 'PolarRadar' ? new helper_1.ChartLocation(0, 0) : clipLocation,
+                    areaBounds: bounds, palette: this.findPalette(), template: chart.tooltip.template, data: templatePoint,
+                    theme: chart.theme, offset: offset, textStyle: chart.tooltip.textStyle,
+                    isNegative: (series.isRectSeries && series.type !== 'Waterfall' && point && point.y < 0),
+                    inverted: this.chart.requireInvertedAxis && series.isRectSeries,
+                    arrowPadding: this.text.length > 1 ? 0 : 12,
+                    tooltipRender: function () {
+                        module.removeHighlight(module.control);
+                        module.highlightPoints();
+                        module.updatePreviousPoint(extraPoints);
+                    },
+                    animationComplete: function (args) {
+                        if (args.tooltip.fadeOuted) {
+                            module.fadeOut(module.previousPoints, chart);
+                        }
+                    }
+                }, '#' + this.element.id + '_tooltip');
+            }
+            else {
+                this.svgTooltip.location = location;
+                this.svgTooltip.content = this.text;
+                this.svgTooltip.header = header;
+                this.svgTooltip.offset = offset;
+                this.svgTooltip.palette = this.findPalette();
+                this.svgTooltip.shapes = shapes;
+                this.svgTooltip.data = templatePoint;
+                this.svgTooltip.template = chart.tooltip.template;
+                this.svgTooltip.textStyle = chart.tooltip.textStyle;
+                this.svgTooltip.isNegative = (series.isRectSeries && series.type !== 'Waterfall' && point && point.y < 0);
+                this.svgTooltip.clipBounds = this.chart.chartAreaType === 'PolarRadar' ? new helper_1.ChartLocation(0, 0) : clipLocation;
+                this.svgTooltip.arrowPadding = this.text.length > 1 ? 0 : 12;
+                this.svgTooltip.dataBind();
+            }
+        };
+        BaseTooltip.prototype.findPalette = function () {
+            var colors = [];
+            for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {
+                var data = _a[_i];
+                colors.push(this.findColor(data, data.series));
+            }
+            return colors;
+        };
+        BaseTooltip.prototype.findColor = function (data, series) {
+            if (series.isRectSeries) {
+                return data.point.color;
+            }
+            else {
+                return (data.point.color && data.point.color !== '#ffffff' ? data.point.color
+                    : data.point.interior) ||
+                    series.marker.fill || series.interior;
+            }
+        };
+        BaseTooltip.prototype.updatePreviousPoint = function (extraPoints) {
+            if (extraPoints) {
+                this.currentPoints = this.currentPoints.concat(extraPoints);
+            }
+            this.previousPoints = ej2_base_1.extend([], this.currentPoints, null, true);
+        };
+        BaseTooltip.prototype.fadeOut = function (data, chart) {
+            var svgElement = this.getElement(this.element.id + '_tooltip_svg');
+            var isTooltip = (svgElement && parseInt(svgElement.getAttribute('opacity'), 10) > 0);
+            if (!isTooltip) {
+                this.valueX = null;
+                this.valueY = null;
+                this.currentPoints = [];
+                this.removeHighlight(chart);
+                this.removeHighlightedMarker(data);
+                this.svgTooltip = null;
+                this.control.trigger('animationComplete', {});
+            }
+        };
+        BaseTooltip.prototype.removeHighlightedMarker = function (data) {
+            if (this.chart.markerRender) {
+                for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+                    var item = data_1[_i];
+                    helper_2.removeElement(this.element.id + '_Series_' + item.series.index +
+                        '_Point_' + item.point.index + '_Trackball');
                 }
-            });
+                this.chart.markerRender.removeHighlightedMarker();
+            }
+            this.previousPoints = [];
         };
-        BaseTooltip.prototype.updateDiv = function (tooltipDiv, x, y) {
-            tooltipDiv.style.left = x + 'px';
-            tooltipDiv.style.top = y + 'px';
-        };
         BaseTooltip.prototype.triggerEvent = function (point, isFirst, textCollection, firstText) {
@@ -511,2 +203,3 @@ if (firstText === void 0) { firstText = true; }
                 this.formattedText = this.formattedText.concat(argsData.text);
+                this.text = this.formattedText;
             }
@@ -518,3 +211,3 @@ return !argsData.cancel;
             var element = this.getElement(this.element.id + '_tooltip_group');
-            if (element.childNodes.length > 0) {
+            if (element && element.childNodes.length > 0) {
                 while (element.lastChild && element.childNodes.length !== 1) {
@@ -525,29 +218,20 @@ element.removeChild(element.lastChild);
         };
-        BaseTooltip.prototype.updateTemplateFn = function (chart) {
-            if (chart.tooltip.template) {
-                var e = void 0;
-                try {
-                    if (document.querySelectorAll(chart.tooltip.template).length) {
-                        this.templateFn = ej2_base_2.compile(document.querySelector(chart.tooltip.template).innerHTML.trim());
+        BaseTooltip.prototype.stopAnimation = function () {
+            helper_2.stopTimer(this.toolTipInterval);
+        };
+        BaseTooltip.prototype.removeTooltip = function (duration) {
+            var _this = this;
+            var tooltipElement = this.getElement(this.element.id + '_tooltip');
+            this.stopAnimation();
+            if (tooltipElement && this.previousPoints.length > 0) {
+                this.toolTipInterval = setTimeout(function () {
+                    if (_this.svgTooltip) {
+                        _this.svgTooltip.fadeOut();
                     }
-                }
-                catch (e) {
-                    this.templateFn = ej2_base_2.compile(chart.tooltip.template);
-                }
+                }, duration);
             }
         };
-        BaseTooltip.prototype.stopAnimation = function () {
-            helper_2.stopTimer(this.toolTipInterval);
-        };
         return BaseTooltip;
     }(get_data_1.ChartData));
     exports.BaseTooltip = BaseTooltip;
-    var Side = (function () {
-        function Side(bottom, right) {
-            this.isRight = right;
-            this.isBottom = bottom;
-        }
-        return Side;
-    }());
-    exports.Side = Side;
 });

src/common/utils/enum.d.ts

@@ -15,2 +15,4 @@ /**
 export declare type Alignment = 'Near' | 'Center' | 'Far';
+/** @private */
+export declare type SeriesCategories = 'TrendLine' | 'Indicator' | 'Series';
 /**
@@ -17,0 +19,0 @@ * Defines regions of an annotation. They are

src/common/utils/export.d.ts

@@ -5,5 +5,3 @@ import { Chart } from '../../chart/chart';
 import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
-/**
- * Annotation Module handles the Annotation for chart and accumulation series.
- */
+import { RangeNavigator } from '../..';
 export declare class ExportUtils {
@@ -16,3 +14,3 @@ private control;
      */
-    constructor(control: Chart | AccumulationChart);
+    constructor(control: Chart | AccumulationChart | RangeNavigator);
     /**
@@ -34,3 +32,3 @@ * To print the accumulation and chart elements
      */
-    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation): void;
+    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, controls?: (Chart | AccumulationChart | RangeNavigator)[], width?: number, height?: number): void;
     /**
@@ -43,2 +41,8 @@ * To trigger the download element
     triggerDownload(fileName: string, type: ExportType, url: string, isDownload: boolean): void;
+    /**
+     * To get the maximum size value
+     * @param controls
+     * @param name
+     */
+    private getControlsValue(controls);
 }

src/common/utils/export.js

@@ -40,9 +40,12 @@ define(["require", "exports", "@syncfusion/ej2-base", "../utils/helper", "../model/constants", "@syncfusion/ej2-pdf-export"], function (require, exports, ej2_base_1, helper_1, constants_1, ej2_pdf_export_1) {
         };
-        ExportUtils.prototype.export = function (type, fileName, orientation) {
+        ExportUtils.prototype.export = function (type, fileName, orientation, controls, width, height) {
             var _this = this;
+            var controlValue = this.getControlsValue(controls);
+            width = width ? width : controlValue.width;
+            height = height ? height : controlValue.height;
             var element = ej2_base_1.createElement('canvas', {
                 id: 'ej2-canvas',
                 attrs: {
-                    'width': this.control.availableSize.width.toString(),
-                    'height': this.control.availableSize.height.toString()
+                    'width': width.toString(),
+                    'height': height.toString()
                 }
@@ -53,6 +56,6 @@ });
             var svgData = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
-                this.control.svgObject.outerHTML +
+                controlValue.svg.outerHTML +
                 '</svg>';
             var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
-                [(new XMLSerializer()).serializeToString(this.control.svgObject)], { type: 'image/svg+xml' }));
+                [(new XMLSerializer()).serializeToString(controlValue.svg)], { type: 'image/svg+xml' }));
             if (type === 'SVG') {
@@ -72,3 +75,3 @@ this.triggerDownload(fileName, type, url, isDownload);
                         imageString = imageString.slice(imageString.indexOf(',') + 1);
-                        document_1.pages.add().graphics.drawImage(new ej2_pdf_export_1.PdfBitmap(imageString), 0, 0, _this.control.availableSize.width, _this.control.availableSize.height);
+                        document_1.pages.add().graphics.drawImage(new ej2_pdf_export_1.PdfBitmap(imageString), 0, 0, width, height);
                         if (isDownload) {
@@ -103,2 +106,29 @@ document_1.save(fileName + '.pdf');
         };
+        ExportUtils.prototype.getControlsValue = function (controls) {
+            var width = 0;
+            var height = 0;
+            var content = '';
+            var svgObject = new ej2_base_1.SvgRenderer('').createSvg({
+                id: 'Svg_Export_Element',
+                width: 200, height: 200
+            });
+            controls.map(function (control) {
+                var svg = control.svgObject.cloneNode(true);
+                var groupEle = control.renderer.createGroup({
+                    style: 'transform: translateY(' + height + 'px)'
+                });
+                groupEle.appendChild(svg);
+                width = Math.max(control.availableSize.width, width);
+                height += control.availableSize.height;
+                content += control.svgObject.outerHTML;
+                svgObject.appendChild(groupEle);
+            });
+            svgObject.setAttribute('width', width + '');
+            svgObject.setAttribute('height', height + '');
+            return {
+                'width': width,
+                'height': height,
+                'svg': svgObject
+            };
+        };
         return ExportUtils;
@@ -105,0 +135,0 @@ }());

src/common/utils/helper.d.ts

@@ -9,2 +9,3 @@ import { Effect } from '@syncfusion/ej2-base';
 import { AccumulationChart } from '../../accumulation-chart/accumulation';
+import { RangeNavigator } from '../../range-navigator/range-navigator';
 import { AccumulationSeries, AccPoints } from '../../accumulation-chart/model/acc-base';
@@ -45,2 +46,4 @@ import { IShapes } from '../model/interface';
 /** @private */
+export declare function logWithIn(value: number, axis: Axis): number;
+/** @private */
 export declare function withInRange(previousPoint: Points, currentPoint: Points, nextPoint: Points, series: Series): boolean;
@@ -126,2 +129,20 @@ /** @private */
 /**
+ * Triggers the event.
+ * @return {void}
+ * @private
+ */
+export declare function triggerLabelRender(chart: Chart | RangeNavigator, tempInterval: number, text: string, labelStyle: FontModel, axis: Axis): void;
+/**
+ * The function used to find whether the range is set.
+ * @return {boolean}
+ * @private
+ */
+export declare function setRange(axis: Axis): boolean;
+/**
+ * Calculate desired interval for the axis.
+ * @return {void}
+ * @private
+ */
+export declare function getActualDesiredIntervalsCount(availableSize: Size, axis: Axis): number;
+/**
  * Animation for template
@@ -144,3 +165,3 @@ * @private
 /** @private */
-export declare function createTemplate(childElement: HTMLElement, pointIndex: number, content: string, chart: Chart | AccumulationChart, point?: Points | AccPoints, series?: Series | AccumulationSeries): HTMLElement;
+export declare function createTemplate(childElement: HTMLElement, pointIndex: number, content: string, chart: Chart | AccumulationChart | RangeNavigator, point?: Points | AccPoints, series?: Series | AccumulationSeries): HTMLElement;
 /** @private */
@@ -197,4 +218,4 @@ export declare function getFontStyle(font: FontModel): string;
  */
-export declare function calculateSize(chart: Chart | AccumulationChart): void;
-export declare function createSvg(chart: Chart | AccumulationChart): void;
+export declare function calculateSize(chart: Chart | AccumulationChart | RangeNavigator): void;
+export declare function createSvg(chart: Chart | AccumulationChart | RangeNavigator): void;
 /**
@@ -325,1 +346,8 @@ * To calculate chart title and height
 }
+/** @private */
+export interface IHistogramValues {
+    sDValue?: number;
+    mean?: number;
+    binWidth?: number;
+    yValues?: number[];
+}

src/index.d.ts

@@ -7,1 +7,4 @@ /**
 export * from './common/index';
+export * from './range-navigator/index';
+export * from './smithchart/index';
+export * from './sparkline/index';

src/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./chart/index", "./accumulation-chart/index", "./common/index"], function (require, exports, index_1, index_2, index_3) {
+define(["require", "exports", "./chart/index", "./accumulation-chart/index", "./common/index", "./range-navigator/index", "./smithchart/index", "./sparkline/index"], function (require, exports, index_1, index_2, index_3, index_4, index_5, index_6) {
     "use strict";
@@ -10,2 +10,5 @@ function __export(m) {
     __export(index_3);
+    __export(index_4);
+    __export(index_5);
+    __export(index_6);
 });

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

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

20856643

increased by52.55%

Number of package files

336

increased by44.83%

Lines of code

118427

increased by42.58%

Worsened metrics

Dependency count

8

increased by60%

Dependency changes

• + Added@syncfusion/ej2-calendars@~16.2.41

• + Added@syncfusion/ej2-navigations@~16.2.41

• + Added@syncfusion/ej2-svg-base@~16.2.41

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@syncfusion/ej2-base@~16.2.41

• Updated@syncfusion/ej2-compression@~16.2.41

• Updated@syncfusion/ej2-data@~16.2.41

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

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