@syncfusion/ej2-charts - npm Package Compare versions

Comparing version 15.4.27 to 16.1.24

CHANGELOG.md

@@ -11,4 +11,25 @@ <!-- markdownlint-disable MD010 -->
 
+### Common
+
+#### New Features
+
+- Added support for SVG and PDF export.
+
 ### Chart
 
+#### New Features
+
+- Multicolored line type and area type series have been added to chart.
+- A new date-time category axis has been added.
+- Spline area series type has been added to chart.
+- Support has been provided to customize axis labels in multiple levels.
+- Support has been provided to wrap the chart title.
+- Support has been provided to sort data points in either ascending or descending order.
+- Supports to move the axis labels and ticks inside the chart area.
+- Axis crossing feature has been added to chart.
+
+## 15.4.27-preview (2018-01-30)
+
+### Chart
+
 #### Bug Fixes
@@ -15,0 +36,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 15.4.23
+*  version : 15.4.27
 *  Copyright Syncfusion Inc. 2001 - 2017. All rights reserved.
@@ -14,3 +14,5 @@ *  Use of this code is subject to the terms of our license.
 import * as _data from '@syncfusion/ej2-data';
-import * as _popups from '@syncfusion/ej2-popups';
+import * as _pdfexport from '@syncfusion/ej2-pdf-export';
+import * as _fileutils from '@syncfusion/ej2-file-utils';
+import * as _compression from '@syncfusion/ej2-compression';
 
@@ -21,3 +23,5 @@ export declare namespace ej {
     const data: typeof _data;
-    const popups: typeof _popups;
+    const pdfexport: typeof _pdfexport;
+    const fileutils: typeof _fileutils;
+    const compression: typeof _compression;
 }

package.json

 {
   "name": "@syncfusion/ej2-charts",
-  "version": "15.4.27",
+  "version": "16.1.24",
   "description": "Essential JS 2 Chart Components",
@@ -11,5 +11,7 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "^15.4.23",
-    "@syncfusion/ej2-data": "^15.4.23",
-    "@syncfusion/ej2-popups": "^15.4.27"
+    "@syncfusion/ej2-base": "^16.1.24",
+    "@syncfusion/ej2-data": "^16.1.24",
+    "@syncfusion/ej2-pdf-export": "^16.1.24",
+    "@syncfusion/ej2-file-utils": "^16.1.24",
+    "@syncfusion/ej2-compression": "^16.1.24"
   },
@@ -16,0 +18,0 @@ "devDependencies": {

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

@@ -1,2 +0,2 @@
-import { Property, Component, Complex, Collection, NotifyPropertyChanges, INotifyPropertyChanged, SvgRenderer } from '@syncfusion/ej2-base';import { ModuleDeclaration, Internationalization, Event, EmitType, Browser, EventHandler, Touch } from '@syncfusion/ej2-base';import { remove, extend, isNullOrUndefined, createElement } from '@syncfusion/ej2-base';import { Font, Margin, Border, Indexes } from '../common/model/base';import { AccumulationSeries, AccPoints, AccumulationTooltipSettings } 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 } from '../common/model/theme';import { ILegendRenderEventArgs, IMouseEventArgs, IAnnotationRenderEventArgs } from '../common/model/interface';import { load, seriesRender, legendRender, textRender, tooltipRender, chartMouseClick, chartMouseDown } from '../common/model/constants';import { chartMouseLeave, chartMouseMove, chartMouseUp, resized } from '../common/model/constants';import { FontModel, MarginModel, BorderModel, IndexesModel } from '../common/model/base-model';import { AccumulationSeriesModel, AccumulationTooltipSettingsModel } 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 } 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 { 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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -46,3 +46,3 @@
 
-    tooltip?: AccumulationTooltipSettingsModel;
+    tooltip?:  TooltipSettingsModel;
 
@@ -89,3 +89,3 @@ /**
      * If set true, labels for the point will be placed smartly without overlapping.
-     * @default 'true'
+     * @default true
      */
@@ -102,3 +102,3 @@ enableSmartLabels?: boolean;
      * The background color of the chart, which accepts value in hex, rgba as a valid CSS color string.
-     * @default 'transparent'
+     * @default null
      */
@@ -121,2 +121,3 @@ background?: string;
      * Specifies the theme for accumulation chart.
+     * @default 'Material'
      */
@@ -197,2 +198,16 @@ theme?: AccumulationTheme;
     /**
+     * Triggers on point click.
+     * @event
+     */
+
+    pointClick?: EmitType<IPointEventArgs>;
+
+    /**
+     * Triggers on point move.
+     * @event
+     */
+
+    pointMove?: EmitType<IPointEventArgs>;
+
+    /**
      * Triggers after animation gets completed for series.
@@ -199,0 +214,0 @@ * @event

src/accumulation-chart/accumulation.d.ts

@@ -6,2 +6,3 @@ /**
 import { ModuleDeclaration, Internationalization, EmitType } from '@syncfusion/ej2-base';
+import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
 import { AccumulationChartModel } from './accumulation-model';
@@ -12,5 +13,5 @@ import { AccumulationSeries, AccPoints } from './model/acc-base';
 import { IAccAnimationCompleteEventArgs, IAccPointRenderEventArgs, IAccLoadedEventArgs, IAccResizeEventArgs } from './model/pie-interface';
-import { ILegendRenderEventArgs, IMouseEventArgs, IAnnotationRenderEventArgs } from '../common/model/interface';
-import { FontModel, MarginModel, BorderModel, IndexesModel } from '../common/model/base-model';
-import { AccumulationSeriesModel, AccumulationTooltipSettingsModel } from './model/acc-base-model';
+import { ILegendRenderEventArgs, IMouseEventArgs, IPointEventArgs, IAnnotationRenderEventArgs } from '../common/model/interface';
+import { FontModel, MarginModel, BorderModel, IndexesModel, TooltipSettingsModel } from '../common/model/base-model';
+import { AccumulationSeriesModel } from './model/acc-base-model';
 import { AccumulationLegend } from './renderer/legend';
@@ -31,2 +32,3 @@ import { LegendSettingsModel } from '../common/legend/legend-model';
 import { ExportType } from '../common/utils/enum';
+import { IThemeStyle } from '../index';
 /**
@@ -111,3 +113,3 @@ * Represents the AccumulationChart control.
      */
-    tooltip: AccumulationTooltipSettingsModel;
+    tooltip: TooltipSettingsModel;
     /**
@@ -148,3 +150,3 @@ * Specifies whether point has to get selected or not. Takes value either 'None 'or 'Point'
      * If set true, labels for the point will be placed smartly without overlapping.
-     * @default 'true'
+     * @default true
      */
@@ -158,3 +160,3 @@ enableSmartLabels: boolean;
      * The background color of the chart, which accepts value in hex, rgba as a valid CSS color string.
-     * @default 'transparent'
+     * @default null
      */
@@ -172,2 +174,3 @@ background: string;
      * Specifies the theme for accumulation chart.
+     * @default 'Material'
      */
@@ -231,2 +234,12 @@ theme: AccumulationTheme;
     /**
+     * Triggers on point click.
+     * @event
+     */
+    pointClick: EmitType<IPointEventArgs>;
+    /**
+     * Triggers on point move.
+     * @event
+     */
+    pointMove: EmitType<IPointEventArgs>;
+    /**
      * Triggers after animation gets completed for series.
@@ -291,2 +304,4 @@ * @event
     private titleCollection;
+    /** @private */
+    themeStyle: IThemeStyle;
     /**
@@ -302,2 +317,6 @@ * Constructor for creating the AccumulationChart widget
     /**
+     * Themeing for chart goes here
+     */
+    private setTheme();
+    /**
      * To render the accumulation chart elements
@@ -325,7 +344,2 @@ */
     /**
-     * To find mouse x, y for aligned chart element svg position
-     * @private
-     */
-    removeSvgOffset(x: number, y: number): ChartLocation;
-    /**
      * Handles the mouse start.
@@ -345,3 +359,3 @@ * @return {boolean}
      */
-    export(type: ExportType, fileName: string): void;
+    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation): void;
     /**
@@ -356,2 +370,6 @@ * Handles the print method for accumulation chart control.
     /**
+     * Method to set the annotation content dynamically for accumulation.
+     */
+    setAnnotationValue(annotationIndex: number, content: string): void;
+    /**
      * Handles the mouse move on accumulation chart.
@@ -369,2 +387,3 @@ * @return {boolean}
     accumulationOnMouseClick(e: PointerEvent): boolean;
+    private triggerPointEvent(event, element);
     /**
@@ -371,0 +390,0 @@ * Handles the mouse right click on accumulation chart.

src/accumulation-chart/accumulation.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../common/model/base", "./model/acc-base", "../common/model/theme", "../common/model/constants", "../common/model/constants", "../common/legend/legend", "../common/utils/helper", "../common/utils/helper", "../common/utils/helper", "../common/utils/helper", "../common/model/data", "./renderer/accumulation-base", "./renderer/pie-series", "./model/acc-base", "../common/utils/export", "../common/utils/helper"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, base_1, acc_base_1, theme_1, constants_1, constants_2, legend_1, helper_1, helper_2, helper_3, helper_4, data_1, accumulation_base_1, pie_series_1, acc_base_2, export_1, helper_5) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../common/model/base", "./model/acc-base", "../common/model/theme", "../common/model/constants", "../common/model/constants", "../common/model/constants", "../common/legend/legend", "../common/utils/helper", "../common/utils/helper", "../common/utils/helper", "../common/utils/helper", "../common/model/data", "./renderer/accumulation-base", "./renderer/pie-series", "./model/acc-base", "../common/utils/export", "../common/utils/helper"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, base_1, acc_base_1, theme_1, constants_1, constants_2, constants_3, legend_1, helper_1, helper_2, helper_3, helper_4, data_1, accumulation_base_1, pie_series_1, acc_base_2, export_1, helper_5) {
     "use strict";
@@ -45,4 +45,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
         };
+        AccumulationChart.prototype.setTheme = function () {
+            this.themeStyle = theme_1.getThemeColor(this.theme);
+        };
         AccumulationChart.prototype.render = function () {
             this.trigger(constants_1.load, { accumulation: this });
+            this.setTheme();
             this.accBaseModule = new accumulation_base_1.AccumulationBase(this);
@@ -97,14 +101,12 @@ this.pieSeriesModule = new pie_series_1.PieSeries(this);
             }
-            this.mouseY = pageY;
-            this.mouseX = pageX;
+            var rect = this.element.getBoundingClientRect();
+            var svgRect = helper_4.getElement(this.element.id + '_svg').getBoundingClientRect();
+            this.mouseX = (pageX - rect.left) - Math.max(svgRect.left - rect.left, 0);
+            this.mouseY = (pageY - rect.top) - Math.max(svgRect.top - rect.top, 0);
         };
         AccumulationChart.prototype.accumulationMouseEnd = function (e) {
             this.setMouseXY(e);
-            this.trigger(constants_2.chartMouseUp, { target: e.target.id, x: this.mouseX, y: this.mouseY });
+            this.trigger(constants_3.chartMouseUp, { target: e.target.id, x: this.mouseX, y: this.mouseY });
             if (this.isTouch) {
                 this.titleTooltip(e, this.mouseX, this.mouseY, this.isTouch);
-                if (this.accumulationTooltipModule && this.accumulationTooltipModule.tooltip) {
-                    this.accBaseModule.getTooltipPoint(e, this, this.mouseX, this.mouseY);
-                    this.accumulationTooltipModule.fadeOutTooltip();
-                }
                 if (this.accumulationDataLabelModule && this.visibleSeries[0].dataLabel.visible) {
@@ -117,12 +119,8 @@ this.accumulationDataLabelModule.move(e, this.mouseX, this.mouseY, this.isTouch);
             }
+            this.notify(ej2_base_2.Browser.touchEndEvent, e);
             return false;
         };
-        AccumulationChart.prototype.removeSvgOffset = function (x, y) {
-            var rect = this.element.getBoundingClientRect();
-            var svgRect = helper_4.getElement(this.element.id + '_svg').getBoundingClientRect();
-            return { x: (x - rect.left) - Math.max(svgRect.left - rect.left, 0), y: (y - rect.top) - Math.max(svgRect.top - rect.top, 0) };
-        };
         AccumulationChart.prototype.accumulationMouseStart = function (e) {
             this.setMouseXY(e);
-            this.trigger(constants_1.chartMouseDown, { target: e.target.id, x: this.mouseX, y: this.mouseY });
+            this.trigger(constants_2.chartMouseDown, { target: e.target.id, x: this.mouseX, y: this.mouseY });
             return false;
@@ -132,6 +130,7 @@ };
             var _this = this;
+            this.animateSeries = false;
             var args = {
                 accumulation: this,
                 previousSize: new helper_1.Size(this.availableSize.width, this.availableSize.height),
-                name: constants_2.resized,
+                name: constants_3.resized,
                 currentSize: new helper_1.Size(0, 0)
@@ -149,3 +148,3 @@ };
                 args.currentSize = _this.availableSize;
-                _this.trigger(constants_2.resized, args);
+                _this.trigger(constants_3.resized, args);
                 _this.refreshSeries();
@@ -156,5 +155,5 @@ _this.refreshChart();
         };
-        AccumulationChart.prototype.export = function (type, fileName) {
+        AccumulationChart.prototype.export = function (type, fileName, orientation) {
             var exportChart = new export_1.ExportUtils(this);
-            exportChart.export(type, fileName);
+            exportChart.export(type, fileName, orientation);
         };
@@ -173,5 +172,25 @@ AccumulationChart.prototype.print = function (id) {
         };
+        AccumulationChart.prototype.setAnnotationValue = function (annotationIndex, content) {
+            var annotation = this.annotations[annotationIndex];
+            var element;
+            var parentNode = helper_4.getElement(this.element.id + '_Annotation_Collections');
+            if (content) {
+                annotation.content = content;
+                if (parentNode) {
+                    element = ej2_base_3.createElement('div');
+                    helper_3.removeElement(this.element.id + '_Annotation_' + annotationIndex);
+                    this.annotationModule.processAnnotation(annotation, annotationIndex, element);
+                    parentNode.appendChild(element.children[0]);
+                }
+                else {
+                    this.annotationModule.renderAnnotations(helper_4.getElement(this.element.id + '_Secondary_Element'));
+                }
+            }
+        };
         AccumulationChart.prototype.accumulationMouseMove = function (e) {
             this.setMouseXY(e);
-            this.trigger(constants_2.chartMouseMove, { target: e.target.id, x: this.mouseX, y: this.mouseY });
+            this.trigger(constants_3.chartMouseMove, { target: e.target.id, x: this.mouseX, y: this.mouseY });
+            if (this.pointMove) {
+                this.triggerPointEvent(constants_2.pointMove, e.target);
+            }
             if (this.accumulationLegendModule && this.legendSettings.visible) {
@@ -183,8 +202,6 @@ this.accumulationLegendModule.move(e);
             }
-            if (this.accumulationTooltipModule && this.accBaseModule && this.tooltip.enable && !this.isTouch) {
-                this.accBaseModule.getTooltipPoint(e, this, this.mouseX, this.mouseY);
-            }
             if (!this.isTouch) {
                 this.titleTooltip(e, this.mouseX, this.mouseY);
             }
+            this.notify(ej2_base_2.Browser.touchMoveEvent, e);
             return false;
@@ -212,5 +229,17 @@ };
             }
-            this.trigger(constants_1.chartMouseClick, { target: e.target.id, x: this.mouseX, y: this.mouseY });
+            this.trigger(constants_2.chartMouseClick, { target: e.target.id, x: this.mouseX, y: this.mouseY });
+            if (this.pointClick) {
+                this.triggerPointEvent(constants_1.pointClick, e.target);
+            }
             return false;
         };
+        AccumulationChart.prototype.triggerPointEvent = function (event, element) {
+            var indexes = helper_1.indexFinder(element.id, true);
+            if (indexes.series >= 0 && indexes.point >= 0) {
+                this.trigger(event, { series: this.series[indexes.series],
+                    point: this.series[indexes.series].points[indexes.point],
+                    seriesIndex: indexes.series, pointIndex: indexes.point,
+                    x: this.mouseX, y: this.mouseY });
+            }
+        };
         AccumulationChart.prototype.accumulationRightClick = function (event) {
@@ -226,6 +255,4 @@ if (event.buttons === 2 || event.pointerType === 'touch') {
             this.setMouseXY(e);
-            this.trigger(constants_2.chartMouseLeave, { target: e.target.id, x: this.mouseX, y: this.mouseY });
-            if (this.accumulationTooltipModule && this.tooltip.enable) {
-                this.accumulationTooltipModule.tooltip.close();
-            }
+            this.trigger(constants_3.chartMouseLeave, { target: e.target.id, x: this.mouseX, y: this.mouseY });
+            this.notify(ej2_base_2.Browser.isPointer ? 'pointerleave' : 'mouseleave', e);
             return false;
@@ -323,7 +350,2 @@ };
             }
-            var targetElement = ej2_base_3.createElement('div', {
-                id: this.element.id + '_pie_tooltip',
-                styles: 'position: absolute;background: transparent;height: 2px;width: 2px;'
-            });
-            tooltipParent.appendChild(targetElement);
             var rect = this.element.getBoundingClientRect();
@@ -357,3 +379,3 @@ var svgRect = helper_4.getElement(this.element.id + '_svg').getBoundingClientRect();
             var padding = this.border.width;
-            this.svgObject.appendChild(this.renderer.drawRectangle(new helper_2.RectOption(this.element.id + '_border', this.background, this.border, 1, new helper_1.Rect(padding / 2, padding / 2, this.availableSize.width - padding, this.availableSize.height - padding))));
+            this.svgObject.appendChild(this.renderer.drawRectangle(new helper_2.RectOption(this.element.id + '_border', this.background || this.themeStyle.background, this.border, 1, new helper_1.Rect(padding / 2, padding / 2, this.availableSize.width - padding, this.availableSize.height - padding))));
         };
@@ -389,3 +411,3 @@ AccumulationChart.prototype.renderLegend = function () {
                 this.titleStyle.textAlignment === 'Far' ? 'end' : 'middle';
-            helper_3.textElement(new helper_3.TextOption(this.element.id + '_title', helper_4.titlePositionX(this.availableSize, this.margin.left, this.margin.left, this.titleStyle), this.margin.top + (titleSize.height * 3 / 4), anchor, this.titleCollection, '', 'auto'), this.titleStyle, this.titleStyle.color, this.svgObject);
+            helper_3.textElement(new helper_3.TextOption(this.element.id + '_title', helper_4.titlePositionX(this.availableSize, this.margin.left, this.margin.left, this.titleStyle), this.margin.top + (titleSize.height * 3 / 4), anchor, this.titleCollection, '', 'auto'), this.titleStyle, this.titleStyle.color || this.themeStyle.chartTitle, this.svgObject);
         };
@@ -550,3 +572,3 @@ AccumulationChart.prototype.getSeriesElement = function () {
         __decorate([
-            ej2_base_1.Complex({}, acc_base_1.AccumulationTooltipSettings)
+            ej2_base_1.Complex({}, base_1.TooltipSettings)
         ], AccumulationChart.prototype, "tooltip", void 0);
@@ -572,3 +594,3 @@ __decorate([
         __decorate([
-            ej2_base_1.Property(theme_1.Theme.chartBackgroundColor)
+            ej2_base_1.Property(null)
         ], AccumulationChart.prototype, "background", void 0);
@@ -619,2 +641,8 @@ __decorate([
             ej2_base_2.Event()
+        ], AccumulationChart.prototype, "pointClick", void 0);
+        __decorate([
+            ej2_base_2.Event()
+        ], AccumulationChart.prototype, "pointMove", void 0);
+        __decorate([
+            ej2_base_2.Event()
         ], AccumulationChart.prototype, "animationComplete", void 0);
@@ -621,0 +649,0 @@ __decorate([

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

@@ -8,3 +8,3 @@ /**
 /**
- * Annotation Module handles the Annotation for accumulation chart.
+ * `AccumulationAnnotation` module handles the annotation for accumulation chart.
  */
@@ -16,3 +16,3 @@ export declare class AccumulationAnnotation extends AnnotationBase {
     /**
-     * Constructor for Accumulation chart annotation.
+     * Constructor for accumulation chart annotation.
      * @private.
@@ -19,0 +19,0 @@ */

src/accumulation-chart/annotation/annotation.js

@@ -24,4 +24,2 @@ var __extends = (this && this.__extends) || (function () {
             var _this = this;
-            var annotationElement;
-            var location;
             this.parentElement = ej2_base_1.createElement('div', {
@@ -31,7 +29,3 @@ id: this.pie.element.id + '_Annotation_Collections'
             this.annotations.map(function (annotation, index) {
-                location = new helper_1.ChartLocation(0, 0);
-                annotationElement = _this.render(annotation, index);
-                if (_this['setAnnotation' + annotation.coordinateUnits + 'Value'](location)) {
-                    _this.setElementStyle(location, annotationElement, _this.parentElement);
-                }
+                _this.processAnnotation(annotation, index, _this.parentElement);
             });
@@ -38,0 +32,0 @@ helper_1.appendElement(this.parentElement, element);

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 { Theme, 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 } from '../../common/utils/enum';
 
@@ -102,4 +102,4 @@ /**
      * Specifies the position of data label. They are.
-     * * outside - Places label outside the point.
-     * * inside - Places label inside the point.
+     * * Outside - Places label outside the point.
+     * * Inside - Places label inside the point.
      * @default 'Inside'
@@ -152,53 +152,2 @@ */
 /**
- * Interface for a class AccumulationTooltipSettings
- */
-export interface AccumulationTooltipSettingsModel {
-
-    /**
-     * Enable or disable tooltip for the accumulation chart.
-     * @default false
-     */
-
-    enable?: boolean;
-
-    /**
-     * If set true, tooltip will animate, while moving from one point to another.
-     * @default true
-     */
-    enableAnimation?: boolean;
-
-    /**
-     * Format of the tooltip content.
-     * @default null
-     */
-
-    format?: string;
-
-    /**
-     * The fill color of the tooltip, which accepts value in hex, rgba as a valid CSS color string. 
-     */
-
-    fill?: string;
-
-    /**
-     * Options to customize the border for tooltip.
-     */
-    border?: BorderModel;
-
-    /**
-     * Custom template to format the tooltip content. Use ${x} and ${y} as a placeholder text to display the corresponding data point.
-     * @default null
-     */
-
-    template?: string;
-
-    /**
-     * Options to customize the tooltip text.
-     */
-
-    textStyle?: FontModel;
-
-}
-
-/**
  * Interface for a class AccPoints
@@ -290,11 +239,11 @@ */
      * The shape of the legend. Each series has its own legend shape. They are
-     * * circle - Renders a circle.
-     * * rectangle - Renders a rectangle.
-     * * triangle - Renders a triangle.
-     * * diamond - Renders a diamond.
-     * * cross - Renders a cross.
-     * * horizontalLine - Renders a horizontalLine.
-     * * verticalLine - Renders a verticalLine.
-     * * pentagon - Renders a pentagon.
-     * * invertedTriangle - Renders a invertedTriangle.
+     * * Circle - Renders a circle.
+     * * Rectangle - Renders a rectangle.
+     * * Triangle - Renders a triangle.
+     * * Diamond - Renders a diamond.
+     * * Cross - Renders a cross.
+     * * HorizontalLine - Renders a horizontalLine.
+     * * VerticalLine - Renders a verticalLine.
+     * * Pentagon - Renders a pentagon.
+     * * InvertedTriangle - Renders a invertedTriangle.
      * * SeriesType -Render a legend shape based on series type. 
@@ -307,2 +256,10 @@ * @default 'SeriesType'
     /**
+     * The DataSource field that contains the color value of point
+     * It is applicable for series
+     * @default ''
+     */
+
+    pointColorMapping?: string;
+
+    /**
      * Custom style for the selected series or points.
@@ -362,2 +319,3 @@ * @default null
      * To enable or disable tooltip for a series.
+     * @default true
      */
@@ -397,2 +355,3 @@ enableTooltip?: boolean;
      * Defines the distance between the segments of a funnel/pyramid series. The range will be from 0 to 1
+     * @default 0
      */
@@ -403,2 +362,3 @@ gapRatio?: number;
      * Defines the width of the funnel/pyramid with respect to the chart area
+     * @default '80%'
      */
@@ -409,2 +369,3 @@ width?: string;
      * Defines the height of the funnel/pyramid with respect to the chart area
+     * @default '80%'
      */
@@ -415,2 +376,3 @@ height?: string;
      * Defines the width of the funnel neck with respect to the chart area
+     * @default '20%'
      */
@@ -421,2 +383,3 @@ neckWidth?: string;
      * Defines the height of the funnel neck with respect to the chart area
+     * @default '20%'
      */
@@ -427,5 +390,12 @@ neckHeight?: string;
      * Defines how the values have to be reflected, whether through height/surface of the segments
+     * @default 'Linear'
      */
     pyramidMode?: PyramidModes;
 
+    /**
+     * The opacity of the series.
+     * @default 1.
+     */
+    opacity?: number;
+
 }

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

@@ -6,3 +6,2 @@ /**
 import { DataManager, Query } from '@syncfusion/ej2-data';
-import { Index } from '../../common/model/base';
 import { Rect, ChartLocation, Size } from '../../common/utils/helper';
@@ -94,4 +93,4 @@ import { AccumulationType, AccumulationLabelPosition, PyramidModes } from '../model/enum';
      * Specifies the position of data label. They are.
-     * * outside - Places label outside the point.
-     * * inside - Places label inside the point.
+     * * Outside - Places label outside the point.
+     * * Inside - Places label inside the point.
      * @default 'Inside'
@@ -132,39 +131,2 @@ */
 /**
- * Configures the tooltip in accumulation chart.
- */
-export declare class AccumulationTooltipSettings extends ChildProperty<AccumulationTooltipSettings> {
-    /**
-     * Enable or disable tooltip for the accumulation chart.
-     * @default false
-     */
-    enable: boolean;
-    /**
-     * If set true, tooltip will animate, while moving from one point to another.
-     * @default true
-     */
-    enableAnimation: boolean;
-    /**
-     * Format of the tooltip content.
-     * @default null
-     */
-    format: string;
-    /**
-     * The fill color of the tooltip, which accepts value in hex, rgba as a valid CSS color string.
-     */
-    fill: string;
-    /**
-     * Options to customize the border for tooltip.
-     */
-    border: BorderModel;
-    /**
-     * Custom template to format the tooltip content. Use ${x} and ${y} as a placeholder text to display the corresponding data point.
-     * @default null
-     */
-    template: string;
-    /**
-     * Options to customize the tooltip text.
-     */
-    textStyle: FontModel;
-}
-/**
  * Points model for the series.
@@ -203,2 +165,3 @@ */
     labelOffset: ChartLocation;
+    regions: Rect[];
 }
@@ -269,11 +232,11 @@ /**
      * The shape of the legend. Each series has its own legend shape. They are
-     * * circle - Renders a circle.
-     * * rectangle - Renders a rectangle.
-     * * triangle - Renders a triangle.
-     * * diamond - Renders a diamond.
-     * * cross - Renders a cross.
-     * * horizontalLine - Renders a horizontalLine.
-     * * verticalLine - Renders a verticalLine.
-     * * pentagon - Renders a pentagon.
-     * * invertedTriangle - Renders a invertedTriangle.
+     * * Circle - Renders a circle.
+     * * Rectangle - Renders a rectangle.
+     * * Triangle - Renders a triangle.
+     * * Diamond - Renders a diamond.
+     * * Cross - Renders a cross.
+     * * HorizontalLine - Renders a horizontalLine.
+     * * VerticalLine - Renders a verticalLine.
+     * * Pentagon - Renders a pentagon.
+     * * InvertedTriangle - Renders a invertedTriangle.
      * * SeriesType -Render a legend shape based on series type.
@@ -284,2 +247,8 @@ * @default 'SeriesType'
     /**
+     * The DataSource field that contains the color value of point
+     * It is applicable for series
+     * @default ''
+     */
+    pointColorMapping: string;
+    /**
      * Custom style for the selected series or points.
@@ -330,2 +299,3 @@ * @default null
      * To enable or disable tooltip for a series.
+     * @default true
      */
@@ -359,2 +329,3 @@ enableTooltip: boolean;
      * Defines the distance between the segments of a funnel/pyramid series. The range will be from 0 to 1
+     * @default 0
      */
@@ -364,2 +335,3 @@ gapRatio: number;
      * Defines the width of the funnel/pyramid with respect to the chart area
+     * @default '80%'
      */
@@ -369,2 +341,3 @@ width: string;
      * Defines the height of the funnel/pyramid with respect to the chart area
+     * @default '80%'
      */
@@ -374,2 +347,3 @@ height: string;
      * Defines the width of the funnel neck with respect to the chart area
+     * @default '20%'
      */
@@ -379,2 +353,3 @@ neckWidth: string;
      * Defines the height of the funnel neck with respect to the chart area
+     * @default '20%'
      */
@@ -384,4 +359,10 @@ neckHeight: string;
      * Defines how the values have to be reflected, whether through height/surface of the segments
+     * @default 'Linear'
      */
     pyramidMode: PyramidModes;
+    /**
+     * The opacity of the series.
+     * @default 1.
+     */
+    opacity: number;
     /** @private */
@@ -400,2 +381,6 @@ points: AccPoints[];
     lastGroupTo: string;
+    /** @private */
+    isRectSeries: boolean;
+    /** @private */
+    clipRect: Rect;
     /**
@@ -487,6 +472,1 @@ * To find the max bounds of the data label to place smart legend
 export declare function pointByIndex(index: number, points: AccPoints[]): AccPoints;
-/**
- * method to find series, point index by element id
- * @private
- */
-export declare function indexFinder(id: string): Index;

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

@@ -90,31 +90,2 @@ var __extends = (this && this.__extends) || (function () {
     exports.AccumulationDataLabelSettings = AccumulationDataLabelSettings;
-    var AccumulationTooltipSettings = (function (_super) {
-        __extends(AccumulationTooltipSettings, _super);
-        function AccumulationTooltipSettings() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property(false)
-        ], AccumulationTooltipSettings.prototype, "enable", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], AccumulationTooltipSettings.prototype, "enableAnimation", void 0);
-        __decorate([
-            ej2_base_1.Property(null)
-        ], AccumulationTooltipSettings.prototype, "format", void 0);
-        __decorate([
-            ej2_base_1.Property('#FFFFFF')
-        ], AccumulationTooltipSettings.prototype, "fill", void 0);
-        __decorate([
-            ej2_base_1.Complex({ color: null }, base_1.Border)
-        ], AccumulationTooltipSettings.prototype, "border", void 0);
-        __decorate([
-            ej2_base_1.Property(null)
-        ], AccumulationTooltipSettings.prototype, "template", void 0);
-        __decorate([
-            ej2_base_1.Complex(theme_1.Theme.tooltipLabelFont, base_1.Font)
-        ], AccumulationTooltipSettings.prototype, "textStyle", void 0);
-        return AccumulationTooltipSettings;
-    }(ej2_base_1.ChildProperty));
-    exports.AccumulationTooltipSettings = AccumulationTooltipSettings;
     var AccPoints = (function () {
@@ -127,2 +98,3 @@ function AccPoints() {
             this.labelVisible = true;
+            this.regions = null;
         }
@@ -138,2 +110,4 @@ return AccPoints;
             _this.sumOfPoints = 0;
+            _this.isRectSeries = true;
+            _this.clipRect = new helper_1.Rect(0, 0, 0, 0);
             return _this;
@@ -216,2 +190,3 @@ }
             point.y = ej2_base_2.getValue(this.yName, data[i]);
+            point.color = ej2_base_2.getValue(this.pointColorMapping, data[i]);
             point.text = point.originalText = ej2_base_2.getValue(this.dataLabel.name || '', data[i]);
@@ -338,2 +313,5 @@ this.setAccEmptyPoint(point, i, data, colors);
         __decorate([
+            ej2_base_1.Property('')
+        ], AccumulationSeries.prototype, "pointColorMapping", void 0);
+        __decorate([
             ej2_base_1.Property(null)
@@ -401,2 +379,5 @@ ], AccumulationSeries.prototype, "selectionStyle", void 0);
         ], AccumulationSeries.prototype, "pyramidMode", void 0);
+        __decorate([
+            ej2_base_1.Property(1)
+        ], AccumulationSeries.prototype, "opacity", void 0);
         return AccumulationSeries;
@@ -425,18 +406,2 @@ }(ej2_base_1.ChildProperty));
     exports.pointByIndex = pointByIndex;
-    function indexFinder(id) {
-        var ids = ['NaN', 'NaN'];
-        if (id.indexOf('_Point_') > -1) {
-            ids = id.split('_Series_')[1].split('_Point_');
-        }
-        else if (id.indexOf('_shape_') > -1) {
-            ids = id.split('_shape_');
-            ids[0] = '0';
-        }
-        else if (id.indexOf('_text_') > -1) {
-            ids = id.split('_text_');
-            ids[0] = '0';
-        }
-        return new base_1.Index(parseInt(ids[0], 10), parseInt(ids[1], 10));
-    }
-    exports.indexFinder = indexFinder;
 });

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

@@ -33,3 +33,3 @@ /**
  */
-export declare type AccumulationTheme = 'Material' | 'Fabric' | 'Bootstrap';
+export declare type AccumulationTheme = 'Material' | 'Fabric' | 'Bootstrap' | 'Highcontrast';
 /**
@@ -36,0 +36,0 @@ * Defines the empty point mode of the chart.

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

@@ -47,15 +47,2 @@ import { ChartLocation } from '../../common/utils/helper';
     /**
-     * To get tooltip point from mouse x, y
-     * @private
-     */
-    getTooltipPoint(e: MouseEvent, accumulation: AccumulationChart, x: number, y: number): void;
-    /**
-     * To find datalabel from target element
-     */
-    private isDataLabel(target);
-    /**
-     * To get series from index
-     */
-    private getSeriesFromIndex(index, visibleSeries);
-    /**
      * To process the explode on accumulation chart loading
@@ -62,0 +49,0 @@ * @private

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

@@ -44,32 +44,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "../model/acc-base"], function (require, exports, ej2_base_1, helper_1, acc_base_1) {
         };
-        AccumulationBase.prototype.getTooltipPoint = function (e, accumulation, x, y) {
-            var target = e.target;
-            target = accumulation.isTouch ? document.elementFromPoint(x, y) : target;
-            var id = target.id.split(accumulation.element.id + '_Series_');
-            if (id[1]) {
-                var seriesIndex = parseInt(id[1].split('_Point_')[0], 10);
-                var pointIndex = parseInt(id[1].split('_Point_')[1], 10);
-                if (!ej2_base_1.isNullOrUndefined(seriesIndex) && !isNaN(seriesIndex) && !ej2_base_1.isNullOrUndefined(pointIndex) && !isNaN(pointIndex)) {
-                    var series = this.getSeriesFromIndex(seriesIndex, accumulation.visibleSeries);
-                    if (series.enableTooltip) {
-                        accumulation.accumulationTooltipModule.renderTooltip(series.points[pointIndex], series.index);
-                    }
-                }
-            }
-            else if (accumulation.accumulationTooltipModule && accumulation.accumulationTooltipModule.tooltip && !this.isDataLabel(target)) {
-                accumulation.accumulationTooltipModule.tooltip.close();
-            }
-        };
-        AccumulationBase.prototype.isDataLabel = function (target) {
-            if (target.id.indexOf(this.accumulation.element.id + '_datalabel_Series_') > -1) {
-                return true;
-            }
-            return false;
-        };
-        AccumulationBase.prototype.getSeriesFromIndex = function (index, visibleSeries) {
-            return visibleSeries[0];
-        };
         AccumulationBase.prototype.processExplode = function (event) {
             if (event.target.id.indexOf('_Series_') > -1 || event.target.id.indexOf('_datalabel_') > -1) {
-                var pointIndex = acc_base_1.indexFinder(event.target.id).point;
+                var pointIndex = helper_1.indexFinder(event.target.id).point;
                 if (isNaN(pointIndex) || (event.target.id.indexOf('_datalabel_') > -1 &&
@@ -76,0 +49,0 @@ this.accumulation.visibleSeries[0].points[pointIndex].labelPosition === 'Outside')) {

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

@@ -112,4 +112,3 @@ import { Size, Rect } from '../../common/utils/helper';
     /**
-     * To render the datalabels from series points.
-     * @private
+     * To render the data labels from series points.
      */
@@ -116,0 +115,0 @@ renderDataLabel(point: AccPoints, dataLabel: AccumulationDataLabelSettingsModel, parent: Element, points: AccPoints[], series: number, templateElement?: HTMLElement): void;

src/accumulation-chart/renderer/dataLabel.js

@@ -102,3 +102,2 @@ var __extends = (this && this.__extends) || (function () {
             var _this = this;
-            var location = this.accumulation.removeSvgOffset(x, y);
             if (e.target.textContent.indexOf('...') > -1) {
@@ -114,3 +113,3 @@ var targetId = e.target.id.split(this.id);
                         var point = acc_base_1.getSeriesFromIndex(seriesIndex, (this.accumulation).visibleSeries).points[pointIndex];
-                        helper_3.showTooltip(point.text || point.y.toString(), location.x, location.y, this.areaRect.width, this.accumulation.element.id + '_EJ2_Datalabel_Tooltip', helper_2.getElement(this.accumulation.element.id + '_Secondary_Element'));
+                        helper_3.showTooltip(point.text || point.y.toString(), x, y, this.areaRect.width, this.accumulation.element.id + '_EJ2_Datalabel_Tooltip', helper_2.getElement(this.accumulation.element.id + '_Secondary_Element'));
                     }
@@ -404,5 +403,6 @@ }
             point.label = point.originalText || point.y.toString();
+            var border = { width: dataLabel.border.width, color: dataLabel.border.color };
             var argsData = {
                 cancel: false, name: constants_1.textRender, series: this.accumulation.visibleSeries[0], point: point,
-                text: point.label, border: dataLabel.border, color: dataLabel.fill, template: dataLabel.template
+                text: point.label, border: border, color: dataLabel.fill, template: dataLabel.template
             };
@@ -482,3 +482,4 @@ this.accumulation.trigger(constants_1.textRender, argsData);
         AccumulationDataLabel.prototype.getLabelBackground = function (point) {
-            return point.labelPosition === 'Outside' ? this.accumulation.background : point.color;
+            return point.labelPosition === 'Outside' ?
+                this.accumulation.background || this.accumulation.themeStyle.background : point.color;
         };
@@ -485,0 +486,0 @@ AccumulationDataLabel.prototype.correctLabelRegion = function (labelRegion, textSize, padding) {

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

@@ -5,5 +5,5 @@ import { Rect } from '../../common/utils/helper';
 import { Indexes } from '../../common/model/base';
-import { BaseSelection } from '../../common/selection/selection';
+import { BaseSelection } from '../../common/user-interaction/selection';
 /**
- * Selection Module handles the selection for chart.
+ * `AccumulationSelection` module handles the selection for accumulation chart.
  * @private
@@ -23,3 +23,4 @@ */
     /**
-     * Method to select the point and series.
+     * Invoke selection for rendered chart.
+     * @param  {AccumulationChart} chart - Define the chart to invoke the selection.
      * @return {void}
@@ -26,0 +27,0 @@ */

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

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "../model/acc-base", "../../common/model/base", "../../common/selection/selection"], function (require, exports, ej2_base_1, acc_base_1, base_1, selection_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "../model/acc-base", "../../common/model/base", "../../common/user-interaction/selection"], function (require, exports, ej2_base_1, helper_1, acc_base_1, base_1, selection_1) {
     "use strict";
@@ -49,3 +49,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             if (event.target.id.indexOf('_Series_') > -1 || event.target.id.indexOf('_datalabel_') > -1) {
-                this.performSelection(acc_base_1.indexFinder(event.target.id), accumulation, event.target);
+                this.performSelection(helper_1.indexFinder(event.target.id), accumulation, event.target);
             }
@@ -174,3 +174,3 @@ };
         AccumulationSelection.prototype.getSelectionClass = function (id) {
-            return this.generateStyle(this.control.series[acc_base_1.indexFinder(id).series]);
+            return this.generateStyle(this.control.series[helper_1.indexFinder(id).series]);
         };
@@ -177,0 +177,0 @@ AccumulationSelection.prototype.removeStyles = function (elements, index) {

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

@@ -1,57 +0,40 @@
-import { Tooltip } from '@syncfusion/ej2-popups';
-import { AccPoints } from '../model/acc-base';
 import { AccumulationChart } from '../accumulation';
+import { BaseTooltip } from '../../common/user-interaction/tooltip';
 /**
- * AccumulationTooltip module used to render `Tooltip` for Accumulation Chart.
+ * `AccumulationTooltip` module is used to render tooltip for accumulation chart.
  */
-export declare class AccumulationTooltip {
+export declare class AccumulationTooltip extends BaseTooltip {
     accumulation: AccumulationChart;
-    private templateFn;
-    tooltip: Tooltip;
-    private tooltipOption;
-    private targetId;
-    private tooltipIndex;
-    private currentPoint;
-    private clearTooltip;
     constructor(accumulation: AccumulationChart);
     /**
-     * To set template function for toooltip
+     * @hidden
      */
-    private setTemplateFunction(template);
+    private addEventListener();
+    private mouseLeaveHandler(e);
+    private mouseUpHandler(e);
+    private mouseMoveHandler(e);
     /**
-     * To render the tooltip for the point
+     * Renders the tooltip.
+     * @param  {PointerEvent} event - Mouse move event.
+     * @return {void}
      */
-    renderTooltip(point: AccPoints, seriesIndex: number): void;
+    tooltip(event: PointerEvent | TouchEvent): void;
+    private renderSeriesTooltip(e, chart, isFirst, tooltipDiv);
+    private drawMarker(isBottom, size);
+    private getPieData(e, chart, x, y);
     /**
-     * To remove accumulation chart tooltip with animation
-     * @private
+     * To get series from index
      */
-    fadeOutTooltip(): void;
+    private getSeriesFromIndex(index, visibleSeries);
+    private getTemplateText(data);
+    private getTooltipText(data, tooltip);
+    private findHeader(data);
+    private parseTemplate(point, series, format);
     /**
-     * To remove accumulation chart tooltip element
+     * Removes the tooltip on mouse leave.
+     * @return {void}
      * @private
      */
-    removeTooltip(): void;
+    removeTooltip(duration: number): void;
     /**
-     * To get accumulation chart point tooltip content
-     */
-    private getTooltipContent(point, seriesIndex);
-    /**
-     * To customize the accumulation chart tooltip
-     */
-    private tooltipCustomization(args);
-    /**
-     * To update the tooltip element position
-     * @private
-     */
-    updatePosition(id: string, x: number, y: number, pointId: string): void;
-    /**
-     * To get accumulation chart tooltip text from format.
-     */
-    private getTooltipText(point, tooltip, seriesIndex);
-    /**
-     * To parse the tooltip template
-     */
-    private parseTemplate(point, format, series);
-    /**
      * Get module name
@@ -58,0 +41,0 @@ */

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

@@ -1,144 +0,134 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "../model/acc-base", "../../common/utils/helper", "../../common/model/constants"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_popups_1, acc_base_1, helper_1, constants_1) {
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/user-interaction/tooltip"], function (require, exports, ej2_base_1, ej2_base_2, helper_1, tooltip_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var AccumulationTooltip = (function () {
+    var AccumulationTooltip = (function (_super) {
+        __extends(AccumulationTooltip, _super);
         function AccumulationTooltip(accumulation) {
-            this.accumulation = accumulation;
-            this.tooltipOption = accumulation.tooltip;
-            this.targetId = accumulation.element.id + '_pie_tooltip';
-            this.tooltip = new ej2_popups_1.Tooltip({
-                opensOn: 'custom',
-                beforeOpen: this.tooltipCustomization.bind(this),
-                openDelay: 0,
-                closeDelay: 1000
-            });
-            this.tooltip.appendTo(accumulation.element);
+            var _this = _super.call(this, accumulation) || this;
+            _this.accumulation = accumulation;
+            _this.addEventListener();
+            return _this;
         }
-        AccumulationTooltip.prototype.setTemplateFunction = function (template) {
-            var e;
-            try {
-                if (document.querySelectorAll(template).length) {
-                    this.templateFn = ej2_base_1.compile(document.querySelector(template).innerHTML.trim());
-                }
+        AccumulationTooltip.prototype.addEventListener = function () {
+            if (this.accumulation.isDestroyed) {
+                return;
             }
-            catch (e) {
-                this.templateFn = ej2_base_1.compile(template);
+            this.accumulation.on(ej2_base_1.Browser.isPointer ? 'pointerleave' : 'mouseleave', this.mouseLeaveHandler, this);
+            this.accumulation.on(ej2_base_1.Browser.touchMoveEvent, this.mouseMoveHandler, this);
+            this.accumulation.on(ej2_base_1.Browser.touchEndEvent, this.mouseUpHandler, this);
+        };
+        AccumulationTooltip.prototype.mouseLeaveHandler = function (e) {
+            this.removeTooltip(1000);
+        };
+        AccumulationTooltip.prototype.mouseUpHandler = function (e) {
+            var control = this.accumulation;
+            if (control.tooltip.enable && control.isTouch && helper_1.withInBounds(control.mouseX, control.mouseY, control.initialClipRect)) {
+                this.tooltip(e);
+                this.removeTooltip(2000);
             }
         };
-        AccumulationTooltip.prototype.renderTooltip = function (point, seriesIndex) {
-            var element = helper_1.getElement(this.targetId);
-            if (element && (element.getAttribute('data-tooltip-id') === null) ||
-                this.tooltipIndex !== 'series_' + seriesIndex + '_point_' + point.index) {
-                this.updatePosition(this.targetId, point.symbolLocation.x, point.symbolLocation.y, this.accumulation.element.id + '_Series_0_Point_' + point.index);
-                this.setTemplateFunction(this.tooltipOption.template);
-                this.currentPoint = point;
-                this.tooltip.content = this.getTooltipContent(point, seriesIndex);
-                this.tooltip.open(helper_1.getElement(this.targetId));
-                this.tooltipIndex = 'series_' + seriesIndex + '_point_' + point.index;
+        AccumulationTooltip.prototype.mouseMoveHandler = function (e) {
+            var control = this.accumulation;
+            if (control.tooltip.enable && helper_1.withInBounds(control.mouseX, control.mouseY, control.initialClipRect)) {
+                this.tooltip(e);
             }
         };
-        AccumulationTooltip.prototype.fadeOutTooltip = function () {
-            clearTimeout(this.clearTooltip);
-            this.removeTooltip = this.removeTooltip.bind(this);
-            this.clearTooltip = setTimeout(this.removeTooltip, 500);
+        AccumulationTooltip.prototype.tooltip = function (event) {
+            var isTooltip = this.getElement(this.element.id + '_tooltip');
+            var tooltipDiv = this.getTooltipElement(isTooltip);
+            this.renderSeriesTooltip(event, this.accumulation, !isTooltip, tooltipDiv);
         };
-        AccumulationTooltip.prototype.removeTooltip = function () {
-            if (this.tooltip) {
-                this.tooltip.close();
-            }
-        };
-        AccumulationTooltip.prototype.getTooltipContent = function (point, seriesIndex) {
-            if (this.tooltipOption.template && this.templateFn) {
-                var templates = this.templateFn(point);
-                var element = ej2_base_2.createElement('div');
-                while (templates.length > 0) {
-                    element.appendChild(templates[0]);
+        AccumulationTooltip.prototype.renderSeriesTooltip = function (e, chart, isFirst, tooltipDiv) {
+            var data = this.getPieData(e, chart, chart.mouseX, chart.mouseY);
+            var rect = chart.initialClipRect;
+            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);
+                        }
+                    }
+                    else {
+                        this.renderTemplate(data, rect, data.point.symbolLocation, this.getTemplateText(data), isFirst);
+                    }
+                    this.isRemove = true;
                 }
-                return element;
+                this.previousPoints = ej2_base_2.extend([], this.currentPoints, null, true);
             }
             else {
-                return this.getTooltipText(point, this.tooltipOption, seriesIndex);
+                if (!data.point && this.isRemove) {
+                    this.removeTooltip(1000);
+                    this.isRemove = false;
+                }
             }
         };
-        AccumulationTooltip.prototype.tooltipCustomization = function (args) {
-            var argsData = {
-                cancel: false, name: constants_1.tooltipRender,
-                content: this.tooltip.content,
-                textStyle: this.tooltipOption.textStyle,
-                series: this.accumulation.visibleSeries[0],
-                point: this.currentPoint
-            };
-            this.accumulation.trigger(constants_1.tooltipRender, argsData);
-            args.cancel = argsData.cancel;
-            this.tooltip.content = argsData.content;
-            this.tooltipOption.textStyle = argsData.textStyle;
-            var content = document.getElementsByClassName('e-tooltip-wrap')[0];
-            var font = this.tooltipOption.textStyle;
-            var position = this.tooltip.position.split(' ');
-            var borderColor = this.tooltipOption.border.color || this.currentPoint.color;
-            var pointerSize = 8;
-            var outerWidth;
-            var innerWidth;
-            args.element.classList.remove('e-popup-close');
-            args.element.classList.add('e-popup-open');
-            var arrowEle = args.element.querySelector('.e-arrow-tip');
-            var borderWidth = this.tooltipOption.border.width;
-            ej2_base_2.setStyleAttribute(args.element, {
-                'backgroundColor': this.tooltipOption.fill, 'borderColor': borderColor,
-                'borderWidth': borderWidth, 'borderRadius': '5px', 'pointer-events': 'none'
-            });
-            ej2_base_2.setStyleAttribute(args.element.querySelector('.e-tip-content'), {
-                'color': font.color || '#000000', 'fontFamily': font.fontFamily, 'fontSize': font.size,
-                'fontWeight': font.fontWeight, 'opacity': font.opacity.toString(), 'fontStyle': font.fontStyle
-            });
-            pointerSize = args.element.querySelector('.e-arrow-tip').offsetHeight;
-            outerWidth = pointerSize + 'px';
-            ej2_base_2.setStyleAttribute(args.element.querySelector('.e-arrow-tip-outer'), {
-                'borderRightColor': 'transparent', 'borderLeftColor': 'transparent', 'borderBottomColor': borderColor,
-                'borderLeftWidth': outerWidth, 'borderRightWidth': outerWidth, 'borderBottomWidth': outerWidth,
-                'borderTopColor': borderColor,
-            });
-            innerWidth = (pointerSize - borderWidth) + 'px';
-            ej2_base_2.setStyleAttribute(args.element.querySelector('.e-arrow-tip-inner'), {
-                'borderRightColor': 'transparent', 'borderLeftColor': 'transparent', 'borderBottomColor': borderColor,
-                'borderLeftWidth': innerWidth, 'borderRightWidth': innerWidth, 'borderBottomWidth': innerWidth,
-                'left': borderWidth, 'top': 0, 'borderTopColor': this.tooltipOption.fill
-            });
-            ej2_base_2.setStyleAttribute(args.element, {
-                'display': 'block', 'transitionProperty': 'left,top',
-                'transitionDuration': this.tooltipOption.enableAnimation ? '500ms' : '0ms'
-            });
-            this.tooltip.dataBind();
+        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.updatePosition = function (id, x, y, pointId) {
-            var pointElement = helper_1.getElement(pointId);
-            var translate = pointElement.getAttribute('transform');
-            if (!ej2_base_3.isNullOrUndefined(translate) && translate !== '') {
-                translate = translate.replace('translate(', '');
-                translate = translate.replace(')', '');
-                var tx = parseInt(translate.split(',')[0], 10);
-                var ty = parseInt(translate.split(',')[1], 10);
-                x = !isNaN(tx) ? tx + x : x;
-                y = !isNaN(ty) ? ty + y : y;
+        AccumulationTooltip.prototype.getPieData = function (e, chart, x, y) {
+            var target = e.target;
+            var id = helper_1.indexFinder(target.id, true);
+            if (!isNaN(id.series)) {
+                var seriesIndex = id.series;
+                var pointIndex = id.point;
+                if (!ej2_base_2.isNullOrUndefined(seriesIndex) && !isNaN(seriesIndex) && !ej2_base_2.isNullOrUndefined(pointIndex) && !isNaN(pointIndex)) {
+                    var series = this.getSeriesFromIndex(seriesIndex, chart.visibleSeries);
+                    if (series.enableTooltip) {
+                        return new helper_1.AccPointData(series.points[pointIndex], series);
+                    }
+                }
             }
-            var tooltip = helper_1.getElement(id);
-            if (tooltip) {
-                tooltip.style.top = y + 'px';
-                tooltip.style.left = x + 'px';
+            return new helper_1.AccPointData(null, null);
+        };
+        AccumulationTooltip.prototype.getSeriesFromIndex = function (index, visibleSeries) {
+            return visibleSeries[0];
+        };
+        AccumulationTooltip.prototype.getTemplateText = function (data) {
+            var point = ej2_base_2.extend({}, data.point);
+            return point;
+        };
+        AccumulationTooltip.prototype.getTooltipText = function (data, tooltip) {
+            var series = data.series;
+            var format = tooltip.format ? tooltip.format : '${point.x} : <b>${point.y}</b>';
+            return this.parseTemplate(data.point, series, format);
+        };
+        AccumulationTooltip.prototype.findHeader = function (data) {
+            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);
             }
-            else {
-                tooltip = ej2_base_2.createElement('div', {
-                    id: id,
-                    styles: 'position:absolute;left:' + x + 'px;top:' + y +
-                        'px;width:2px;height:2px;background:transparent'
-                });
-                helper_1.getElement(this.accumulation.element.id + '_Secondary_Element').appendChild(tooltip);
-            }
         };
-        AccumulationTooltip.prototype.getTooltipText = function (point, tooltip, seriesIndex) {
-            var format = tooltip.format ? tooltip.format : '${point.x} : ${point.y}';
-            var series = acc_base_1.getSeriesFromIndex(seriesIndex, this.accumulation.visibleSeries);
-            return this.parseTemplate(point, format, series);
-        };
-        AccumulationTooltip.prototype.parseTemplate = function (point, format, series) {
+        AccumulationTooltip.prototype.parseTemplate = function (point, series, format) {
             var value;
@@ -159,2 +149,32 @@ var textValue;
         };
+        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 () {
@@ -166,4 +186,4 @@ return 'AccumulationTooltip';
         return AccumulationTooltip;
-    }());
+    }(tooltip_1.BaseTooltip));
     exports.AccumulationTooltip = AccumulationTooltip;
 });

src/chart/annotation/annotation.d.ts

@@ -5,3 +5,3 @@ import { Chart } from '../../chart/chart';
 /**
- * Annotation Module handles the Annotation for chart.
+ * `ChartAnnotation` module handles the annotation for chart.
  */
@@ -8,0 +8,0 @@ export declare class ChartAnnotation extends AnnotationBase {

src/chart/annotation/annotation.js

@@ -24,4 +24,2 @@ var __extends = (this && this.__extends) || (function () {
             var _this = this;
-            var annotationElement;
-            var location;
             this.parentElement = ej2_base_1.createElement('div', {
@@ -31,7 +29,3 @@ id: this.chart.element.id + '_Annotation_Collections'
             this.annotations.map(function (annotation, index) {
-                annotationElement = _this.render(annotation, index);
-                location = new helper_1.ChartLocation(0, 0);
-                if (_this['setAnnotation' + annotation.coordinateUnits + 'Value'](location)) {
-                    _this.setElementStyle(location, annotationElement, _this.parentElement);
-                }
+                _this.processAnnotation(annotation, index, _this.parentElement);
             });
@@ -38,0 +32,0 @@ helper_1.appendElement(this.parentElement, element);

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

@@ -11,3 +11,3 @@ 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';
      * If specified as '100%, row renders to the full height of its chart.
-     * @default 100%.
+     * @default '100%'
      */
@@ -33,3 +33,3 @@
      * If specified as '100%, column renders to the full width of its chart.
-     * @default 100%.
+     * @default '100%'
      */
@@ -54,3 +54,3 @@
      * The width of the line in pixels.
-     * @default 1.
+     * @default 1
      */
@@ -62,3 +62,3 @@
      * The dash array of the grid lines.
-     * @default ''.
+     * @default ''
      */
@@ -70,2 +70,3 @@
      * The color of the major grid line that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -84,3 +85,3 @@
      * The width of the line in pixels.
-     * @default 0.7.
+     * @default 0.7
      */
@@ -92,3 +93,3 @@
      * The dash array of grid lines.
-     * @default ''.
+     * @default ''
      */
@@ -100,2 +101,3 @@
      * The color of the minor grid line that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -114,3 +116,3 @@
      * The width of the line in pixels.
-     * @default 1.
+     * @default 1
      */
@@ -122,3 +124,3 @@
      * The dash array of the axis line.
-     * @default ''.
+     * @default ''
      */
@@ -130,2 +132,3 @@
      * The color of the axis line that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -144,3 +147,3 @@
      * The width of the tick lines in pixels.
-     * @default 1.
+     * @default 1
      */
@@ -152,3 +155,3 @@
      * The height of the ticks in pixels.
-     * @default 5.
+     * @default 5
      */
@@ -160,2 +163,3 @@
      * The color of the major tick line that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -174,3 +178,3 @@
      * The width of the tick line in pixels.
-     * @default 0.7.
+     * @default 0.7
      */
@@ -182,3 +186,3 @@
      * The height of the ticks in pixels.
-     * @default 5.
+     * @default 5
      */
@@ -190,2 +194,3 @@
      * The color of the minor tick line that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -204,3 +209,3 @@
      * If set to true, crosshair ToolTip will be visible.
-     *  @default false.
+     *  @default false
      */
@@ -212,2 +217,3 @@
      * The fill color of the ToolTip accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -244,3 +250,3 @@
      * Specifies the title of an axis.
-     * @default ''.
+     * @default ''
      */
@@ -259,3 +265,3 @@
      * It also accepts placeholder like '{value}°C' in which value represent the axis label, e.g, 20°C.
-     * @default ''.
+     * @default ''
      */
@@ -267,3 +273,3 @@
      * Specifies the skeleton format in which the dateTime format will process.
-     * @default ''.
+     * @default ''
      */
@@ -275,3 +281,3 @@
      * It specifies the type of format to be used in dateTime format process.
-     * @default 'DateTime'.
+     * @default 'DateTime'
      */
@@ -283,3 +289,3 @@
      * Left and right padding for the plot area in pixels.
-     * @default 0.
+     * @default 0
      */
@@ -291,3 +297,3 @@
      * Specifies indexed category  axis.
-     * @default false.
+     * @default false
      */
@@ -299,3 +305,3 @@
      * The base value for logarithmic axis. It requires `valueType` to be `Logarithmic`.
-     * @default 10.
+     * @default 10
      */
@@ -323,3 +329,3 @@ logBase?: number;
      * ```
-     * @default 0.
+     * @default 0
      */
@@ -347,3 +353,3 @@
      * ```
-     * @default 0.
+     * @default 0
      */
@@ -355,3 +361,3 @@
      * Specifies the number of `columns` or `rows` an axis has to span horizontally or vertically.
-     * @default 1.
+     * @default 1
      */
@@ -363,3 +369,3 @@
      * With this property, you can request axis to calculate intervals approximately equal to your specified interval.
-     * @default null.
+     * @default null
      */
@@ -371,3 +377,3 @@
      * The maximum number of label count per 100 pixels with respect to the axis length.
-     * @default 3.
+     * @default 3
      */
@@ -379,3 +385,3 @@
      * The axis is scaled by this factor. When zoomFactor is 0.5, the chart is scaled by 200% along this axis. Value ranges from 0 to 1.
-     * @default 1.
+     * @default 1
      */
@@ -387,3 +393,3 @@
      * Position of the zoomed axis. Value ranges from 0 to 1.
-     * @default 0.
+     * @default 0
      */
@@ -395,3 +401,3 @@
      * If set to true, the axis will render at the opposite side of its default position.
-     * @default false.
+     * @default false
      */
@@ -403,3 +409,3 @@
      * If set to true, axis interval will be calculated automatically with respect to the zoomed range.
-     * @default true.
+     * @default true
      */
@@ -415,3 +421,3 @@
      * * round: Axis range is rounded to the nearest possible value divided by the interval.
-     * @default 'Auto'.
+     * @default 'Auto'
      */
@@ -423,7 +429,7 @@
      * Specifies the type of data the axis is handling.
-     * * double:  Renders a numeric axis.
-     * * dateTime: Renders a dateTime axis.
-     * * category: Renders a category axis.
-     * * logarithmic: Renders a log axis.
-     * @default 'Double'.
+     * * Double:  Renders a numeric axis.
+     * * DateTime: Renders a dateTime axis.
+     * * Category: Renders a category axis.
+     * * Logarithmic: Renders a log axis.
+     * @default 'Double'
      */
@@ -435,6 +441,6 @@
      * Specifies the position of labels at the edge of the axis.They are,
-     * * none: No action will be performed.
-     * * hide: Edge label will be hidden.
-     * * shift: Shifts the edge labels.
-     * @default 'None'.
+     * * None: No action will be performed.
+     * * Hide: Edge label will be hidden.
+     * * Shift: Shifts the edge labels.
+     * @default 'None'
      */
@@ -446,9 +452,9 @@
      * Specifies the types like `Years`, `Months`, `Days`, `Hours`, `Minutes`, `Seconds` in date time axis.They are,
-     * * auto: Defines the interval of the axis based on data.
-     * * years: Defines the interval of the axis in years.
-     * * months: Defines the interval of the axis in months.
-     * * days: Defines the interval of the axis in days.
-     * * hours: Defines the interval of the axis in hours.
-     * * minutes: Defines the interval of the axis in minutes.
-     * @default 'Auto'.
+     * * Auto: Defines the interval of the axis based on data.
+     * * Years: Defines the interval of the axis in years.
+     * * Months: Defines the interval of the axis in months.
+     * * Days: Defines the interval of the axis in days.
+     * * Hours: Defines the interval of the axis in hours.
+     * * Minutes: Defines the interval of the axis in minutes.
+     * @default 'Auto'
      */
@@ -462,3 +468,3 @@
      * * onTicks: Renders the label on the ticks.
-     * @default 'BetweenTicks'.
+     * @default 'BetweenTicks'
      */
@@ -472,3 +478,3 @@
      * * outside: Renders the ticks outside to the axis line.
-     * @default 'Outside'.
+     * @default 'Outside'
      */
@@ -482,3 +488,3 @@
      * * outside: Renders the labels outside to the axis line.
-     * @default 'Outside'.
+     * @default 'Outside'
      */
@@ -491,3 +497,3 @@
      * To associate an axis with the series, set this name to the xAxisName/yAxisName properties of the series.
-     * @default ''.
+     * @default ''
      */
@@ -499,3 +505,3 @@
      * If set to true, axis label will be visible.
-     * @default true.
+     * @default true
      */
@@ -507,3 +513,3 @@
      * Specifies the number of minor ticks per interval.
-     * @default 0.
+     * @default 0
      */
@@ -515,3 +521,3 @@
      * The angle to which the axis label gets rotated.
-     * @default 0.
+     * @default 0
      */
@@ -544,3 +550,3 @@
      * Specifies the minimum range of an axis.
-     * @default null.
+     * @default null
      */
@@ -552,3 +558,3 @@
      * Specifies the maximum range of an axis.
-     * @default null.
+     * @default null
      */
@@ -560,3 +566,3 @@
      * Specifies the interval for an axis.
-     * @default null.
+     * @default null
      */
@@ -598,7 +604,7 @@
      * Specifies the actions like `Hide`, `Rotate45`, and `Rotate90` when the axis labels intersect with each other.They are,
-     * * none: Shows all the labels.
-     * * hide: Hides the label when it intersects.
-     * * rotate45: Rotates the label to 45 degree when it intersects.
-     * * rotate90: Rotates the label to 90 degree when it intersects.
-     * @default Hide.
+     * * None: Shows all the labels.
+     * * Hide: Hides the label when it intersects.
+     * * Rotate45: Rotates the label to 45 degree when it intersects.
+     * * Rotate90: Rotates the label to 90 degree when it intersects.
+     * @default Hide
      */
@@ -636,3 +642,3 @@
      * TabIndex value for the axis.
-     * @default 2.
+     * @default 2
      */
@@ -639,0 +645,0 @@ tabIndex?: number;

src/chart/axis/axis.d.ts

@@ -23,3 +23,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * If specified as '100%, row renders to the full height of its chart.
-     * @default 100%.
+     * @default '100%'
      */
@@ -55,3 +55,3 @@ height: string;
      * If specified as '100%, column renders to the full width of its chart.
-     * @default 100%.
+     * @default '100%'
      */
@@ -88,3 +88,3 @@ width: string;
      * The width of the line in pixels.
-     * @default 1.
+     * @default 1
      */
@@ -94,3 +94,3 @@ width: number;
      * The dash array of the grid lines.
-     * @default ''.
+     * @default ''
      */
@@ -100,2 +100,3 @@ dashArray: string;
      * The color of the major grid line that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -110,3 +111,3 @@ color: string;
      * The width of the line in pixels.
-     * @default 0.7.
+     * @default 0.7
      */
@@ -116,3 +117,3 @@ width: number;
      * The dash array of grid lines.
-     * @default ''.
+     * @default ''
      */
@@ -122,2 +123,3 @@ dashArray: string;
      * The color of the minor grid line that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -132,3 +134,3 @@ color: string;
      * The width of the line in pixels.
-     * @default 1.
+     * @default 1
      */
@@ -138,3 +140,3 @@ width: number;
      * The dash array of the axis line.
-     * @default ''.
+     * @default ''
      */
@@ -144,2 +146,3 @@ dashArray: string;
      * The color of the axis line that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -154,3 +157,3 @@ color: string;
      * The width of the tick lines in pixels.
-     * @default 1.
+     * @default 1
      */
@@ -160,3 +163,3 @@ width: number;
      * The height of the ticks in pixels.
-     * @default 5.
+     * @default 5
      */
@@ -166,2 +169,3 @@ height: number;
      * The color of the major tick line that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -176,3 +180,3 @@ color: string;
      * The width of the tick line in pixels.
-     * @default 0.7.
+     * @default 0.7
      */
@@ -182,3 +186,3 @@ width: number;
      * The height of the ticks in pixels.
-     * @default 5.
+     * @default 5
      */
@@ -188,2 +192,3 @@ height: number;
      * The color of the minor tick line that accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -198,3 +203,3 @@ color: string;
      * If set to true, crosshair ToolTip will be visible.
-     *  @default false.
+     *  @default false
      */
@@ -204,2 +209,3 @@ enable: Boolean;
      * The fill color of the ToolTip accepts value in hex and rgba as a valid CSS color string.
+     * @default null
      */
@@ -226,3 +232,3 @@ fill: string;
      * Specifies the title of an axis.
-     * @default ''.
+     * @default ''
      */
@@ -237,3 +243,3 @@ title: string;
      * It also accepts placeholder like '{value}°C' in which value represent the axis label, e.g, 20°C.
-     * @default ''.
+     * @default ''
      */
@@ -243,3 +249,3 @@ labelFormat: string;
      * Specifies the skeleton format in which the dateTime format will process.
-     * @default ''.
+     * @default ''
      */
@@ -249,3 +255,3 @@ skeleton: string;
      * It specifies the type of format to be used in dateTime format process.
-     * @default 'DateTime'.
+     * @default 'DateTime'
      */
@@ -255,3 +261,3 @@ skeletonType: SkeletonType;
      * Left and right padding for the plot area in pixels.
-     * @default 0.
+     * @default 0
      */
@@ -261,3 +267,3 @@ plotOffset: number;
      * Specifies indexed category  axis.
-     * @default false.
+     * @default false
      */
@@ -267,3 +273,3 @@ isIndexed: boolean;
      * The base value for logarithmic axis. It requires `valueType` to be `Logarithmic`.
-     * @default 10.
+     * @default 10
      */
@@ -290,3 +296,3 @@ logBase: number;
      * ```
-     * @default 0.
+     * @default 0
      */
@@ -312,3 +318,3 @@ columnIndex: number;
      * ```
-     * @default 0.
+     * @default 0
      */
@@ -318,3 +324,3 @@ rowIndex: number;
      * Specifies the number of `columns` or `rows` an axis has to span horizontally or vertically.
-     * @default 1.
+     * @default 1
      */
@@ -324,3 +330,3 @@ span: number;
      * With this property, you can request axis to calculate intervals approximately equal to your specified interval.
-     * @default null.
+     * @default null
      */
@@ -330,3 +336,3 @@ desiredIntervals: number;
      * The maximum number of label count per 100 pixels with respect to the axis length.
-     * @default 3.
+     * @default 3
      */
@@ -336,3 +342,3 @@ maximumLabels: number;
      * The axis is scaled by this factor. When zoomFactor is 0.5, the chart is scaled by 200% along this axis. Value ranges from 0 to 1.
-     * @default 1.
+     * @default 1
      */
@@ -342,3 +348,3 @@ zoomFactor: number;
      * Position of the zoomed axis. Value ranges from 0 to 1.
-     * @default 0.
+     * @default 0
      */
@@ -348,3 +354,3 @@ zoomPosition: number;
      * If set to true, the axis will render at the opposite side of its default position.
-     * @default false.
+     * @default false
      */
@@ -354,3 +360,3 @@ opposedPosition: boolean;
      * If set to true, axis interval will be calculated automatically with respect to the zoomed range.
-     * @default true.
+     * @default true
      */
@@ -364,3 +370,3 @@ enableAutoIntervalOnZooming: boolean;
      * * round: Axis range is rounded to the nearest possible value divided by the interval.
-     * @default 'Auto'.
+     * @default 'Auto'
      */
@@ -370,7 +376,7 @@ rangePadding: ChartRangePadding;
      * Specifies the type of data the axis is handling.
-     * * double:  Renders a numeric axis.
-     * * dateTime: Renders a dateTime axis.
-     * * category: Renders a category axis.
-     * * logarithmic: Renders a log axis.
-     * @default 'Double'.
+     * * Double:  Renders a numeric axis.
+     * * DateTime: Renders a dateTime axis.
+     * * Category: Renders a category axis.
+     * * Logarithmic: Renders a log axis.
+     * @default 'Double'
      */
@@ -380,6 +386,6 @@ valueType: ValueType;
      * Specifies the position of labels at the edge of the axis.They are,
-     * * none: No action will be performed.
-     * * hide: Edge label will be hidden.
-     * * shift: Shifts the edge labels.
-     * @default 'None'.
+     * * None: No action will be performed.
+     * * Hide: Edge label will be hidden.
+     * * Shift: Shifts the edge labels.
+     * @default 'None'
      */
@@ -389,9 +395,9 @@ edgeLabelPlacement: EdgeLabelPlacement;
      * Specifies the types like `Years`, `Months`, `Days`, `Hours`, `Minutes`, `Seconds` in date time axis.They are,
-     * * auto: Defines the interval of the axis based on data.
-     * * years: Defines the interval of the axis in years.
-     * * months: Defines the interval of the axis in months.
-     * * days: Defines the interval of the axis in days.
-     * * hours: Defines the interval of the axis in hours.
-     * * minutes: Defines the interval of the axis in minutes.
-     * @default 'Auto'.
+     * * Auto: Defines the interval of the axis based on data.
+     * * Years: Defines the interval of the axis in years.
+     * * Months: Defines the interval of the axis in months.
+     * * Days: Defines the interval of the axis in days.
+     * * Hours: Defines the interval of the axis in hours.
+     * * Minutes: Defines the interval of the axis in minutes.
+     * @default 'Auto'
      */
@@ -403,3 +409,3 @@ intervalType: IntervalType;
      * * onTicks: Renders the label on the ticks.
-     * @default 'BetweenTicks'.
+     * @default 'BetweenTicks'
      */
@@ -411,3 +417,3 @@ labelPlacement: LabelPlacement;
      * * outside: Renders the ticks outside to the axis line.
-     * @default 'Outside'.
+     * @default 'Outside'
      */
@@ -419,3 +425,3 @@ tickPosition: AxisPosition;
      * * outside: Renders the labels outside to the axis line.
-     * @default 'Outside'.
+     * @default 'Outside'
      */
@@ -426,3 +432,3 @@ labelPosition: AxisPosition;
      * To associate an axis with the series, set this name to the xAxisName/yAxisName properties of the series.
-     * @default ''.
+     * @default ''
      */
@@ -432,3 +438,3 @@ name: string;
      * If set to true, axis label will be visible.
-     * @default true.
+     * @default true
      */
@@ -438,3 +444,3 @@ visible: boolean;
      * Specifies the number of minor ticks per interval.
-     * @default 0.
+     * @default 0
      */
@@ -444,3 +450,3 @@ minorTicksPerInterval: number;
      * The angle to which the axis label gets rotated.
-     * @default 0.
+     * @default 0
      */
@@ -465,3 +471,3 @@ labelRotation: number;
      * Specifies the minimum range of an axis.
-     * @default null.
+     * @default null
      */
@@ -471,3 +477,3 @@ minimum: Object;
      * Specifies the maximum range of an axis.
-     * @default null.
+     * @default null
      */
@@ -477,3 +483,3 @@ maximum: Object;
      * Specifies the interval for an axis.
-     * @default null.
+     * @default null
      */
@@ -503,7 +509,7 @@ interval: number;
      * Specifies the actions like `Hide`, `Rotate45`, and `Rotate90` when the axis labels intersect with each other.They are,
-     * * none: Shows all the labels.
-     * * hide: Hides the label when it intersects.
-     * * rotate45: Rotates the label to 45 degree when it intersects.
-     * * rotate90: Rotates the label to 90 degree when it intersects.
-     * @default Hide.
+     * * None: Shows all the labels.
+     * * Hide: Hides the label when it intersects.
+     * * Rotate45: Rotates the label to 45 degree when it intersects.
+     * * Rotate90: Rotates the label to 90 degree when it intersects.
+     * @default Hide
      */
@@ -533,3 +539,3 @@ labelIntersectAction: LabelIntersectAction;
      * TabIndex value for the axis.
-     * @default 2.
+     * @default 2
      */
@@ -536,0 +542,0 @@ tabIndex: number;

src/chart/axis/axis.js

@@ -98,3 +98,3 @@ var __extends = (this && this.__extends) || (function () {
         __decorate([
-            ej2_base_1.Property(theme_1.Theme.axisMajorGridLineColor)
+            ej2_base_1.Property(null)
         ], MajorGridLines.prototype, "color", void 0);
@@ -116,3 +116,3 @@ return MajorGridLines;
         __decorate([
-            ej2_base_1.Property(theme_1.Theme.axisMinorGridLineColor)
+            ej2_base_1.Property(null)
         ], MinorGridLines.prototype, "color", void 0);
@@ -134,3 +134,3 @@ return MinorGridLines;
         __decorate([
-            ej2_base_1.Property(theme_1.Theme.axisLineColor)
+            ej2_base_1.Property(null)
         ], AxisLine.prototype, "color", void 0);
@@ -152,3 +152,3 @@ return AxisLine;
         __decorate([
-            ej2_base_1.Property(theme_1.Theme.axisMajorTickLineColor)
+            ej2_base_1.Property(null)
         ], MajorTickLines.prototype, "color", void 0);
@@ -170,3 +170,3 @@ return MajorTickLines;
         __decorate([
-            ej2_base_1.Property(theme_1.Theme.axisMinorTickLineColor)
+            ej2_base_1.Property(null)
         ], MinorTickLines.prototype, "color", void 0);
@@ -185,3 +185,3 @@ return MinorTickLines;
         __decorate([
-            ej2_base_1.Property(theme_1.Theme.crossHairLabelColor)
+            ej2_base_1.Property(null)
         ], CrosshairTooltip.prototype, "fill", void 0);
@@ -224,11 +224,11 @@ __decorate([
         Axis.prototype.findLabelSize = function (crossAxis, innerPadding) {
+            var titleSize = 0;
+            if (this.title) {
+                titleSize = helper_1.measureText(this.title, this.titleStyle).height + innerPadding;
+            }
             if (this.labelPosition === 'Inside') {
-                return 0;
+                return titleSize + innerPadding;
             }
-            var titleSize = 0;
             var diff;
             var value;
-            if (this.title) {
-                titleSize = helper_1.measureText(this.title, this.titleStyle).height + innerPadding;
-            }
             var labelSize = titleSize + innerPadding + axisPadding +
@@ -405,3 +405,4 @@ ((this.orientation === 'Vertical') ? this.maxLabelSize.width : this.maxLabelSize.height) + this.multiLevelLabelHeight;
                 }
-                if (this.angle % 360 === 0 && this.orientation === 'Horizontal' && this.rect.width > 0 && !isIntersect) {
+                if ((action !== 'None' || this.angle % 360 === 0) && this.orientation === 'Horizontal' &&
+                    this.rect.width > 0 && !isIntersect) {
                     pointX = (helper_1.valueToCoefficient(label.value, this) * this.rect.width) + this.rect.x;
@@ -603,3 +604,3 @@ pointX -= label.size.width / 2;
         __decorate([
-            ej2_base_1.Property('Hide')
+            ej2_base_1.Property('Trim')
         ], Axis.prototype, "labelIntersectAction", void 0);
@@ -628,3 +629,3 @@ __decorate([
         __decorate([
-            ej2_base_1.Complex({ color: theme_1.Theme.axisLineColor, width: 0, type: 'Rectangle' }, chart_base_1.LabelBorder)
+            ej2_base_1.Complex({ color: null, width: 0, type: 'Rectangle' }, chart_base_1.LabelBorder)
         ], Axis.prototype, "border", void 0);
@@ -631,0 +632,0 @@ return Axis;

src/chart/axis/cartesian-panel.js

@@ -427,3 +427,3 @@ 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) {
                 'stroke-width': axis.lineStyle.width,
-                'stroke': axis.lineStyle.color
+                'stroke': axis.lineStyle.color || chart.themeStyle.axisLine
             };
@@ -533,3 +533,3 @@ this.htmlObject = chart.renderer.drawLine(optionsLine);
                 }
-                helper_3.textElement(options, axis.labelStyle, axis.visibleLabels[i].labelStyle.color, labelElement);
+                helper_3.textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement);
             }
@@ -547,3 +547,4 @@ if (!chart.delayRedraw) {
                 var pointY = void 0;
-                var gap = (rect.height / axis.visibleRange.delta) * axis.visibleRange.interval;
+                var gap = (rect.height / axis.visibleRange.delta) * (axis.valueType === 'DateTime' ? axis.dateTimeInterval
+                    : axis.visibleRange.interval);
                 var endY = void 0;
@@ -609,4 +610,5 @@ var length_1 = axis.maxLabelSize.width + 10 + ((axis.tickPosition === axis.labelPosition) ?
             var elementSize = helper_1.measureText(axis.title, axis.titleStyle);
-            var padding = (axis.tickPosition === 'Inside' ? 0 : axis.majorTickLines.height) + (axis.labelPosition === 'Inside'
-                ? 0 : (axis.maxLabelSize.width + axis.multiLevelLabelHeight)) + this.padding * 2;
+            var padding = (axis.tickPosition === 'Inside' ? 0 : axis.majorTickLines.height + this.padding) +
+                (axis.labelPosition === 'Inside' ? 0 :
+                    (axis.maxLabelSize.width + axis.multiLevelLabelHeight + this.padding));
             padding = axis.opposedPosition ? padding : -padding;
@@ -616,3 +618,3 @@ var x = rect.x + padding;
             var options = new helper_1.TextOption(chart.element.id + '_AxisTitle_' + index, x, y - this.padding, 'middle', axis.title, 'rotate(' + labelRotation + ',' + (x) + ',' + (y) + ')');
-            var element = helper_3.textElement(options, axis.titleStyle, axis.titleStyle.color, parent);
+            var element = helper_3.textElement(options, axis.titleStyle, axis.titleStyle.color || chart.themeStyle.axisTitle, parent);
             element.setAttribute('aria-label', axis.description || axis.title);
@@ -763,8 +765,10 @@ element.setAttribute('tabindex', axis.tabIndex.toString());
             var width = 0;
-            var intervalLength = rect.width / axis.visibleLabels.length;
+            var length = axis.visibleLabels.length;
+            var intervalLength;
             var label;
-            for (var i = 0, len = axis.visibleLabels.length; i < len; i++) {
+            for (var i = 0, len = length; i < len; i++) {
                 label = axis.visibleLabels[i];
                 pointX = (helper_1.valueToCoefficient(label.value, axis) * rect.width) + rect.x;
                 elementSize = label.size;
+                intervalLength = rect.width / length;
                 width = ((axis.labelIntersectAction === 'Trim' || axis.labelIntersectAction === 'Wrap')
@@ -784,3 +788,3 @@ && elementSize.width > intervalLength) ? intervalLength : elementSize.width;
                 }
-                options = new helper_1.TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY, '', this.findAxisLabel(axis, label.text, intervalLength));
+                options = new helper_1.TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY, '');
                 if (axis.edgeLabelPlacement) {
@@ -798,6 +802,13 @@ switch (axis.edgeLabelPlacement) {
                             if ((i === 0 || (axis.isInversed && i === len - 1)) && options.x < rect.x) {
+                                intervalLength -= (rect.x - options.x);
                                 options.x = pointX = rect.x;
                             }
                             else if ((i === len - 1 || (axis.isInversed && i === 0)) && ((options.x + width) > rect.x + rect.width)) {
-                                options.x = pointX = rect.x + rect.width - width;
+                                if (elementSize.width > intervalLength && axis.labelIntersectAction === 'Trim') {
+                                    intervalLength -= (options.x + width - (rect.x + rect.width));
+                                }
+                                else {
+                                    intervalLength = width;
+                                }
+                                options.x = pointX = rect.x + rect.width - intervalLength;
                             }
@@ -807,2 +818,3 @@ break;
                 }
+                options.text = this.findAxisLabel(axis, label.text, intervalLength);
                 if (axis.angle % 360 === 0 && axis.labelIntersectAction === 'Hide' && i !== 0 &&
@@ -823,3 +835,3 @@ (!axis.isInversed ? options.x <= previousEnd : options.x + width >= previousEnd)) {
                 }
-                helper_3.textElement(options, axis.labelStyle, axis.visibleLabels[i].labelStyle.color, labelElement, axis.opposedPosition).setAttribute('style', 'cursor: default');
+                helper_3.textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement, (axis.opposedPosition !== (axis.labelPosition === 'Inside'))).setAttribute('style', 'cursor: default');
             }
@@ -839,3 +851,4 @@ if (!chart.delayRedraw) {
                 var pointX = void 0;
-                var gap = (axisRect.width / axis.visibleRange.delta) * axis.visibleRange.interval;
+                var gap = (axisRect.width / axis.visibleRange.delta) * (axis.valueType === 'DateTime' ? axis.dateTimeInterval
+                    : axis.visibleRange.interval);
                 var endX = void 0;
@@ -898,3 +911,3 @@ var length_2 = axis.maxLabelSize.height +
         CartesianAxisLayoutPanel.prototype.createAxisBorderElement = function (axis, index, labelBorder, parent) {
-            var borderElement = this.chart.renderer.drawPath(new helper_2.PathOption(this.chart.element.id + '_BorderLine_' + index, 'transparent', axis.border.width, axis.border.color, 1, '', labelBorder));
+            var borderElement = this.chart.renderer.drawPath(new helper_2.PathOption(this.chart.element.id + '_BorderLine_' + index, 'transparent', axis.border.width, axis.border.color || this.chart.themeStyle.axisLine, 1, '', labelBorder));
             borderElement.setAttribute('style', 'pointer-events: none');
@@ -914,7 +927,8 @@ parent.appendChild(borderElement);
             var elementSize = helper_1.measureText(axis.title, axis.titleStyle);
-            var padding = (axis.tickPosition === 'Inside' ? 0 : axis.majorTickLines.height) + (axis.labelPosition === 'Inside'
-                ? 0 : axis.maxLabelSize.height + axis.multiLevelLabelHeight) + this.padding * 2;
+            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));
             var options = new helper_1.TextOption(chart.element.id + '_AxisTitle_' + index, rect.x + rect.width / 2, rect.y + padding, 'middle', axis.title);
-            var element = helper_3.textElement(options, axis.titleStyle, axis.titleStyle.color, parent);
+            var element = helper_3.textElement(options, axis.titleStyle, axis.titleStyle.color || chart.themeStyle.axisTitle, parent);
             element.setAttribute('aria-label', axis.description || axis.title);
@@ -927,3 +941,3 @@ element.setAttribute('tabindex', axis.tabIndex.toString());
             if (axis.majorTickLines.width > 0 && axis.visible) {
-                options = new helper_2.PathOption(chart.element.id + '_MajorTickLine_' + index, 'transparent', axis.majorTickLines.width, axis.majorTickLines.color, null, null, majorTick);
+                options = new helper_2.PathOption(chart.element.id + '_MajorTickLine_' + index, 'transparent', axis.majorTickLines.width, axis.majorTickLines.color || chart.themeStyle.majorTickLine, null, null, majorTick);
                 this.htmlObject = chart.renderer.drawPath(options);
@@ -933,3 +947,3 @@ parent.appendChild(this.htmlObject);
             if (axis.minorTickLines.width > 0 && axis.visible) {
-                options = new helper_2.PathOption(chart.element.id + '_MinorTickLine_' + index, 'transparent', axis.minorTickLines.width, axis.minorTickLines.color, null, null, minorTick);
+                options = new helper_2.PathOption(chart.element.id + '_MinorTickLine_' + index, 'transparent', axis.minorTickLines.width, axis.minorTickLines.color || chart.themeStyle.minorTickLine, null, null, minorTick);
                 this.htmlObject = chart.renderer.drawPath(options);
@@ -943,3 +957,3 @@ parent.appendChild(this.htmlObject);
             if (axis.majorGridLines.width > 0) {
-                options = new helper_2.PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color, null, axis.majorGridLines.dashArray, majorGrid);
+                options = new helper_2.PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, axis.majorGridLines.dashArray, majorGrid);
                 this.htmlObject = chart.renderer.drawPath(options);
@@ -949,3 +963,3 @@ this.element.appendChild(this.htmlObject);
             if (axis.minorGridLines.width > 0) {
-                options = new helper_2.PathOption(chart.element.id + '_MinorGridLine_' + index, 'transparent', axis.minorGridLines.width, axis.minorGridLines.color, null, axis.minorGridLines.dashArray, minorGird);
+                options = new helper_2.PathOption(chart.element.id + '_MinorGridLine_' + index, 'transparent', axis.minorGridLines.width, axis.minorGridLines.color || chart.themeStyle.minorGridLine, null, axis.minorGridLines.dashArray, minorGird);
                 this.htmlObject = chart.renderer.drawPath(options);
@@ -952,0 +966,0 @@ this.element.appendChild(this.htmlObject);

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

@@ -6,3 +6,3 @@ import { Axis } from '../axis/axis';
 /**
- * Category module is used to render category axis.
+ * `Category` module is used to render category axis.
  */
@@ -9,0 +9,0 @@ export declare class Category extends NiceInterval {

src/chart/axis/category-axis.js

@@ -53,3 +53,6 @@ var __extends = (this && this.__extends) || (function () {
             axis.visibleLabels = [];
-            var tempInterval = axis.visibleRange.min - (axis.visibleRange.min % axis.visibleRange.interval);
+            var tempInterval = Math.ceil(axis.visibleRange.min);
+            if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {
+                tempInterval = axis.visibleRange.min - (axis.visibleRange.min % axis.visibleRange.interval);
+            }
             var position;
@@ -56,0 +59,0 @@ axis.startLabel = axis.labels[Math.round(axis.visibleRange.min)];

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

@@ -6,3 +6,3 @@ import { Axis } from '../axis/axis';
 /**
- * DateTime module is used to render DateTime axis.
+ * `DateTime` module is used to render datetime axis.
  */
@@ -9,0 +9,0 @@ export declare class DateTime extends NiceInterval {

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

@@ -6,3 +6,3 @@ import { Axis } from '../axis/axis';
 /**
- * Logarithmic module is used to render log axis.
+ * `Logarithmic` module is used to render log axis.
  */
@@ -9,0 +9,0 @@ export declare class Logarithmic extends Double {

src/chart/axis/multi-level-labels.d.ts

@@ -11,3 +11,3 @@ /**
 /**
- * `MultiLevelLabel` module used to render the multi level label in chart.
+ * `MultiLevelLabel` module is used to render the multi level label in chart.
  */
@@ -34,3 +34,2 @@ export declare class MultiLevelLabel {
      * Finds multilevel label height
-     * @private
      * @return {void}
@@ -37,0 +36,0 @@ */

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

@@ -26,9 +26,10 @@ define(["require", "exports", "../../common/utils/helper", "../../common/utils/helper", "../../common/model/constants"], function (require, exports, helper_1, helper_2, constants_1) {
                         labelSize = helper_2.measureText(categoryLabel.text, multiLevel.textStyle);
-                        height = isVertical ? (categoryLabel.maximumTextWidth ? categoryLabel.maximumTextWidth :
-                            labelSize.width) : labelSize.height;
+                        height = isVertical ? labelSize.width : labelSize.height;
                         height += 2 * multiLevel.border.width +
                             (multiLevel.border.type === 'CurlyBrace' ? padding : 0);
                         gap = (categoryLabel.maximumTextWidth !== null) ? categoryLabel.maximumTextWidth :
-                            (helper_2.valueToCoefficient(categoryLabel.end, axis) * axisValue) -
-                                (helper_2.valueToCoefficient(categoryLabel.start, axis) * axisValue);
+                            (helper_2.valueToCoefficient(typeof categoryLabel.end === 'string' ? Number(new Date(categoryLabel.end)) :
+                                categoryLabel.end, axis) * axisValue) -
+                                (helper_2.valueToCoefficient(typeof categoryLabel.start === 'string' ? Number(new Date(categoryLabel.start)) :
+                                    categoryLabel.start, axis) * axisValue);
                         if ((labelSize.width > gap - padding) && gap > 0 && (multiLevel.overflow === 'Wrap') && !isVertical) {
@@ -42,3 +43,3 @@ height = (height * (helper_1.textWrap(categoryLabel.text, gap - padding, multiLevel.textStyle).length));
                 prevHeight[index] = value;
-                value += multiLevelLabelsHeight[index] + padding;
+                value += multiLevelLabelsHeight[index] ? (multiLevelLabelsHeight[index] + padding) : 0;
             });
@@ -66,3 +67,5 @@ axis.multiLevelLabelHeight = value + ((axis.title !== '' || (this.chart.legendModule && this.chart.legendSettings.visible))
             var endY;
-            var path = '';
+            var pathRect = '';
+            var start;
+            var end;
             var labelSize;
@@ -81,10 +84,13 @@ var clipY;
             axis.multiLevelLabels.map(function (multiLevel, level) {
+                pathRect = '';
                 multiLevel.categories.map(function (categoryLabel, i) {
                     labelElement = _this.chart.renderer.createGroup({ id: _this.chart.element.id + index + '_MultiLevelLabel' + level });
-                    if (((categoryLabel.start >= axis.visibleRange.min && categoryLabel.start <= axis.visibleRange.max)
-                        || (categoryLabel.end >= axis.visibleRange.min && categoryLabel.end <= axis.visibleRange.max))) {
+                    start = typeof categoryLabel.start === 'string' ? Number(new Date(categoryLabel.start)) : categoryLabel.start;
+                    end = typeof categoryLabel.end === 'string' ? Number(new Date(categoryLabel.end)) : categoryLabel.end;
+                    if (((start >= axis.visibleRange.min && start <= axis.visibleRange.max)
+                        || (end >= axis.visibleRange.min && end <= axis.visibleRange.max))) {
                         argsData = _this.triggerMultiLabelRender(axis, categoryLabel.text, axis.multiLevelLabels[level].textStyle, axis.multiLevelLabels[level].alignment);
                         if (!argsData.cancel) {
-                            startX = helper_2.valueToCoefficient(categoryLabel.start, axis) * axisRect.width;
-                            endX = helper_2.valueToCoefficient(categoryLabel.end, axis) * axisRect.width;
+                            startX = helper_2.valueToCoefficient(start, axis) * axisRect.width;
+                            endX = helper_2.valueToCoefficient(end, axis) * axisRect.width;
                             endX = isInversed ? [startX, startX = endX][0] : endX;
@@ -98,7 +104,7 @@ labelSize = helper_2.measureText(argsData.text, argsData.textStyle);
                             if (argsData.alignment === 'Center') {
-                                x += gap / 2;
+                                x += (endX - startX - padding) / 2;
                                 anchor = 'middle';
                             }
                             else if (argsData.alignment === 'Far') {
-                                x = x + gap - multiLevel.border.width / 2;
+                                x = x + (endX - startX - padding) - multiLevel.border.width / 2;
                                 anchor = 'end';
@@ -118,5 +124,5 @@ }
                             }
-                            helper_2.textElement(options, argsData.textStyle, argsData.textStyle.color, labelElement);
+                            helper_2.textElement(options, argsData.textStyle, argsData.textStyle.color || _this.chart.themeStyle.axisLabel, labelElement);
                             if (multiLevel.border.width > 0 && multiLevel.border.type !== 'WithoutBorder') {
-                                path = _this.renderXAxisLabelBorder(level, gap, axis, startX, startY, labelSize, options, axisRect, argsData.alignment, path, isOutside, opposedPosition);
+                                pathRect = _this.renderXAxisLabelBorder(level, endX - startX - padding, axis, startX, startY, labelSize, options, axisRect, argsData.alignment, pathRect, isOutside, opposedPosition);
                             }
@@ -127,4 +133,4 @@ _this.multiElements.appendChild(labelElement);
                 });
-                if (path !== '') {
-                    _this.createBorderElement(level, index, axis, path);
+                if (pathRect !== '') {
+                    _this.createBorderElement(level, index, axis, pathRect);
                 }
@@ -224,2 +230,4 @@ });
             var isInversed = axis.isInversed;
+            var start;
+            var end;
             var gap;
@@ -232,42 +240,49 @@ var anchor = 'middle';
             axis.multiLevelLabels.map(function (multiLevel, level) {
+                path = '';
                 multiLevel.categories.map(function (categoryLabel, i) {
                     labelElement = _this.chart.renderer.createGroup({ id: _this.chart.element.id + index + '_MultiLevelLabel' + level });
-                    startY = helper_2.valueToCoefficient((categoryLabel.start), axis) * (rect.height);
-                    endY = helper_2.valueToCoefficient((categoryLabel.end), axis) * (rect.height);
-                    endY = isInversed ? [startY, startY = endY][0] : endY;
-                    argsData = _this.triggerMultiLabelRender(axis, categoryLabel.text, multiLevel.textStyle, multiLevel.alignment);
-                    if (!argsData.cancel) {
-                        labelSize = helper_2.measureText(argsData.text, argsData.textStyle);
-                        gap = endY - startY;
-                        x = rect.x - startX - _this.yAxisPrevHeight[level] -
-                            (_this.yAxisMultiLabelHeight[level] / 2) - padding / 2;
-                        y = rect.height + rect.y - startY - (gap / 2);
-                        if (opposedPosition) {
-                            x = isOutside ? rect.x + startX + padding / 2 + (_this.yAxisMultiLabelHeight[level] / 2) +
-                                _this.yAxisPrevHeight[level] : rect.x - startX - (_this.yAxisMultiLabelHeight[level] / 2) -
-                                _this.yAxisPrevHeight[level] - padding / 2;
+                    end = typeof categoryLabel.end === 'string' ? Number(new Date(categoryLabel.end)) : categoryLabel.end;
+                    start = typeof categoryLabel.start === 'string' ? Number(new Date(categoryLabel.start)) : categoryLabel.start;
+                    if (((start >= axis.visibleRange.min && start <= axis.visibleRange.max)
+                        || (end >= axis.visibleRange.min && end <= axis.visibleRange.max))) {
+                        startY = helper_2.valueToCoefficient((start), axis) * (rect.height);
+                        endY = helper_2.valueToCoefficient((end), axis) * (rect.height);
+                        endY = isInversed ? [startY, startY = endY][0] : endY;
+                        argsData = _this.triggerMultiLabelRender(axis, categoryLabel.text, multiLevel.textStyle, multiLevel.alignment);
+                        if (!argsData.cancel) {
+                            labelSize = helper_2.measureText(argsData.text, argsData.textStyle);
+                            gap = endY - startY;
+                            x = rect.x - startX - _this.yAxisPrevHeight[level] -
+                                (_this.yAxisMultiLabelHeight[level] / 2) - padding / 2;
+                            y = rect.height + rect.y - startY - (gap / 2);
+                            if (opposedPosition) {
+                                x = isOutside ? rect.x + startX + padding / 2 + (_this.yAxisMultiLabelHeight[level] / 2) +
+                                    _this.yAxisPrevHeight[level] : 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) +
+                                    _this.yAxisPrevHeight[level];
+                            }
+                            if (argsData.alignment === 'Center') {
+                                y += labelSize.height / 4;
+                            }
+                            else if (argsData.alignment === 'Far') {
+                                y += gap / 2 - labelSize.height / 2;
+                            }
+                            else {
+                                y = y - gap / 2 + labelSize.height;
+                            }
+                            x = multiLevel.border.type === 'CurlyBrace' ? (((!opposedPosition && isOutside) ||
+                                (opposedPosition && !isOutside)) ? x - padding : x + padding) : x;
+                            var options = new helper_1.TextOption(_this.chart.element.id + index + '_Axis_MultiLevelLabel_Level_' + level + '_Text_' + i, x, y, anchor, argsData.text);
+                            options.text = (multiLevel.overflow === 'Trim') ?
+                                helper_2.textTrim((categoryLabel.maximumTextWidth === null ? _this.yAxisMultiLabelHeight[level] :
+                                    categoryLabel.maximumTextWidth), argsData.text, argsData.textStyle) : options.text;
+                            helper_2.textElement(options, argsData.textStyle, argsData.textStyle.color || _this.chart.themeStyle.axisLabel, labelElement);
+                            if (multiLevel.border.width > 0 && multiLevel.border.type !== 'WithoutBorder') {
+                                path = _this.renderYAxisLabelBorder(level, gap, axis, endY, startX, startY, labelSize, options, rect, argsData.alignment, path, isOutside, opposedPosition);
+                            }
+                            _this.multiElements.appendChild(labelElement);
                         }
-                        else {
-                            x = isOutside ? x : rect.x + startX + padding / 2 + (_this.yAxisMultiLabelHeight[level] / 2) +
-                                _this.yAxisPrevHeight[level];
-                        }
-                        if (argsData.alignment === 'Center') {
-                            y += labelSize.height / 4;
-                        }
-                        else if (argsData.alignment === 'Far') {
-                            y += gap / 2 - labelSize.height / 2;
-                        }
-                        else {
-                            y = y - gap / 2 + labelSize.height;
-                        }
-                        x = multiLevel.border.type === 'CurlyBrace' ? (((!opposedPosition && isOutside) ||
-                            (opposedPosition && !isOutside)) ? x - padding : x + padding) : x;
-                        var options = new helper_1.TextOption(_this.chart.element.id + index + '_Axis_MultiLevelLabel_Level_' + level + '_Text_' + i, x, y, anchor, argsData.text);
-                        options.text = (multiLevel.overflow === 'Trim') ?
-                            helper_2.textTrim((categoryLabel.maximumTextWidth === null ? _this.yAxisMultiLabelHeight[level] : categoryLabel.maximumTextWidth), argsData.text, argsData.textStyle) : options.text;
-                        helper_2.textElement(options, argsData.textStyle, argsData.textStyle.color, labelElement);
-                        if (multiLevel.border.width > 0 && multiLevel.border.type !== 'WithoutBorder') {
-                            path = _this.renderYAxisLabelBorder(level, gap, axis, endY, startX, startY, labelSize, options, rect, argsData.alignment, path, isOutside, opposedPosition);
-                        }
-                        _this.multiElements.appendChild(labelElement);
                     }
@@ -360,3 +375,3 @@ });
         MultiLevelLabel.prototype.createBorderElement = function (borderIndex, axisIndex, axis, path) {
-            var borderElement = this.chart.renderer.drawPath(new helper_1.PathOption(this.chart.element.id + axisIndex + '_Axis_MultiLevelLabel_Rect_' + borderIndex, 'Transparent', axis.multiLevelLabels[borderIndex].border.width, axis.multiLevelLabels[borderIndex].border.color, 1, '', path));
+            var borderElement = this.chart.renderer.drawPath(new helper_1.PathOption(this.chart.element.id + axisIndex + '_Axis_MultiLevelLabel_Rect_' + borderIndex, 'Transparent', axis.multiLevelLabels[borderIndex].border.width, axis.multiLevelLabels[borderIndex].border.color || this.chart.themeStyle.axisLine, 1, '', path));
             borderElement.setAttribute('style', 'pointer-events: none');
@@ -363,0 +378,0 @@ this.multiElements.appendChild(borderElement);

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

@@ -133,3 +133,3 @@ var __extends = (this && this.__extends) || (function () {
                 'stroke-width': axis.lineStyle.width,
-                'stroke': axis.lineStyle.color
+                'stroke': axis.lineStyle.color || chart.themeStyle.axisLine
             };
@@ -160,3 +160,3 @@ chart.yAxisElements.appendChild(chart.renderer.drawPath(optionsLine));
                 options = new helper_1.TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY + (elementSize.height / 4), anchor, axis.visibleLabels[i].text);
-                helper_3.textElement(options, axis.labelStyle, axis.labelStyle.color, labelElement);
+                helper_3.textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement);
             }
@@ -179,2 +179,6 @@ chart.yAxisElements.appendChild(labelElement);
             var y2;
+            var border = {
+                color: axis.majorGridLines.color || chart.themeStyle.majorGridLine,
+                width: axis.majorGridLines.width
+            };
             if (axis.majorGridLines.width > 0) {
@@ -184,3 +188,3 @@ if (chart.visibleSeries[0].type === 'Polar') {
                         radius = chart.radius * helper_1.valueToCoefficient(axis.visibleLabels[j].value, axis);
-                        options = new helper_2.CircleOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines, axis.majorGridLines.width, this.centerX, this.centerY, radius);
+                        options = new helper_2.CircleOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', border, axis.majorGridLines.width, this.centerX, this.centerY, radius);
                         this.element.appendChild(chart.renderer.drawCircle(options));
@@ -207,3 +211,3 @@ }
                     }
-                    options = new helper_2.PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color, null, null, majorGrid);
+                    options = new helper_2.PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, null, majorGrid);
                     this.element.appendChild(chart.renderer.drawPath(options));
@@ -326,3 +330,3 @@ }
                 options = new helper_1.TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY, textAnchor, labelText, '', 'central');
-                helper_3.textElement(options, axis.labelStyle, axis.labelStyle.color, labelElement);
+                helper_3.textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement);
             }
@@ -335,7 +339,7 @@ this.element.appendChild(labelElement);
             if (axis.majorTickLines.width > 0) {
-                tickOptions = new helper_2.PathOption(chart.element.id + '_MajorTickLine_' + index, 'transparent', axis.majorTickLines.width, axis.majorTickLines.color, null, null, majorTickLine);
+                tickOptions = new helper_2.PathOption(chart.element.id + '_MajorTickLine_' + index, 'transparent', axis.majorTickLines.width, axis.majorTickLines.color || chart.themeStyle.majorTickLine, null, null, majorTickLine);
                 chart.yAxisElements.appendChild(chart.renderer.drawPath(tickOptions));
             }
             if (axis.minorTickLines.width > 0) {
-                tickOptions = new helper_2.PathOption(chart.element.id + '_MinorTickLine_' + index, 'transparent', axis.minorTickLines.width, axis.minorTickLines.color, null, null, minorTickLine);
+                tickOptions = new helper_2.PathOption(chart.element.id + '_MinorTickLine_' + index, 'transparent', axis.minorTickLines.width, axis.minorTickLines.color || chart.themeStyle.minorTickLine, null, null, minorTickLine);
                 chart.yAxisElements.appendChild(chart.renderer.drawPath(tickOptions));
@@ -348,7 +352,7 @@ }
             if (axis.majorGridLines.width > 0) {
-                gridOptions = new helper_2.PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color, null, axis.majorGridLines.dashArray, majorGrid);
+                gridOptions = new helper_2.PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, axis.majorGridLines.dashArray, majorGrid);
                 this.element.appendChild(chart.renderer.drawPath(gridOptions));
             }
             if (axis.minorGridLines.width > 0) {
-                gridOptions = new helper_2.PathOption(chart.element.id + '_MinorGridLine_' + index, 'transparent', axis.minorGridLines.width, axis.minorGridLines.color, null, axis.minorGridLines.dashArray, minorGird);
+                gridOptions = new helper_2.PathOption(chart.element.id + '_MinorGridLine_' + index, 'transparent', axis.minorGridLines.width, axis.minorGridLines.color || chart.themeStyle.minorGridLine, null, axis.minorGridLines.dashArray, minorGird);
                 this.element.appendChild(chart.renderer.drawPath(gridOptions));
@@ -355,0 +359,0 @@ }

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * `StripLine` module used to render the stripLine in chart.
+ * `StripLine` module is used to render the stripLine in chart.
  */
@@ -8,0 +8,0 @@ export declare class StripLine {

src/chart/chart-model.d.ts

@@ -1,75 +0,5 @@
-import { Component, Property, NotifyPropertyChanges, Internationalization, ModuleDeclaration, L10n } from '@syncfusion/ej2-base';import { TapEventArgs, EmitType, ChildProperty } from '@syncfusion/ej2-base';import { remove } from '@syncfusion/ej2-base';import { extend } from '@syncfusion/ej2-base';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 } from '../common/utils/helper';import { MarginModel, BorderModel, ChartAreaModel, FontModel } from '../common/model/base-model';import { getSeriesColor, Theme } from '../common/model/theme';import { IndexesModel } from '../common/model/base-model';import { Margin, Border, ChartArea, Font, Indexes } 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 { 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 } from '../common/model/interface';import { IPointRenderEventArgs, ISeriesRenderEventArgs, IDragCompleteEventArgs, ITooltipRenderEventArgs } from '../common/model/interface';import { IZoomCompleteEventArgs, ILoadedEventArgs, IAnimationCompleteEventArgs, IMouseEventArgs } from '../common/model/interface';import { loaded, chartMouseClick, chartMouseLeave, 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 { 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 {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
- * Interface for a class TooltipSettings
- */
-export interface TooltipSettingsModel {
-
-    /**
-     * Enables / Disables the visibility of the tooltip.
-     * @default false.
-     */
-
-    enable?: boolean;
-
-    /**
-     * If set to true, a single ToolTip will be displayed for every index.
-     * @default false.
-     */
-
-    shared?: boolean;
-
-    /**
-     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string. 
-     */
-
-    fill?: string;
-
-    /**
-     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string. 
-     */
-
-    header?: string;
-
-    /**
-     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string. 
-     */
-
-    opacity?: number;
-
-    /**
-     * Options to customize the ToolTip text.
-     */
-
-    textStyle?: FontModel;
-
-    /**
-     * Format the ToolTip content.
-     * @default null.
-     */
-
-    format?: string;
-
-    /**
-     * Custom template to format the ToolTip content. Use ${x} and ${y} as the placeholder text to display the corresponding data point.
-     * @default null.
-     */
-
-    template?: string;
-
-    /**
-     * If set to true, ToolTip will animate while moving from one point to another.
-     * @default true.
-     */
-    enableAnimation?: boolean;
-
-    /**
-     * Options to customize tooltip borders.
-     */
-    border?: BorderModel;
-
-}
-
-/**
  * Interface for a class CrosshairSettings
@@ -81,3 +11,3 @@ */
      * If set to true, crosshair line becomes visible.
-     * @default false.
+     * @default false
      */
@@ -93,7 +23,7 @@ enable?: boolean;
      * Specifies the line type. Horizontal mode enables the horizontal line and Vertical mode enables the vertical line. They are,
-     * * none: Hides both vertical and horizontal crosshair lines.
-     * * both: Shows both vertical and horizontal crosshair lines.
-     * * vertical: Shows the vertical line.
-     * * horizontal: Shows the horizontal line.
-     * @default Both.
+     * * None: Hides both vertical and horizontal crosshair lines.
+     * * Both: Shows both vertical and horizontal crosshair lines.
+     * * Vertical: Shows the vertical line.
+     * * Horizontal: Shows the horizontal line.
+     * @default Both
      */
@@ -111,3 +41,3 @@ lineType?: LineType;
      * If set to true, chart can be zoomed by a rectangular selecting region on the plot area.
-     * @default false.
+     * @default false
      */
@@ -118,4 +48,4 @@
     /**
-     * If  to true, chart can be pinched to zoom in / zoom out.
-     * @default false.
+     * If to true, chart can be pinched to zoom in / zoom out.
+     * @default false
      */
@@ -127,3 +57,3 @@
      * If set to true, chart can be zoomed by using mouse wheel.
-     * @default false.
+     * @default false
      */
@@ -149,3 +79,3 @@
      * ```
-     * @default true.
+     * @default true
      */
@@ -156,3 +86,3 @@
     /**
-     * Specifies whether to allow zooming vertically or horizontally or in both ways.They are,
+     * Specifies whether to allow zooming vertically or horizontally or in both ways. They are,
      * * x,y: Chart can be zoomed both vertically and horizontally.
@@ -176,3 +106,3 @@ * * x: Chart can be zoomed horizontally.
      * ```
-     * @default 'XY'.
+     * @default 'XY'
      */
@@ -183,7 +113,8 @@ mode?: ZoomMode;
      * Specifies the toolkit options for the zooming as follows:
-     * * zoom
-     * * zoomIn
-     * * zoomOut
-     * * pan
-     * * reset
+     * * Zoom
+     * * ZoomIn
+     * * ZoomOut
+     * * Pan
+     * * Reset
+     * @default '["Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset"]' 
      */
@@ -193,2 +124,9 @@
 
+    /**
+     * Specifies whether chart needs to be panned by default.
+     * @default false.
+     */
+
+    enablePan?: boolean;
+
 }
@@ -204,3 +142,3 @@
      * If specified as '100%, chart renders to the full width of its parent element.
-     * @default null.
+     * @default null
      */
@@ -213,3 +151,3 @@
      * If specified as '100%, chart renders to the full height of its parent element.
-     * @default null.
+     * @default null
      */
@@ -221,3 +159,3 @@
      * Title of the chart
-     * @default ''.
+     * @default ''
      */
@@ -247,3 +185,3 @@
      * The background color of the chart that accepts value in hex and rgba as a valid CSS color string.
-     * @default 'transparent'.
+     * @default null
      */
@@ -259,3 +197,3 @@ background?: string;
     /**
-     * Options to configure horizontal axis.
+     * Options to configure the horizontal axis.
      */
@@ -266,3 +204,3 @@
     /**
-     * Options to configure vertical axis.
+     * Options to configure the vertical axis.
      */
@@ -306,3 +244,3 @@
      * Palette for the chart series.
-     * @default [].
+     * @default []
      */
@@ -313,2 +251,3 @@ palettes?: string[];
      * Specifies the theme for the chart.
+     * @default 'Material'
      */
@@ -347,3 +286,3 @@ theme?: ChartTheme;
      * * dragY: selects points by dragging with respect to vertical axis.
-     * @default None.
+     * @default None
      */
@@ -354,3 +293,3 @@ selectionMode?: SelectionMode;
      * If set true, enables the multi selection in chart. It requires `selectionMode` to be `Point` | `Series` | or `Cluster`.
-     * @default false.
+     * @default false
      */
@@ -375,3 +314,3 @@ isMultiSelect?: boolean;
      * ```
-     * @default [].
+     * @default []
      */
@@ -382,3 +321,3 @@ selectedDataIndexes?: IndexesModel[];
      * Specifies whether a grouping separator should be used for a number.
-     * @default false.
+     * @default false
      */
@@ -406,3 +345,3 @@ useGroupingSeparator?: boolean;
      * TabIndex value for the chart.
-     * @default 1.
+     * @default 1
      */
@@ -413,2 +352,3 @@ tabIndex?: number;
      * To enable the side by side placing the points for column type series.
+     * @default true
      */
@@ -516,2 +456,16 @@ enableSideBySidePlacement?: boolean;
     /**
+     * Triggers on point click.
+     * @event
+     */
+
+    pointClick?: EmitType<IPointEventArgs>;
+
+    /**
+     * Triggers on point move.
+     * @event
+     */
+
+    pointMove?: EmitType<IPointEventArgs>;
+
+    /**
      * Triggers when cursor leaves the chart.
@@ -518,0 +472,0 @@ * @event

src/chart/chart.d.ts

@@ -1,6 +0,8 @@
-import { Component, Internationalization, ModuleDeclaration, L10n } from '@syncfusion/ej2-base';
+import { Component, Internationalization } from '@syncfusion/ej2-base';
+import { ModuleDeclaration, L10n } from '@syncfusion/ej2-base';
 import { TapEventArgs, EmitType, ChildProperty } from '@syncfusion/ej2-base';
+import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
 import { INotifyPropertyChanged, SvgRenderer } from '@syncfusion/ej2-base';
-import { ChartModel, CrosshairSettingsModel, TooltipSettingsModel, ZoomSettingsModel } from './chart-model';
-import { MarginModel, BorderModel, ChartAreaModel, FontModel } from '../common/model/base-model';
+import { ChartModel, CrosshairSettingsModel, ZoomSettingsModel } from './chart-model';
+import { MarginModel, BorderModel, ChartAreaModel, FontModel, TooltipSettingsModel } from '../common/model/base-model';
 import { IndexesModel } from '../common/model/base-model';
@@ -65,5 +67,6 @@ import { AxisModel, RowModel, ColumnModel } from './axis/axis-model';
 import { ILegendRenderEventArgs, IAxisLabelRenderEventArgs, ITextRenderEventArgs } from '../common/model/interface';
-import { IAnnotationRenderEventArgs, IAxisMultiLabelRenderEventArgs } from '../common/model/interface';
+import { IAnnotationRenderEventArgs, IAxisMultiLabelRenderEventArgs, IThemeStyle } from '../common/model/interface';
 import { IPointRenderEventArgs, ISeriesRenderEventArgs, IDragCompleteEventArgs, ITooltipRenderEventArgs } from '../common/model/interface';
-import { IZoomCompleteEventArgs, ILoadedEventArgs, IAnimationCompleteEventArgs, IMouseEventArgs } from '../common/model/interface';
+import { IZoomCompleteEventArgs, ILoadedEventArgs } from '../common/model/interface';
+import { IAnimationCompleteEventArgs, IMouseEventArgs, IPointEventArgs } from '../common/model/interface';
 import { IPrintEventArgs, IAxisRangeCalculatedEventArgs } from '../common/model/interface';
@@ -76,52 +79,2 @@ import { ChartAnnotationSettingsModel } from './model/chart-base-model';
 /**
- * Configures the ToolTips in the chart.
- */
-export declare class TooltipSettings extends ChildProperty<TooltipSettings> {
-    /**
-     * Enables / Disables the visibility of the tooltip.
-     * @default false.
-     */
-    enable: boolean;
-    /**
-     * If set to true, a single ToolTip will be displayed for every index.
-     * @default false.
-     */
-    shared: boolean;
-    /**
-     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.
-     */
-    fill: string;
-    /**
-     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.
-     */
-    header: string;
-    /**
-     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.
-     */
-    opacity: number;
-    /**
-     * Options to customize the ToolTip text.
-     */
-    textStyle: FontModel;
-    /**
-     * Format the ToolTip content.
-     * @default null.
-     */
-    format: string;
-    /**
-     * Custom template to format the ToolTip content. Use ${x} and ${y} as the placeholder text to display the corresponding data point.
-     * @default null.
-     */
-    template: string;
-    /**
-     * If set to true, ToolTip will animate while moving from one point to another.
-     * @default true.
-     */
-    enableAnimation: boolean;
-    /**
-     * Options to customize tooltip borders.
-     */
-    border: BorderModel;
-}
-/**
  * Configures the crosshair in the chart.
@@ -132,3 +85,3 @@ */
      * If set to true, crosshair line becomes visible.
-     * @default false.
+     * @default false
      */
@@ -142,7 +95,7 @@ enable: boolean;
      * Specifies the line type. Horizontal mode enables the horizontal line and Vertical mode enables the vertical line. They are,
-     * * none: Hides both vertical and horizontal crosshair lines.
-     * * both: Shows both vertical and horizontal crosshair lines.
-     * * vertical: Shows the vertical line.
-     * * horizontal: Shows the horizontal line.
-     * @default Both.
+     * * None: Hides both vertical and horizontal crosshair lines.
+     * * Both: Shows both vertical and horizontal crosshair lines.
+     * * Vertical: Shows the vertical line.
+     * * Horizontal: Shows the horizontal line.
+     * @default Both
      */
@@ -157,8 +110,8 @@ lineType: LineType;
      * If set to true, chart can be zoomed by a rectangular selecting region on the plot area.
-     * @default false.
+     * @default false
      */
     enableSelectionZooming: boolean;
     /**
-     * If  to true, chart can be pinched to zoom in / zoom out.
-     * @default false.
+     * If to true, chart can be pinched to zoom in / zoom out.
+     * @default false
      */
@@ -168,3 +121,3 @@ enablePinchZooming: boolean;
      * If set to true, chart can be zoomed by using mouse wheel.
-     * @default false.
+     * @default false
      */
@@ -188,7 +141,7 @@ enableMouseWheelZooming: boolean;
      * ```
-     * @default true.
+     * @default true
      */
     enableDeferredZooming: boolean;
     /**
-     * Specifies whether to allow zooming vertically or horizontally or in both ways.They are,
+     * Specifies whether to allow zooming vertically or horizontally or in both ways. They are,
      * * x,y: Chart can be zoomed both vertically and horizontally.
@@ -212,3 +165,3 @@ * * x: Chart can be zoomed horizontally.
      * ```
-     * @default 'XY'.
+     * @default 'XY'
      */
@@ -218,9 +171,15 @@ mode: ZoomMode;
      * Specifies the toolkit options for the zooming as follows:
-     * * zoom
-     * * zoomIn
-     * * zoomOut
-     * * pan
-     * * reset
+     * * Zoom
+     * * ZoomIn
+     * * ZoomOut
+     * * Pan
+     * * Reset
+     * @default '["Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset"]'
      */
     toolbarItems: ToolbarItems[];
+    /**
+     * Specifies whether chart needs to be panned by default.
+     * @default false.
+     */
+    enablePan: boolean;
 }
@@ -437,3 +396,3 @@ /**
      * If specified as '100%, chart renders to the full width of its parent element.
-     * @default null.
+     * @default null
      */
@@ -444,3 +403,3 @@ width: string;
      * If specified as '100%, chart renders to the full height of its parent element.
-     * @default null.
+     * @default null
      */
@@ -450,3 +409,3 @@ height: string;
      * Title of the chart
-     * @default ''.
+     * @default ''
      */
@@ -468,3 +427,3 @@ title: string;
      * The background color of the chart that accepts value in hex and rgba as a valid CSS color string.
-     * @default 'transparent'.
+     * @default null
      */
@@ -477,7 +436,7 @@ background: string;
     /**
-     * Options to configure horizontal axis.
+     * Options to configure the horizontal axis.
      */
     primaryXAxis: AxisModel;
     /**
-     * Options to configure vertical axis.
+     * Options to configure the vertical axis.
      */
@@ -509,3 +468,3 @@ primaryYAxis: AxisModel;
      * Palette for the chart series.
-     * @default [].
+     * @default []
      */
@@ -515,2 +474,3 @@ palettes: string[];
      * Specifies the theme for the chart.
+     * @default 'Material'
      */
@@ -543,3 +503,3 @@ theme: ChartTheme;
      * * dragY: selects points by dragging with respect to vertical axis.
-     * @default None.
+     * @default None
      */
@@ -549,3 +509,3 @@ selectionMode: SelectionMode;
      * If set true, enables the multi selection in chart. It requires `selectionMode` to be `Point` | `Series` | or `Cluster`.
-     * @default false.
+     * @default false
      */
@@ -569,3 +529,3 @@ isMultiSelect: boolean;
      * ```
-     * @default [].
+     * @default []
      */
@@ -575,3 +535,3 @@ selectedDataIndexes: IndexesModel[];
      * Specifies whether a grouping separator should be used for a number.
-     * @default false.
+     * @default false
      */
@@ -595,3 +555,3 @@ useGroupingSeparator: boolean;
      * TabIndex value for the chart.
-     * @default 1.
+     * @default 1
      */
@@ -601,2 +561,3 @@ tabIndex: number;
      * To enable the side by side placing the points for column type series.
+     * @default true
      */
@@ -680,2 +641,12 @@ enableSideBySidePlacement: boolean;
     /**
+     * Triggers on point click.
+     * @event
+     */
+    pointClick: EmitType<IPointEventArgs>;
+    /**
+     * Triggers on point move.
+     * @event
+     */
+    pointMove: EmitType<IPointEventArgs>;
+    /**
      * Triggers when cursor leaves the chart.
@@ -816,2 +787,4 @@ * @event
     private titleCollection;
+    /** @private */
+    themeStyle: IThemeStyle;
     /**
@@ -877,3 +850,3 @@ * Constructor for creating the widget
      */
-    export(type: ExportType, fileName: string): void;
+    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation): void;
     /**
@@ -978,2 +951,3 @@ * Defines the trendline initialization
     chartOnMouseClick(e: PointerEvent | TouchEvent): boolean;
+    private triggerPointEvent(event);
     /**
@@ -1011,2 +985,6 @@ * Handles the mouse move on chart.
     /**
+     * Method to set the annotation content dynamically for chart.
+     */
+    setAnnotationValue(annotationIndex: number, content: string): void;
+    /**
      * Method to set locale constants
@@ -1016,3 +994,3 @@ */
     /**
-     * Themeing for chart goes here
+     * Theming for chart
      */
@@ -1019,0 +997,0 @@ private setTheme();

src/chart/legend/legend.d.ts

@@ -7,3 +7,3 @@ import { Series } from '../series/chart-series';
 /**
- * `Legend` module used to render legend for the chart.
+ * `Legend` module is used to render legend for the chart.
  */
@@ -33,3 +33,3 @@ export declare class Legend extends BaseLegend {
      */
-    getLegendOptions(visibleSeriesCollection: Series[]): void;
+    getLegendOptions(visibleSeriesCollection: Series[], chart: Chart): void;
     /** @private */
@@ -45,3 +45,2 @@ getLegendBounds(availableSize: Size, legendBounds: Rect, legend: LegendSettingsModel): void;
      * @return {void}
-     * @private
      */
@@ -48,0 +47,0 @@ click(event: Event): void;

src/chart/legend/legend.js

@@ -48,3 +48,3 @@ var __extends = (this && this.__extends) || (function () {
         };
-        Legend.prototype.getLegendOptions = function (visibleSeriesCollection) {
+        Legend.prototype.getLegendOptions = function (visibleSeriesCollection, chart) {
             this.legendCollections = [];
@@ -55,3 +55,3 @@ var seriesType;
                 if (series.category !== 'Indicator') {
-                    seriesType = (visibleSeriesCollection[0].chart.chartAreaType === 'PolarRadar') ? series.drawType :
+                    seriesType = (chart.chartAreaType === 'PolarRadar') ? series.drawType :
                         series.type;
@@ -58,0 +58,0 @@ this.legendCollections.push(new legend_1.LegendOptions(series.name, series.interior, series.legendShape, series.visible, seriesType, series.marker.shape, series.marker.visible));

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

@@ -97,2 +97,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';
      * The color of the border that accepts value in hex and rgba as a valid CSS color string.
+     * @default ''
      */
@@ -103,2 +104,3 @@ color?: string;
      * The width of the border in pixels.
+     * @default 1
      */
@@ -115,2 +117,3 @@ width?: number;
      * * CurlyBrace
+     * @default 'Rectangle'
      */
@@ -128,15 +131,15 @@ type?: BorderType;
      * Start value of the multi level labels
-     * @default null.
+     * @default null
      */
-    start?: number | Date;
+    start?: number | Date | string;
 
     /**
      * End value of the multi level labels
-     * @default null.
+     * @default null
      */
-    end?: number | Date;
+    end?: number | Date | string;
 
     /**
      * multi level labels text.
-     * @default ''.
+     * @default ''
      */
@@ -147,3 +150,3 @@ text?: string;
      * Maximum width of the text for multi level labels.
-     * @default null.
+     * @default null
      */
@@ -161,3 +164,3 @@ maximumTextWidth?: number;
      * If set true, strip line for axis renders.
-     * @default true.
+     * @default true
      */
@@ -168,3 +171,3 @@ visible?: boolean;
      *  If set true, strip line get render from axis origin.
-     *  @default false.
+     *  @default false
      */
@@ -175,15 +178,15 @@ startFromAxis?: boolean;
      * Start value of the strip line.
-     * @default null.
+     * @default null
      */
-    start?: number | Date;
+    start?: number | Date | string;
 
     /**
      * End value of the strip line.
-     * @default null.
+     * @default null
      */
-    end?: number | Date;
+    end?: number | Date | string;
 
     /**
      * Size of the strip line, when it starts from the origin.
-     * @default null.
+     * @default null
      */
@@ -194,3 +197,3 @@ size?: number;
      * Color of the strip line.
-     * @default '#808080'.
+     * @default '#808080'
      */
@@ -206,3 +209,3 @@ color?: string;
      * Strip line text.
-     * @default ''.
+     * @default ''
      */
@@ -213,3 +216,3 @@ text?: string;
      * The angle to which the strip line text gets rotated.
-     * @default null.
+     * @default null
      */
@@ -223,3 +226,3 @@ rotation?: number;
      * * End: Places the strip line text at the end.
-     * @default 'Middle'.
+     * @default 'Middle'
      */
@@ -233,3 +236,3 @@ horizontalAlignment?: Anchor;
      * * End: Places the strip line text at the end.
-     * @default 'Middle'.
+     * @default 'Middle'
      */
@@ -247,2 +250,3 @@ verticalAlignment?: Anchor;
      * * Over: Places the strip line over the series elements.
+     * @default 'Behind'
      */
@@ -253,2 +257,3 @@ zIndex?: ZIndex;
      * Strip line Opacity
+     * @default 1
      */
@@ -269,3 +274,3 @@ opacity?: number;
      * * Far: Places the multi level labels at Far.
-     * @default 'Center'.
+     * @default 'Center'
      */
@@ -279,3 +284,3 @@ alignment?: Alignment;
      * * none: None textOverflow for multi level labels.
-     * @default 'Wrap'.
+     * @default 'Wrap'
      */
@@ -282,0 +287,0 @@ overflow?: TextOverflow;

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

@@ -81,2 +81,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * The color of the border that accepts value in hex and rgba as a valid CSS color string.
+     * @default ''
      */
@@ -86,2 +87,3 @@ color: string;
      * The width of the border in pixels.
+     * @default 1
      */
@@ -97,2 +99,3 @@ width: number;
      * * CurlyBrace
+     * @default 'Rectangle'
      */
@@ -107,13 +110,13 @@ type: BorderType;
      * Start value of the multi level labels
-     * @default null.
+     * @default null
      */
-    start: number | Date;
+    start: number | Date | string;
     /**
      * End value of the multi level labels
-     * @default null.
+     * @default null
      */
-    end: number | Date;
+    end: number | Date | string;
     /**
      * multi level labels text.
-     * @default ''.
+     * @default ''
      */
@@ -123,3 +126,3 @@ text: string;
      * Maximum width of the text for multi level labels.
-     * @default null.
+     * @default null
      */
@@ -134,3 +137,3 @@ maximumTextWidth: number;
      * If set true, strip line for axis renders.
-     * @default true.
+     * @default true
      */
@@ -140,3 +143,3 @@ visible: boolean;
      *  If set true, strip line get render from axis origin.
-     *  @default false.
+     *  @default false
      */
@@ -146,13 +149,13 @@ startFromAxis: boolean;
      * Start value of the strip line.
-     * @default null.
+     * @default null
      */
-    start: number | Date;
+    start: number | Date | string;
     /**
      * End value of the strip line.
-     * @default null.
+     * @default null
      */
-    end: number | Date;
+    end: number | Date | string;
     /**
      * Size of the strip line, when it starts from the origin.
-     * @default null.
+     * @default null
      */
@@ -162,3 +165,3 @@ size: number;
      * Color of the strip line.
-     * @default '#808080'.
+     * @default '#808080'
      */
@@ -172,3 +175,3 @@ color: string;
      * Strip line text.
-     * @default ''.
+     * @default ''
      */
@@ -178,3 +181,3 @@ text: string;
      * The angle to which the strip line text gets rotated.
-     * @default null.
+     * @default null
      */
@@ -187,3 +190,3 @@ rotation: number;
      * * End: Places the strip line text at the end.
-     * @default 'Middle'.
+     * @default 'Middle'
      */
@@ -196,3 +199,3 @@ horizontalAlignment: Anchor;
      * * End: Places the strip line text at the end.
-     * @default 'Middle'.
+     * @default 'Middle'
      */
@@ -208,2 +211,3 @@ verticalAlignment: Anchor;
      * * Over: Places the strip line over the series elements.
+     * @default 'Behind'
      */
@@ -213,2 +217,3 @@ zIndex: ZIndex;
      * Strip line Opacity
+     * @default 1
      */
@@ -220,3 +225,3 @@ opacity: number;
  */
-export declare class MultiLevelLabels extends ChildProperty<MultiLevelLabels> {
+export declare class MultiLevelLabels extends ChildProperty<MultiLevelLabels[]> {
     /**
@@ -227,3 +232,3 @@ * Defines the position of the multi level labels. They are,
      * * Far: Places the multi level labels at Far.
-     * @default 'Center'.
+     * @default 'Center'
      */
@@ -236,3 +241,3 @@ alignment: Alignment;
      * * none: None textOverflow for multi level labels.
-     * @default 'Wrap'.
+     * @default 'Wrap'
      */
@@ -239,0 +244,0 @@ overflow: TextOverflow;

src/chart/model/chart-base.js

@@ -160,3 +160,3 @@ var __extends = (this && this.__extends) || (function () {
         __decorate([
-            ej2_base_1.Complex({ color: theme_1.Theme.axisLineColor, width: 1, type: 'Rectangle' }, LabelBorder)
+            ej2_base_1.Complex({ color: null, width: 1, type: 'Rectangle' }, LabelBorder)
         ], MultiLevelLabels.prototype, "border", void 0);
@@ -163,0 +163,0 @@ __decorate([

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

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * Area Module used to render the Area series.
+ * `AreaSeries` module is used to render the area series.
  */
@@ -28,6 +28,6 @@ export declare class AreaSeries extends MultiColoredSeries {
      * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
      * @return {void}
-     * @private
      */
     doAnimation(series: Series): void;
 }

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Bar Module used to render the bar series.
+ * `BarSeries` module is used to render the bar series.
  */
@@ -17,4 +17,4 @@ export declare class BarSeries extends ColumnBase {
      * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
      * @return {void}
-     * @private
      */
@@ -21,0 +21,0 @@ doAnimation(series: Series): void;

src/chart/series/box-and-whisker-series.d.ts

@@ -10,3 +10,3 @@ import { Rect } from '../../common/utils/helper';
 /**
- * Box and whisker Module used to render the box and whisker series.
+ * `BoxAndWhiskerSeries` module is used to render the box and whisker series.
  */
@@ -92,5 +92,5 @@ export declare class BoxAndWhiskerSeries extends ColumnBase {
     /**
-     * Animate the series
-     * @param series
-     * @private
+     * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -97,0 +97,0 @@ doAnimation(series: Series): void;

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Bubble Module used to render the Bubble series.
+ * `BubbleSeries` module is used to render the bubble series.
  */
@@ -27,5 +27,6 @@ export declare class BubbleSeries {
      * Animates the series.
-     * @return {void}.
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
     doAnimation(series: Series): void;
 }

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

@@ -7,3 +7,3 @@ import { Rect } from '../../common/utils/helper';
 /**
- * Candle Module used to render the candle series.
+ * `CandleSeries` module is used to render the candle series.
  */
@@ -40,5 +40,5 @@ export declare class CandleSeries extends ColumnBase {
     /**
-     * Animate the series
-     * @param series
-     * @private
+     * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -45,0 +45,0 @@ doAnimation(series: Series): void;

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

@@ -10,3 +10,3 @@ 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';
      * If set true, data label for series renders.
-     * @default false.
+     * @default false
      */
@@ -18,3 +18,3 @@
      * The DataSource field that contains the data label value.
-     * @default null.
+     * @default null
      */
@@ -26,3 +26,3 @@
      * The background color of the data label accepts value in hex and rgba as a valid CSS color string.
-     * @default 'transparent'.
+     * @default 'transparent'
      */
@@ -34,3 +34,3 @@
      * The opacity for the background.
-     * @default 1.
+     * @default 1
      */
@@ -42,8 +42,8 @@
      * Specifies the position of the data label. They are,
-     * * outer: Positions the label outside the point.
+     * * Outer: Positions the label outside the point.
      * * top: Positions the label on top of the point.
-     * * bottom: Positions the label at the bottom of the point.
-     * * middle: Positions the label to the middle of the point.
-     * * auto: Positions the label based on series.
-     * @Default 'Auto'.
+     * * Bottom: Positions the label at the bottom of the point.
+     * * Middle: Positions the label to the middle of the point.
+     * * Auto: Positions the label based on series.
+     * @default 'Auto'
      */
@@ -55,3 +55,3 @@
      * The roundedCornerX for the data label. It requires `border` values not to be null.
-     * @Default 5.
+     * @default 5
      */
@@ -62,3 +62,3 @@ rx?: number;
      * The roundedCornerY for the data label. It requires `border` values not to be null.
-     * @Default 5.
+     * @default 5
      */
@@ -69,6 +69,6 @@ ry?: number;
      * Specifies the alignment for data Label. They are,
-     * * near: Aligns the label to the left of the point.
-     * * center: Aligns the label to the center of the point.
-     * * far: Aligns the label to the right of the point.
-     * @default 'Center'.
+     * * Near: Aligns the label to the left of the point.
+     * * Center: Aligns the label to the center of the point.
+     * * Far: Aligns the label to the right of the point.
+     * @default 'Center'
      */
@@ -112,3 +112,3 @@ alignment?: Alignment;
      * If set to true the marker for series is rendered. This is applicable only for line and area type series.
-     * @default false.
+     * @default false
      */
@@ -120,12 +120,12 @@
      * The different shape of a marker:
-     * * circle
-     * * rectangle
-     * * triangle
-     * * diamond
-     * * horizontalLine
-     * * verticalLine
-     * * pentagon- Renders
-     * * invertedTriangle
-     * * image
-     * @default 'Circle'.
+     * * Circle
+     * * Rectangle
+     * * Triangle
+     * * Diamond
+     * * HorizontalLine
+     * * VerticalLine
+     * * Pentagon
+     * * InvertedTriangle
+     * * Image
+     * @default 'Circle'
      */
@@ -137,3 +137,3 @@
      * The URL for the Image that is to be displayed as a marker.  It requires marker `shape` value to be an `Image`.
-     * @default ''.
+     * @default ''
      */
@@ -145,3 +145,3 @@
      * The height of the marker in pixels.
-     * @default 5.
+     * @default 5
      */
@@ -153,3 +153,3 @@
      * The width of the marker in pixels.
-     * @default 5.
+     * @default 5
      */
@@ -167,3 +167,3 @@
      *  The fill color of the marker that accepts value in hex and rgba as a valid CSS color string. By default, it will take series' color.
-     * @default null.
+     * @default null
      */
@@ -175,3 +175,3 @@
      * The opacity of the marker.
-     * @default 1.
+     * @default 1
      */
@@ -204,2 +204,3 @@
      * Defines the name of trendline
+     * @default ''
      */
@@ -210,2 +211,3 @@ name?: string;
      * Defines the type of the trendline
+     * @default 'Linear'
      */
@@ -216,2 +218,3 @@ type?: TrendlineTypes;
      * Defines the period, the price changes over which will be considered to predict moving average trend line
+     * @default 2
      */
@@ -222,2 +225,3 @@ period?: number;
      * Defines the polynomial order of the polynomial trendline
+     * @default 2
      */
@@ -228,2 +232,3 @@ polynomialOrder?: number;
      * Defines the period, by which the trend has to backward forecast
+     * @default 0
      */
@@ -234,2 +239,3 @@ backwardForecast?: number;
      * Defines the period, by which the trend has to forward forecast
+     * @default 0
      */
@@ -250,2 +256,3 @@ forwardForecast?: number;
      * Enables/disables tooltip for trendlines
+     * @default true
      */
@@ -256,2 +263,3 @@ enableTooltip?: boolean;
      * Defines the intercept of the trendline
+     * @default null
      */
@@ -262,2 +270,3 @@ intercept?: number;
      * Defines the fill color of trendline
+     * @default ''
      */
@@ -268,2 +277,3 @@ fill?: string;
      * Defines the width of the trendline
+     * @default 1
      */
@@ -274,2 +284,3 @@ width?: number;
      * Sets the legend shape of the trendline
+     * @default 'SeriesType'
      */
@@ -282,3 +293,2 @@ legendShape?: LegendShape;
  * Interface for a class ErrorBarCapSettings
- * @private
  */
@@ -303,3 +313,3 @@ export interface ErrorBarCapSettingsModel {
      *  The stroke color of the cap, which accepts value in hex, rgba as a valid CSS color string.
-     * @default 'black'
+     * @default null
      */
@@ -339,3 +349,3 @@
      * Defines the pattern of dashes and gaps to stroke.
-     * @default '0'.
+     * @default '0'
      */
@@ -362,7 +372,7 @@
      * The type of the error bar . They are
-     * * fixed -  Renders a fixed type error bar.
-     * * percentage - Renders a percentage type error bar.
-     * * standardDeviation - Renders a standard deviation type error bar.
-     * * standardError -Renders a standard error type error bar.
-     * * custom -Renders a custom type error bar.
+     * * Fixed -  Renders a fixed type error bar.
+     * * Percentage - Renders a percentage type error bar.
+     * * StandardDeviation - Renders a standard deviation type error bar.
+     * * StandardError -Renders a standard error type error bar.
+     * * Custom -Renders a custom type error bar.
      * @default 'Fixed'
@@ -385,5 +395,5 @@ */
      * The mode of the error bar . They are
-     * * vertical -  Renders a vertical error bar.
-     * * horizontal - Renders a horizontal error bar.
-     * * both - Renders both side error bar.
+     * * Vertical -  Renders a vertical error bar.
+     * * Horizontal - Renders a horizontal error bar.
+     * * Both - Renders both side error bar.
      * @default 'Vertical'
@@ -396,3 +406,3 @@ */
      *  The color for stroke of the error bar, which accepts value in hex, rgba as a valid CSS color string.
-     * @default 'black'
+     * @default null
      */
@@ -466,3 +476,3 @@
      * It is applicable for series and technical indicators
-     * @default ''.
+     * @default ''
      */
@@ -475,3 +485,3 @@
      * It is applicable for series and technical indicators
-     * @default ''.
+     * @default ''
      */
@@ -484,3 +494,3 @@
      * It is applicable for series and technical indicators
-     * @default ''.
+     * @default ''
      */
@@ -493,3 +503,3 @@
      * It is applicable for series and technical indicators
-     * @default ''.
+     * @default ''
      */
@@ -502,3 +512,3 @@
      * It is applicable for series and technical indicators
-     * @default ''.
+     * @default ''
      */
@@ -547,3 +557,3 @@
      * ```
-     * @default null.
+     * @default null
      */
@@ -576,3 +586,3 @@
      * ```
-     * @default null.
+     * @default null
      */
@@ -592,3 +602,3 @@
      * For technical indicators, the default value is 'blue' and for series, it has null.
-     * @default null.
+     * @default null
      */
@@ -601,3 +611,3 @@
      * It also represents the stroke width of the signal lines in technical indicators.
-     * @default 1.
+     * @default 1
      */
@@ -609,3 +619,3 @@
      * Defines the pattern of dashes and gaps to stroke the lines in `Line` type series.
-     * @default '0'.
+     * @default '0'
      */
@@ -644,3 +654,3 @@
      * Specifies query to select data from DataSource. This property is applicable only when the DataSource is `ej.DataManager`.
-     * @default null.
+     * @default null
      */
@@ -668,3 +678,3 @@ query?: Query;
      * The name of the series visible in legend.
-     * @default ''.
+     * @default ''
      */
@@ -676,3 +686,3 @@
      * The DataSource field that contains the y value.
-     * @default ''.
+     * @default ''
      */
@@ -706,2 +716,3 @@
      * It defines the color of the candle/point, when the opening price is less than the closing price.
+     * @default '#2ecd71'
      */
@@ -714,2 +725,3 @@
      * It defines the color of the candle/point, when the opening price is higher than the closing price.
+     * @default '#e74c3d'
      */
@@ -728,3 +740,3 @@
      * The DataSource field that contains the size value of y
-     * @default ''.
+     * @default ''
      */
@@ -738,3 +750,3 @@
      * If any two or above series have the same value, those series will be grouped together.
-     * @default ''.
+     * @default ''
      */
@@ -746,3 +758,3 @@
      * Specifies the visibility of series.
-     * @default true.
+     * @default true
      */
@@ -760,3 +772,3 @@
      * The opacity of the series.
-     * @default 1.
+     * @default 1
      */
@@ -791,3 +803,3 @@ opacity?: number;
      * * BoxAndWhisker
-     * @default 'Line'.
+     * @default 'Line'
      */
@@ -814,3 +826,3 @@
      * If set true, the Tooltip for series will be visible.
-     * @default true.
+     * @default true
      */
@@ -831,3 +843,3 @@ enableTooltip?: boolean;
      * * SeriesType
-     * @default 'SeriesType'.
+     * @default 'SeriesType'
      */
@@ -845,2 +857,3 @@
      * Minimum radius
+     * @default 1
      */
@@ -851,2 +864,3 @@ minRadius?: number;
      * Maximum radius
+     * @default 3
      */
@@ -857,2 +871,3 @@ maxRadius?: number;
      * Defines type of spline to be rendered.
+     * @default 'Natural'
      */
@@ -863,2 +878,3 @@ splineType?: SplineType;
      * It defines tension of cardinal spline types
+     * @default 0.5
      */
@@ -874,3 +890,3 @@ cardinalSplineTension?: number;
      * If set true, the mean value for box and whisker will be visible.
-     * @default true.
+     * @default true
      */
@@ -884,2 +900,3 @@ showMean?: boolean;
      * Normal
+     * @default 'Normal'
      */
@@ -890,2 +907,3 @@ boxPlotMode?: BoxPlotMode;
      * To render the column series points with particular column width.
+     * @default 0.7
      */
@@ -896,2 +914,3 @@ columnWidth?: number;
      * To render the column series points with particular column spacing. It takes value from 0 - 1.
+     * @default 0
      */
@@ -902,2 +921,3 @@ columnSpacing?: number;
      * Defines the visual representation of the negative changes in waterfall charts.
+     * @default '#C64E4A'
      */
@@ -908,2 +928,3 @@ negativeFillColor?: string;
      * Defines the visual representation of the summaries in waterfall charts.
+     * @default '#4E81BC'
      */
@@ -914,2 +935,3 @@ summaryFillColor?: string;
      * Defines the collection of indexes of the intermediate summary columns in waterfall charts.
+     * @default []
      */
@@ -920,2 +942,3 @@ intermediateSumIndexes?: number[];
      * Defines the collection of indexes of the overall summary columns in waterfall charts.
+     * @default []
      */
@@ -922,0 +945,0 @@ sumIndexes?: number[];

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

@@ -24,3 +24,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * If set true, data label for series renders.
-     * @default false.
+     * @default false
      */
@@ -30,3 +30,3 @@ visible: boolean;
      * The DataSource field that contains the data label value.
-     * @default null.
+     * @default null
      */
@@ -36,3 +36,3 @@ name: string;
      * The background color of the data label accepts value in hex and rgba as a valid CSS color string.
-     * @default 'transparent'.
+     * @default 'transparent'
      */
@@ -42,3 +42,3 @@ fill: string;
      * The opacity for the background.
-     * @default 1.
+     * @default 1
      */
@@ -48,8 +48,8 @@ opacity: number;
      * Specifies the position of the data label. They are,
-     * * outer: Positions the label outside the point.
+     * * Outer: Positions the label outside the point.
      * * top: Positions the label on top of the point.
-     * * bottom: Positions the label at the bottom of the point.
-     * * middle: Positions the label to the middle of the point.
-     * * auto: Positions the label based on series.
-     * @Default 'Auto'.
+     * * Bottom: Positions the label at the bottom of the point.
+     * * Middle: Positions the label to the middle of the point.
+     * * Auto: Positions the label based on series.
+     * @default 'Auto'
      */
@@ -59,3 +59,3 @@ position: LabelPosition;
      * The roundedCornerX for the data label. It requires `border` values not to be null.
-     * @Default 5.
+     * @default 5
      */
@@ -65,3 +65,3 @@ rx: number;
      * The roundedCornerY for the data label. It requires `border` values not to be null.
-     * @Default 5.
+     * @default 5
      */
@@ -71,6 +71,6 @@ ry: number;
      * Specifies the alignment for data Label. They are,
-     * * near: Aligns the label to the left of the point.
-     * * center: Aligns the label to the center of the point.
-     * * far: Aligns the label to the right of the point.
-     * @default 'Center'.
+     * * Near: Aligns the label to the left of the point.
+     * * Center: Aligns the label to the center of the point.
+     * * Far: Aligns the label to the right of the point.
+     * @default 'Center'
      */
@@ -103,3 +103,3 @@ alignment: Alignment;
      * If set to true the marker for series is rendered. This is applicable only for line and area type series.
-     * @default false.
+     * @default false
      */
@@ -109,12 +109,12 @@ visible: boolean;
      * The different shape of a marker:
-     * * circle
-     * * rectangle
-     * * triangle
-     * * diamond
-     * * horizontalLine
-     * * verticalLine
-     * * pentagon- Renders
-     * * invertedTriangle
-     * * image
-     * @default 'Circle'.
+     * * Circle
+     * * Rectangle
+     * * Triangle
+     * * Diamond
+     * * HorizontalLine
+     * * VerticalLine
+     * * Pentagon
+     * * InvertedTriangle
+     * * Image
+     * @default 'Circle'
      */
@@ -124,3 +124,3 @@ shape: ChartShape;
      * The URL for the Image that is to be displayed as a marker.  It requires marker `shape` value to be an `Image`.
-     * @default ''.
+     * @default ''
      */
@@ -130,3 +130,3 @@ imageUrl: string;
      * The height of the marker in pixels.
-     * @default 5.
+     * @default 5
      */
@@ -136,3 +136,3 @@ height: number;
      * The width of the marker in pixels.
-     * @default 5.
+     * @default 5
      */
@@ -146,3 +146,3 @@ width: number;
      *  The fill color of the marker that accepts value in hex and rgba as a valid CSS color string. By default, it will take series' color.
-     * @default null.
+     * @default null
      */
@@ -152,3 +152,3 @@ fill: string;
      * The opacity of the marker.
-     * @default 1.
+     * @default 1
      */
@@ -202,2 +202,3 @@ opacity: number;
      * Defines the name of trendline
+     * @default ''
      */
@@ -207,2 +208,3 @@ name: string;
      * Defines the type of the trendline
+     * @default 'Linear'
      */
@@ -212,2 +214,3 @@ type: TrendlineTypes;
      * Defines the period, the price changes over which will be considered to predict moving average trend line
+     * @default 2
      */
@@ -217,2 +220,3 @@ period: number;
      * Defines the polynomial order of the polynomial trendline
+     * @default 2
      */
@@ -222,2 +226,3 @@ polynomialOrder: number;
      * Defines the period, by which the trend has to backward forecast
+     * @default 0
      */
@@ -227,2 +232,3 @@ backwardForecast: number;
      * Defines the period, by which the trend has to forward forecast
+     * @default 0
      */
@@ -240,2 +246,3 @@ forwardForecast: number;
      * Enables/disables tooltip for trendlines
+     * @default true
      */
@@ -245,2 +252,3 @@ enableTooltip: boolean;
      * Defines the intercept of the trendline
+     * @default null
      */
@@ -250,2 +258,3 @@ intercept: number;
      * Defines the fill color of trendline
+     * @default ''
      */
@@ -255,2 +264,3 @@ fill: string;
      * Defines the width of the trendline
+     * @default 1
      */
@@ -260,2 +270,3 @@ width: number;
      * Sets the legend shape of the trendline
+     * @default 'SeriesType'
      */
@@ -282,2 +293,5 @@ legendShape: LegendShape;
 }
+/**
+ * Configures Error bar in series.
+ */
 export declare class ErrorBarCapSettings extends ChildProperty<ErrorBarCapSettings> {
@@ -296,3 +310,3 @@ /**
      *  The stroke color of the cap, which accepts value in hex, rgba as a valid CSS color string.
-     * @default 'black'
+     * @default null
      */
@@ -319,3 +333,3 @@ color: string;
      * Defines the pattern of dashes and gaps to stroke.
-     * @default '0'.
+     * @default '0'
      */
@@ -336,7 +350,7 @@ dashArray: string;
      * The type of the error bar . They are
-     * * fixed -  Renders a fixed type error bar.
-     * * percentage - Renders a percentage type error bar.
-     * * standardDeviation - Renders a standard deviation type error bar.
-     * * standardError -Renders a standard error type error bar.
-     * * custom -Renders a custom type error bar.
+     * * Fixed -  Renders a fixed type error bar.
+     * * Percentage - Renders a percentage type error bar.
+     * * StandardDeviation - Renders a standard deviation type error bar.
+     * * StandardError -Renders a standard error type error bar.
+     * * Custom -Renders a custom type error bar.
      * @default 'Fixed'
@@ -355,5 +369,5 @@ */
      * The mode of the error bar . They are
-     * * vertical -  Renders a vertical error bar.
-     * * horizontal - Renders a horizontal error bar.
-     * * both - Renders both side error bar.
+     * * Vertical -  Renders a vertical error bar.
+     * * Horizontal - Renders a horizontal error bar.
+     * * Both - Renders both side error bar.
      * @default 'Vertical'
@@ -364,3 +378,3 @@ */
      *  The color for stroke of the error bar, which accepts value in hex, rgba as a valid CSS color string.
-     * @default 'black'
+     * @default null
      */
@@ -415,3 +429,3 @@ color: string;
      * It is applicable for series and technical indicators
-     * @default ''.
+     * @default ''
      */
@@ -422,3 +436,3 @@ xName: string;
      * It is applicable for series and technical indicators
-     * @default ''.
+     * @default ''
      */
@@ -429,3 +443,3 @@ high: string;
      * It is applicable for series and technical indicators
-     * @default ''.
+     * @default ''
      */
@@ -436,3 +450,3 @@ low: string;
      * It is applicable for series and technical indicators
-     * @default ''.
+     * @default ''
      */
@@ -443,3 +457,3 @@ open: string;
      * It is applicable for series and technical indicators
-     * @default ''.
+     * @default ''
      */
@@ -482,3 +496,3 @@ close: string;
      * ```
-     * @default null.
+     * @default null
      */
@@ -509,3 +523,3 @@ xAxisName: string;
      * ```
-     * @default null.
+     * @default null
      */
@@ -521,3 +535,3 @@ yAxisName: string;
      * For technical indicators, the default value is 'blue' and for series, it has null.
-     * @default null.
+     * @default null
      */
@@ -528,3 +542,3 @@ fill: string;
      * It also represents the stroke width of the signal lines in technical indicators.
-     * @default 1.
+     * @default 1
      */
@@ -534,3 +548,3 @@ width: number;
      * Defines the pattern of dashes and gaps to stroke the lines in `Line` type series.
-     * @default '0'.
+     * @default '0'
      */
@@ -565,3 +579,3 @@ dashArray: string;
      * Specifies query to select data from DataSource. This property is applicable only when the DataSource is `ej.DataManager`.
-     * @default null.
+     * @default null
      */
@@ -659,3 +673,3 @@ query: Query;
      * The name of the series visible in legend.
-     * @default ''.
+     * @default ''
      */
@@ -665,3 +679,3 @@ name: string;
      * The DataSource field that contains the y value.
-     * @default ''.
+     * @default ''
      */
@@ -691,2 +705,3 @@ yName: string;
      * It defines the color of the candle/point, when the opening price is less than the closing price.
+     * @default '#2ecd71'
      */
@@ -697,2 +712,3 @@ bearFillColor: string;
      * It defines the color of the candle/point, when the opening price is higher than the closing price.
+     * @default '#e74c3d'
      */
@@ -708,3 +724,3 @@ bullFillColor: string;
      * The DataSource field that contains the size value of y
-     * @default ''.
+     * @default ''
      */
@@ -716,3 +732,3 @@ size: string;
      * If any two or above series have the same value, those series will be grouped together.
-     * @default ''.
+     * @default ''
      */
@@ -722,3 +738,3 @@ stackingGroup: string;
      * Specifies the visibility of series.
-     * @default true.
+     * @default true
      */
@@ -732,3 +748,3 @@ visible: boolean;
      * The opacity of the series.
-     * @default 1.
+     * @default 1
      */
@@ -762,3 +778,3 @@ opacity: number;
      * * BoxAndWhisker
-     * @default 'Line'.
+     * @default 'Line'
      */
@@ -780,3 +796,3 @@ type: ChartSeriesType;
      * If set true, the Tooltip for series will be visible.
-     * @default true.
+     * @default true
      */
@@ -796,3 +812,3 @@ enableTooltip: boolean;
      * * SeriesType
-     * @default 'SeriesType'.
+     * @default 'SeriesType'
      */
@@ -807,2 +823,3 @@ legendShape: LegendShape;
      * Minimum radius
+     * @default 1
      */
@@ -812,2 +829,3 @@ minRadius: number;
      * Maximum radius
+     * @default 3
      */
@@ -817,2 +835,3 @@ maxRadius: number;
      * Defines type of spline to be rendered.
+     * @default 'Natural'
      */
@@ -822,2 +841,3 @@ splineType: SplineType;
      * It defines tension of cardinal spline types
+     * @default 0.5
      */
@@ -831,3 +851,3 @@ cardinalSplineTension: number;
      * If set true, the mean value for box and whisker will be visible.
-     * @default true.
+     * @default true
      */
@@ -840,2 +860,3 @@ showMean: boolean;
      * Normal
+     * @default 'Normal'
      */
@@ -845,2 +866,3 @@ boxPlotMode: BoxPlotMode;
      * To render the column series points with particular column width.
+     * @default 0.7
      */
@@ -850,2 +872,3 @@ columnWidth: number;
      * To render the column series points with particular column spacing. It takes value from 0 - 1.
+     * @default 0
      */
@@ -855,2 +878,3 @@ columnSpacing: number;
      * Defines the visual representation of the negative changes in waterfall charts.
+     * @default '#C64E4A'
      */
@@ -860,2 +884,3 @@ negativeFillColor: string;
      * Defines the visual representation of the summaries in waterfall charts.
+     * @default '#4E81BC'
      */
@@ -865,2 +890,3 @@ summaryFillColor: string;
      * Defines the collection of indexes of the intermediate summary columns in waterfall charts.
+     * @default []
      */
@@ -870,2 +896,3 @@ intermediateSumIndexes: number[];
      * Defines the collection of indexes of the overall summary columns in waterfall charts.
+     * @default []
      */
@@ -938,3 +965,3 @@ sumIndexes: number[];
      */
-    calculateStackedValue(isStacking100: boolean): void;
+    calculateStackedValue(isStacking100: boolean, chart: Chart): void;
     private calculateStackingValues(seriesCollection, isStacking100);
@@ -941,0 +968,0 @@ private findFrequencies(seriesCollection);

src/chart/series/chart-series.js

@@ -180,3 +180,3 @@ var __extends = (this && this.__extends) || (function () {
         __decorate([
-            ej2_base_1.Property('black')
+            ej2_base_1.Property(null)
         ], ErrorBarCapSettings.prototype, "color", void 0);
@@ -224,3 +224,3 @@ __decorate([
         __decorate([
-            ej2_base_1.Property('black')
+            ej2_base_1.Property(null)
         ], ErrorBarSettings.prototype, "color", void 0);
@@ -320,3 +320,3 @@ __decorate([
             if (this instanceof Series) {
-                if (this.type.indexOf('Spline') > -1 || this.drawType.indexOf('Spline') > -1) {
+                if (this.type.indexOf('Spline') > -1 || (this.drawType.indexOf('Spline') > -1 && this.chart.chartAreaType === 'PolarRadar')) {
                     var isArea = (this.type.indexOf('Area') > -1 || this.drawType === 'Area');
@@ -380,3 +380,4 @@ this.chart['spline' + (isArea ? 'Area' : '') + 'SeriesModule'].findSplinePoint(this);
                                 point.open = ej2_base_2.isNullOrUndefined(point.open) ? this.getAverage(this.open, i) : point.open;
-                                point.close = ej2_base_2.isNullOrUndefined(point.close) ? this.getAverage(this.close, i) : point.close;
+                                point.close = ej2_base_2.isNullOrUndefined(point.close) ? this.getAverage(this.close, i) :
+                                    point.close;
                             }
@@ -405,3 +406,3 @@ }
                     if (this instanceof Series && this.type === 'Bubble') {
-                        this.sizeMax = Math.max(this.sizeMax, point.size);
+                        this.sizeMax = Math.max(this.sizeMax, ej2_base_2.isNullOrUndefined(point.size) ? this.sizeMax : point.size);
                     }
@@ -636,7 +637,7 @@ return ej2_base_2.isNullOrUndefined(point.x) || ej2_base_2.isNullOrUndefined(point.y);
         };
-        Series.prototype.calculateStackedValue = function (isStacking100) {
+        Series.prototype.calculateStackedValue = function (isStacking100, chart) {
             var axisSeries;
-            for (var _i = 0, _a = this.chart.columns; _i < _a.length; _i++) {
+            for (var _i = 0, _a = chart.columns; _i < _a.length; _i++) {
                 var columnItem = _a[_i];
-                for (var _b = 0, _c = this.chart.rows; _b < _c.length; _b++) {
+                for (var _b = 0, _c = chart.rows; _b < _c.length; _b++) {
                     var item = _c[_b];
@@ -643,0 +644,0 @@ this.calculateStackingValues(this.findSeriesCollection(columnItem, item, true), isStacking100);

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

@@ -62,2 +62,3 @@ import { DoubleRange } from '../utils/double-range';
      * @return {void}
+     * @private
      */
@@ -64,0 +65,0 @@ animate(series: Series): void;

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Column Module used to render the column series.
+ * `ColumnSeries` Module used to render the column series.
  */
@@ -17,4 +17,4 @@ export declare class ColumnSeries extends ColumnBase {
      * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
      * @return {void}
-     * @private
      */
@@ -21,0 +21,0 @@ doAnimation(series: Series): void;

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * DataLabel Module used to render the column series.
+ * `DataLabel` module is used to render data label for the data point.
  */
@@ -21,2 +21,3 @@ export declare class DataLabel {
     private errorHeight;
+    private chartBackground;
     /**
@@ -33,3 +34,2 @@ * Constructor for the data label module.
      * @return {void}
-     * @private
      */
@@ -62,4 +62,4 @@ render(series: Series, chart: Chart, dataLabel: DataLabelSettingsModel): void;
      * Animates the data label.
-     * @return {void}.
-     * @private
+     * @param  {Series} series - Data label of the series gets animated.
+     * @return {void}
      */
@@ -66,0 +66,0 @@ doDataLabelAnimation(series: Series, element?: Element): void;

src/chart/series/data-label.js

@@ -28,2 +28,4 @@ define(["require", "exports", "../../common/utils/helper", "../../common/utils/helper", "../../common/model/constants", "../../common/utils/helper", "@syncfusion/ej2-base", "../../common/utils/helper"], function (require, exports, helper_1, helper_2, constants_1, helper_3, ej2_base_1, helper_4) {
             this.calculateErrorHeight(series, series.marker.dataLabel.position);
+            this.chartBackground = this.chart.chartArea.background === 'trasparent' ?
+                this.chart.background || this.chart.themeStyle.background : this.chart.chartArea.background;
         };
@@ -156,2 +158,4 @@ DataLabel.prototype.calculateErrorHeight = function (series, position) {
             var rgbValue = helper_2.convertHexToColor(helper_2.colorNameToHex(this.fontBackground));
+            var vAxis = series.chart.requireInvertedAxis ? series.xAxis : series.yAxis;
+            var hAxis = series.chart.requireInvertedAxis ? series.yAxis : series.xAxis;
             childElement.style.color = dataLabel.font.color ||
@@ -162,3 +166,5 @@ ((Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000)) >= 128 ? 'black' : 'white');
                     (series.type.indexOf('100') > -1 && helper_3.withIn(series.stackedValues.endValues[point.index], series.yAxis.visibleRange)))
-                && helper_3.withIn(point.xValue, series.xAxis.visibleRange)) {
+                && helper_3.withIn(point.xValue, series.xAxis.visibleRange) && parseFloat(childElement.style.top) >= vAxis.rect.y &&
+                parseFloat(childElement.style.left) >= hAxis.rect.x && parseFloat(childElement.style.top) <= vAxis.rect.y + vAxis.rect.height &&
+                parseFloat(childElement.style.left) <= hAxis.rect.x + hAxis.rect.width) {
                 this.chart.dataLabelCollections.push(new helper_1.Rect(rect.x + clip.x, rect.y + clip.y, rect.width, rect.height));
@@ -208,3 +214,3 @@ parentElement.appendChild(childElement);
                 rect.y -= (rect.y + rect.height) > clipRect.height ? (rect.y + rect.height) - clipRect.height + padding : 0;
-                this.fontBackground = this.fontBackground === 'transparent' ? this.chart.chartArea.background : this.fontBackground;
+                this.fontBackground = this.fontBackground === 'transparent' ? this.chartBackground : this.fontBackground;
             }
@@ -216,2 +222,3 @@ return rect;
             var columnRadius;
+            var angle = (point.regionData.startAngle - 0.5 * Math.PI) + (point.regionData.endAngle - point.regionData.startAngle) / 2;
             if (labelIndex === 0) {
@@ -225,6 +232,3 @@ columnRadius = point.regionData.radius < point.regionData.innerRadius ? point.regionData.innerRadius
             }
-            var vector;
-            var ticksbwtLabel = series.xAxis.valueType === 'Category' && series.xAxis.labelPlacement === 'BetweenTicks' ? 0.5
-                : 0.5 - (series.rectCount / 2);
-            this.fontBackground = this.fontBackground === 'transparent' ? this.chart.chartArea.background : this.fontBackground;
+            this.fontBackground = this.fontBackground === 'transparent' ? this.chartBackground : this.fontBackground;
             if (series.drawType.indexOf('Stacking') > -1) {
@@ -257,5 +261,4 @@ position = position === 'Outer' ? 'Top' : position;
             }
-            vector = helper_3.CoefficientToVector(helper_3.valueToPolarCoefficient((point.xValue + ticksbwtLabel / series.rectCount + series.position / series.rectCount), series.xAxis), series.chart.primaryXAxis.startAngle);
-            location.x = series.clipRect.width / 2 + series.clipRect.x + columnRadius * vector.x;
-            location.y = series.clipRect.height / 2 + series.clipRect.y + columnRadius * vector.y;
+            location.x = series.clipRect.width / 2 + series.clipRect.x + columnRadius * Math.cos(angle);
+            location.y = series.clipRect.height / 2 + series.clipRect.y + columnRadius * Math.sin(angle);
             return location;
@@ -362,3 +365,3 @@ };
             this.fontBackground = check ?
-                (this.fontBackground === 'transparent' ? this.chart.chartArea.background : this.fontBackground)
+                (this.fontBackground === 'transparent' ? this.chartBackground : this.fontBackground)
                 : this.fontBackground === 'transparent' ? (point.color || series.interior) : this.fontBackground;
@@ -373,3 +376,3 @@ return labelLocation;
             }
-            this.fontBackground = this.fontBackground === 'transparent' ? this.chart.chartArea.background : this.fontBackground;
+            this.fontBackground = this.fontBackground === 'transparent' ? this.chartBackground : this.fontBackground;
             switch (position) {
@@ -376,0 +379,0 @@ case 'Top':

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

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * Error bar Module used to render the error bar for series.
+ * `ErrorBar` module is used to render the error bar for series.
  */
@@ -23,3 +23,2 @@ export declare class ErrorBar {
      * @return {void}
-     * @private
      */
@@ -41,5 +40,5 @@ render(series: Series): void;
     /**
-     * Animates the error bar.
-     * @return {void}.
-     * @private
+     * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -46,0 +45,0 @@ doErrorBarAnimation(series: Series): void;

src/chart/series/error-bar.js

@@ -49,6 +49,6 @@ define(["require", "exports", "../../common/utils/helper", "../../common/utils/helper"], function (require, exports, helper_1, helper_2) {
                     capId = this.chart.element.id + '_Series_' + '_ErrorBarCap_' + seriesIndex + '_Point_' + point_1.index;
-                    var shapeOption = new helper_2.PathOption(symbolId, '', errorbar.width, errorbar.color, null, '', errorDirection[0]);
+                    var shapeOption = new helper_2.PathOption(symbolId, '', errorbar.width, errorbar.color || this.chart.themeStyle.errorBar, null, '', errorDirection[0]);
                     var path = this.chart.renderer.drawPath(shapeOption);
                     series.errorBarElement.appendChild(path);
-                    var capOption = new helper_2.PathOption(capId, '', errorBarCap.width, errorBarCap.color, null, '', errorDirection[1]);
+                    var capOption = new helper_2.PathOption(capId, '', errorBarCap.width, errorBarCap.color || this.chart.themeStyle.errorBar, null, '', errorDirection[1]);
                     var capPath = this.chart.renderer.drawPath(capOption);
@@ -55,0 +55,0 @@ series.errorBarElement.appendChild(capPath);

src/chart/series/hilo-open-close-series.d.ts

@@ -7,3 +7,3 @@ import { Rect, ChartLocation } from '../../common/utils/helper';
 /**
- * hiloOpenClose Module used to render the hiloOpenClose series.
+ * `HiloOpenCloseSeries` module is used to render the hiloOpenClose series.
  */
@@ -37,4 +37,4 @@ export declare class HiloOpenCloseSeries extends ColumnBase {
      * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
      * @return {void}
-     * @private
      */
@@ -41,0 +41,0 @@ doAnimation(series: Series): void;

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Hilo Module used to render the Hilo series.
+ * `HiloSeries` module is used to render the hilo series.
  */
@@ -27,4 +27,4 @@ export declare class HiloSeries extends ColumnBase {
      * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
      * @return {void}
-     * @private
      */
@@ -31,0 +31,0 @@ doAnimation(series: Series): void;

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

@@ -6,3 +6,3 @@ import { PathOption } from '../../common/utils/helper';
 /**
- * render Line series
+ * Base for line type series.
  */
@@ -45,2 +45,3 @@ export declare class LineBase {
      * @return {void}
+     * @private
      */
@@ -59,4 +60,5 @@ doProgressiveAnimation(series: Series, option: AnimationModel): void;
      * @return {void}
+     * @private
      */
     doLinearAnimation(series: Series, animation: AnimationModel): void;
 }

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

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * Line Module used to render the line series.
+ * `LineSeries` module used to render the line series.
  */
@@ -18,4 +18,4 @@ export declare class LineSeries extends LineBase {
      * Animates the series.
-     * @return {void}.
-     * @private
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -22,0 +22,0 @@ doAnimation(series: Series): void;

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

 import { Chart } from '../chart';
-import { Data } from '../../chart/utils/get-data';
+import { ChartData } from '../../chart/utils/get-data';
 /**
  * Marker Module used to render the marker for line type series.
  */
-export declare class MarkerExplode extends Data {
+export declare class MarkerExplode extends ChartData {
     private markerExplode;
@@ -8,0 +8,0 @@ private isRemove;

src/chart/series/marker-explode.js

@@ -31,3 +31,3 @@ var __extends = (this && this.__extends) || (function () {
             var chart = this.chart;
-            if (chart.isTouch && !chart.crosshair.enable) {
+            if (chart.isTouch && !chart.crosshair.enable && !this.isSelected(chart)) {
                 this.markerMove(true);
@@ -38,3 +38,3 @@ }
             var chart = this.chart;
-            if ((!chart.crosshair.enable || (chart.tooltip.enable)) && (!chart.isTouch || chart.startMove)) {
+            if ((!chart.crosshair.enable || (chart.tooltip.enable)) && (!chart.isTouch || chart.startMove) && !this.isSelected(chart)) {
                 this.markerMove(false);
@@ -48,10 +48,12 @@ }
             var data;
+            var previous;
             var explodeSeries;
             if (!chart.tooltip.shared || !chart.tooltip.enable) {
                 data = this.getData();
+                previous = this.previousPoints[0];
                 explodeSeries = data.series && (data.series.type === 'BoxAndWhisker' || data.series.type === 'Bubble' || data.series.drawType === 'Scatter'
                     || data.series.type === 'Scatter' || (!data.series.isRectSeries && data.series.marker.visible));
                 data.lierIndex = this.lierIndex;
-                if (data.point && explodeSeries && ((!this.previousPoints[0] || (this.previousPoints[0].point !== data.point)) ||
-                    (this.previousPoints[0] && this.previousPoints[0].lierIndex > 3 && this.previousPoints[0].lierIndex !== this.lierIndex))) {
+                if (data.point && explodeSeries && ((!previous || (previous.point !== data.point)) ||
+                    (previous && previous.lierIndex > 3 && previous.lierIndex !== this.lierIndex))) {
                     this.currentPoints.push(data);
@@ -133,4 +135,6 @@ }
             var borderWidth = marker.border ? marker.border.width : seriesMarker.border.width;
+            var markerShadow = series.chart.themeStyle.markerShadow ||
+                'rgba(' + colorValue.r + ',' + colorValue.g + ',' + colorValue.b + ',0.2)';
             for (var i = 0; i < 2; i++) {
-                var options = new helper_1.PathOption(symbolId + '_' + i, i ? (marker.fill || point.color || (explodeSeries ? series.interior : '#ffffff')) : 'transparent', borderWidth + (i ? 0 : 8), i ? borderColor : 'rgba(' + colorValue.r + ',' + colorValue.g + ',' + colorValue.b + ',0.2)', (marker.opacity || seriesMarker.opacity), null, null);
+                var options = new helper_1.PathOption(symbolId + '_' + i, i ? (marker.fill || point.color || (explodeSeries ? series.interior : '#ffffff')) : 'transparent', borderWidth + (i ? 0 : 8), i ? borderColor : markerShadow, (marker.opacity || seriesMarker.opacity), null, null);
                 var symbol = helper_1.drawSymbol(location, shape, size, seriesMarker.imageUrl, options, '');
@@ -150,4 +154,4 @@ symbol.setAttribute('style', 'pointer-events:none');
         return MarkerExplode;
-    }(get_data_1.Data));
+    }(get_data_1.ChartData));
     exports.MarkerExplode = MarkerExplode;
 });

src/chart/series/marker.d.ts

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Marker Module used to render the marker for line type series.
+ * Marker module used to render the marker for line type series.
  */
@@ -8,0 +8,0 @@ export declare class Marker extends MarkerExplode {

src/chart/series/multi-colored-area-series.d.ts

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * Multi Color Area Module used to render the Area series with multi color.
+ * `MultiColoredAreaSeries` module used to render the area series with multi color.
  */
@@ -32,6 +32,6 @@ export declare class MultiColoredAreaSeries extends MultiColoredSeries {
      * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
      * @return {void}
-     * @private
      */
     doAnimation(series: Series): void;
 }

src/chart/series/multi-colored-area-series.js

@@ -30,2 +30,3 @@ var __extends = (this && this.__extends) || (function () {
             var rendered;
+            var segments = this.sortSegments(series, series.segments);
             series.points.map(function (point, i, seriesPoints) {
@@ -39,3 +40,3 @@ point.symbolLocations = [];
                     firstPoint = helper_1.getPoint(point.xValue, point.yValue, xAxis, yAxis, isInverted, series);
-                    if (previous && _this.setPointColor(point, previous, series, series.segmentAxis === 'X')) {
+                    if (previous && _this.setPointColor(point, previous, series, series.segmentAxis === 'X', segments)) {
                         rendered = true;
@@ -51,3 +52,3 @@ startRegion = helper_1.getPoint(startPoint.x, origin, xAxis, yAxis, isInverted, series);
                         direction += ('L' + ' ' + (firstPoint.x) + ' ' + (firstPoint.y) + ' ');
-                        _this.setPointColor(point, null, series, series.segmentAxis === 'X');
+                        _this.setPointColor(point, null, series, series.segmentAxis === 'X', segments);
                     }
@@ -67,3 +68,3 @@ if (seriesPoints[i + 1] && !seriesPoints[i + 1].visible && series.emptyPointSettings.mode !== 'Drop') {
             }
-            this.applySegmentAxis(series, options, series.segments);
+            this.applySegmentAxis(series, options, segments);
             this.renderMarker(series);
@@ -70,0 +71,0 @@ };

src/chart/series/multi-colored-base.d.ts

@@ -35,3 +35,4 @@ import { ChartLocation, PathOption } from '../../common/utils/helper';
      */
-    setPointColor(currentPoint: Points, previous: Points, series: Series, isXSegment: boolean): boolean;
+    setPointColor(currentPoint: Points, previous: Points, series: Series, isXSegment: boolean, segments: ChartSegmentModel[]): boolean;
+    sortSegments(series: Series, chartSegments: ChartSegmentModel[]): ChartSegmentModel[];
     /**
@@ -43,3 +44,3 @@ * Segment calculation performed here
      */
-    applySegmentAxis(series: Series, options: PathOption[], chartSegments: ChartSegmentModel[]): void;
+    applySegmentAxis(series: Series, options: PathOption[], segments: ChartSegmentModel[]): void;
     private includeSegment(segments, axis, series, length);
@@ -46,0 +47,0 @@ /**

src/chart/series/multi-colored-base.js

@@ -34,8 +34,8 @@ var __extends = (this && this.__extends) || (function () {
         };
-        MultiColoredSeries.prototype.setPointColor = function (currentPoint, previous, series, isXSegment) {
+        MultiColoredSeries.prototype.setPointColor = function (currentPoint, previous, series, isXSegment, segments) {
             if (series.pointColorMapping === '') {
                 var segment = void 0;
                 var value = void 0;
-                for (var i = 0; i < series.segments.length; i++) {
-                    segment = series.segments[i];
+                for (var i = 0; i < segments.length; i++) {
+                    segment = segments[i];
                     value = isXSegment ? currentPoint.xValue : currentPoint.yValue;
@@ -61,3 +61,11 @@ if (value <= this.getAxisValue(segment.value, isXSegment ? series.xAxis : series.yAxis, series.chart) || !segment.value) {
         };
-        MultiColoredSeries.prototype.applySegmentAxis = function (series, options, chartSegments) {
+        MultiColoredSeries.prototype.sortSegments = function (series, chartSegments) {
+            var axis = series.segmentAxis === 'X' ? series.xAxis : series.yAxis;
+            var segments = [].concat(chartSegments);
+            var access = this;
+            return segments.sort(function (a, b) {
+                return access.getAxisValue(a.value, axis, series.chart) - access.getAxisValue(b.value, axis, series.chart);
+            });
+        };
+        MultiColoredSeries.prototype.applySegmentAxis = function (series, options, segments) {
             var _this = this;
@@ -74,24 +82,27 @@ if (series.pointColorMapping !== '') {
             var segment;
-            var segments = [].concat(chartSegments);
-            var access = this;
-            segments = segments.sort(function (a, b) {
-                return access.getAxisValue(a.value, axis, series.chart) - access.getAxisValue(b.value, axis, series.chart);
-            });
             this.includeSegment(segments, axis, series, segments.length);
             var length = segments.length;
+            var value;
+            var clipPath;
             var _loop_1 = function (index) {
                 segment = segments[index];
-                options.map(function (option) {
-                    series.seriesElement.appendChild(chart.renderer.drawPath({
-                        'clip-path': _this.createClipRect(index ? _this.getAxisValue(segments[index - 1].value, axis, series.chart) : axis.visibleRange.min, _this.getAxisValue(segment.value, axis, series.chart), series, index, isXSegment),
-                        'stroke-dasharray': segment.dashArray,
-                        'opacity': option.opacity,
-                        'stroke': series.type.indexOf('Line') > -1 ? segment.color || series.interior : series.border.color,
-                        'stroke-width': option['stroke-width'],
-                        'fill': series.type.indexOf('Line') > -1 ? 'none' : segment.color || series.interior,
-                        'id': option.id + '_Segment_' + index,
-                        'd': option.d
-                    }));
-                });
+                value = this_1.getAxisValue(segment.value, axis, series.chart);
+                clipPath = this_1.createClipRect(index ? this_1.getAxisValue(segments[index - 1].value, axis, series.chart)
+                    : axis.visibleRange.min, value, series, index, isXSegment);
+                if (clipPath) {
+                    options.map(function (option) {
+                        series.seriesElement.appendChild(chart.renderer.drawPath({
+                            'clip-path': clipPath,
+                            'stroke-dasharray': segment.dashArray,
+                            'opacity': option.opacity,
+                            'stroke': series.type.indexOf('Line') > -1 ? segment.color || series.interior : series.border.color,
+                            'stroke-width': option['stroke-width'],
+                            'fill': series.type.indexOf('Line') > -1 ? 'none' : segment.color || series.interior,
+                            'id': option.id + '_Segment_' + index,
+                            'd': option.d
+                        }));
+                    });
+                }
             };
+            var this_1 = this;
             for (var index = 0; index < length; index++) {
@@ -102,2 +113,6 @@ _loop_1(index);
         MultiColoredSeries.prototype.includeSegment = function (segments, axis, series, length) {
+            if (length <= 0) {
+                segments.push({ value: axis.visibleRange.max, color: series.interior });
+                return null;
+            }
             if (this.getAxisValue(segments[length - 1].value, axis, series.chart) < axis.visibleRange.max) {
@@ -113,9 +128,12 @@ segments.push({ value: axis.visibleRange.max, color: series.interior });
                 [startPointLocation, startPointLocation = endPointLocation][0] : endPointLocation;
-            series.seriesElement.appendChild(series.chart.renderer.drawClipPath(new helper_2.RectOption(series.chart.element.id + '_ChartSegmentClipRect_' + index, 'transparent', { width: 1, color: 'Gray' }, 1, {
-                x: startPointLocation.x,
-                y: startPointLocation.y,
-                width: endPointLocation.x - startPointLocation.x,
-                height: endPointLocation.y - startPointLocation.y
-            })));
-            return 'url(#' + series.chart.element.id + '_ChartSegmentClipRect_' + index + ')';
+            if ((endPointLocation.x - startPointLocation.x > 0) && (endPointLocation.y - startPointLocation.y > 0)) {
+                series.seriesElement.appendChild(series.chart.renderer.drawClipPath(new helper_2.RectOption(series.chart.element.id + '_ChartSegmentClipRect_' + index, 'transparent', { width: 1, color: 'Gray' }, 1, {
+                    x: startPointLocation.x,
+                    y: startPointLocation.y,
+                    width: endPointLocation.x - startPointLocation.x,
+                    height: endPointLocation.y - startPointLocation.y
+                })));
+                return 'url(#' + series.chart.element.id + '_ChartSegmentClipRect_' + index + ')';
+            }
+            return null;
         };
@@ -122,0 +140,0 @@ MultiColoredSeries.prototype.getAxisValue = function (segmentValue, axis, chart) {

src/chart/series/multi-colored-line-series.d.ts

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * Line Module used to render the line series.
+ * `MultiColoredLineSeries` used to render the line series with multi color.
  */
@@ -18,4 +18,4 @@ export declare class MultiColoredLineSeries extends MultiColoredSeries {
      * Animates the series.
-     * @return {void}.
-     * @private
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -22,0 +22,0 @@ doAnimation(series: Series): void;

src/chart/series/multi-colored-line-series.js

@@ -25,2 +25,3 @@ var __extends = (this && this.__extends) || (function () {
             var direction = '';
+            var segments = this.sortSegments(series, series.segments);
             for (var _i = 0, visiblePoints_1 = visiblePoints; _i < visiblePoints_1.length; _i++) {
@@ -32,3 +33,3 @@ var point = visiblePoints_1[_i];
                     if (previous != null) {
-                        if (this.setPointColor(point, previous, series, series.segmentAxis === 'X')) {
+                        if (this.setPointColor(point, previous, series, series.segmentAxis === 'X', segments)) {
                             options.push(new helper_1.PathOption(series.chart.element.id + '_Series_' + series.index + '_Point_' + previous.index, 'none', series.width, series.setPointColor(previous, series.interior), series.opacity, series.dashArray, direction));
@@ -43,3 +44,3 @@ startPoint = 'M';
                     else {
-                        this.setPointColor(point, null, series, series.segmentAxis === 'X');
+                        this.setPointColor(point, null, series, series.segmentAxis === 'X', segments);
                     }
@@ -58,3 +59,3 @@ previous = point;
             }
-            this.applySegmentAxis(series, options, series.segments);
+            this.applySegmentAxis(series, options, segments);
             this.renderMarker(series);
@@ -61,0 +62,0 @@ };

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

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * `PolarSeries` Module used to render the polar series.
+ * `PolarSeries` module is used to render the polar series.
  */
@@ -35,3 +35,4 @@ export declare class PolarSeries extends PolarRadarPanel {
      * Animates the series.
-     * @return {void}.
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -38,0 +39,0 @@ doAnimation(series: Series): void;

src/chart/series/polar-series.js

@@ -60,3 +60,2 @@ var __extends = (this && this.__extends) || (function () {
             var inversedValue;
-            var vector;
             this.getSeriesPosition(series);
@@ -137,6 +136,5 @@ var position = series.xAxis.isInversed ? (series.rectCount - 1 - series.position) : series.position;
                         if (series.type === 'Polar') {
-                            vector = helper_1.CoefficientToVector(helper_1.valueToPolarCoefficient((point.xValue + ticksbwtLabel / series.rectCount + series.position / series.rectCount), series.xAxis), series.chart.primaryXAxis.startAngle);
                             point.symbolLocations.push({
-                                x: series.clipRect.width / 2 + series.clipRect.x + radius * vector.x,
-                                y: series.clipRect.height / 2 + series.clipRect.y + radius * vector.y
+                                x: centerX + radius * Math.cos((startAngle + (endAngle - startAngle) / 2)),
+                                y: centerY + radius * Math.sin((startAngle + (endAngle - startAngle) / 2))
                             });
@@ -143,0 +141,0 @@ }

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * `RadarSeries` Module used to render the radar series.
+ * `RadarSeries` module is used to render the radar series.
  */
@@ -8,0 +8,0 @@ export declare class RadarSeries extends PolarSeries {

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * RangeAreaSeries Module used to render the rangeArea series.
+ * `RangeAreaSeries` module is used to render the range area series.
  */
@@ -23,4 +23,4 @@ export declare class RangeAreaSeries extends LineBase {
      * Animates the series.
-     * @return {void}.
-     * @private
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -27,0 +27,0 @@ doAnimation(series: Series): void;

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * `RangeColumnSeries` Module used to render the range column series.
+ * `RangeColumnSeries` module is used to render the range column series.
  */
@@ -21,4 +21,4 @@ export declare class RangeColumnSeries extends ColumnBase {
      * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
      * @return {void}
-     * @private
      */
@@ -25,0 +25,0 @@ doAnimation(series: Series): void;

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Scatter Module used to render the scatter series.
+ * `ScatterSeries` module is used to render the scatter series.
  */
@@ -17,4 +17,4 @@ export declare class ScatterSeries {
      * Animates the series.
-     * @return {void}.
-     * @private
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -21,0 +21,0 @@ doAnimation(series: Series): void;

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

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * SplineArea Module used to render the splineArea series.
+ * `SplineAreaSeries` module used to render the spline area series.
  */
@@ -9,0 +9,0 @@ export declare class SplineAreaSeries extends SplineBase {

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

@@ -69,3 +69,4 @@ var __extends = (this && this.__extends) || (function () {
                     && pt2 && startPoint) {
-                    direction = direction.concat('L ' + (pt2.x) + ' ' + (startPoint.y));
+                    startPoint = getCoordinate(point.xValue, origin, xAxis, yAxis, isInverted, series);
+                    direction = direction.concat('L ' + (startPoint.x) + ' ' + (startPoint.y));
                 }
@@ -72,0 +73,0 @@ }

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

@@ -40,5 +40,6 @@ import { ControlPoints } from '../../common/utils/helper';
      * Animates the series.
-     * @return {void}.
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
     doAnimation(series: Series): void;
 }

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

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * Spline Module used to render the spline series.
+ * `SplineSeries` module is used to render the spline series.
  */
@@ -9,0 +9,0 @@ export declare class SplineSeries extends SplineBase {

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

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * Stacking Area Module used to render the Stacking Area series.
+ * `StackingAreaSeries` module used to render the Stacking Area series.
  */
@@ -18,4 +18,4 @@ export declare class StackingAreaSeries extends LineBase {
      * Animates the series.
-     * @return {void}.
-     * @private
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -22,0 +22,0 @@ doAnimation(series: Series): void;

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Stacking Bar Module used to render the Stacking Bar series.
+ * `StackingBarSeries` module is used to render the stacking bar series.
  */
@@ -27,6 +27,6 @@ export declare class StackingBarSeries extends ColumnBase {
      * Animates the series.
-     * @return {void}.
-     * @private
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
     doAnimation(series: Series): void;
 }

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Stacking Column Module used to render the Stacking Column series.
+ * `StackingColumnSeries` module used to render the stacking column series.
  */
@@ -17,4 +17,4 @@ export declare class StackingColumnSeries extends ColumnBase {
      * Animates the series.
-     * @return {void}.
-     * @private
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -21,0 +21,0 @@ doAnimation(series: Series): void;

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

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * StepArea Module used to render the StepArea series.
+ * `StepAreaSeries` Module used to render the step area series.
  */
@@ -18,4 +18,4 @@ export declare class StepAreaSeries extends LineBase {
      * Animates the series.
-     * @return {void}.
-     * @private
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -22,0 +22,0 @@ doAnimation(series: Series): void;

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

@@ -6,3 +6,3 @@ import { Chart } from '../chart';
 /**
- * StepLine Module used to render the step line series.
+ * `StepLineSeries` module is used to render the step line series.
  */
@@ -18,4 +18,4 @@ export declare class StepLineSeries extends LineBase {
      * Animates the series.
-     * @return {void}.
-     * @private
+     * @param  {Series} series - Defines the series to animate.
+     * @return {void}
      */
@@ -22,0 +22,0 @@ doAnimation(series: Series): void;

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Waterfall Module used to render the waterfall series.
+ * `WaterfallSeries` module is used to render the waterfall series.
  */
@@ -40,5 +40,5 @@ export declare class WaterfallSeries extends ColumnBase {
     /**
-     * Animates the waterfall series.
+     * Animates the series.
+     * @param  {Series} series - Defines the series to animate.
      * @return {void}
-     * @private
      */
@@ -45,0 +45,0 @@ doAnimation(series: Series): void;

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Defines How to represent the Accumulation Distribution TechnicalIndicator
+ * `AccumulationDistributionIndicator` module is used to render accumulation distribution indicator.
  */
@@ -8,0 +8,0 @@ export declare class AccumulationDistributionIndicator extends TechnicalAnalysis {

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * Defines How to represent the Average true Range Technical Indicator
+ * `AtrIndicator` module is used to render ATR indicator.
  */
@@ -8,0 +8,0 @@ export declare class AtrIndicator extends TechnicalAnalysis {

src/chart/technical-indicators/bollinger-bands.d.ts

@@ -5,3 +5,3 @@ import { TechnicalIndicator } from './technical-indicator';
 /**
- * Bollinger Band Indicator predicts the trend using Bollinger approach
+ * `BollingerBands` module is used to render bollinger band indicator.
  */
@@ -8,0 +8,0 @@ export declare class BollingerBands extends TechnicalAnalysis {

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

@@ -5,3 +5,3 @@ import { TechnicalIndicator } from './technical-indicator';
 /**
- * EMA Indicator predicts the trend using moving average approach
+ * `EmaIndicator` module is used to render EMA indicator.
  */
@@ -8,0 +8,0 @@ export declare class EmaIndicator extends TechnicalAnalysis {

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

@@ -5,3 +5,3 @@ import { Chart } from '../chart';
 /**
- * MACD Indicator predicts the trend using MACD approach
+ * `MacdIndicator` module is used to render MACD indicator.
  */
@@ -8,0 +8,0 @@ export declare class MacdIndicator extends TechnicalAnalysis {

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

@@ -5,3 +5,3 @@ import { TechnicalIndicator } from './technical-indicator';
 /**
- * Defines how to represent the market trend using momentum indicators
+ * `MomentumIndicator` module is used to render Momentum indicator.
  */
@@ -8,0 +8,0 @@ export declare class MomentumIndicator extends TechnicalAnalysis {

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

@@ -5,3 +5,3 @@ import { TechnicalIndicator } from './technical-indicator';
 /**
- * RSI predicts the trend using RSI approach
+ * `RsiIndicator` module is used to render RSI indicator.
  */
@@ -8,0 +8,0 @@ export declare class RsiIndicator extends TechnicalAnalysis {

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

@@ -5,3 +5,3 @@ import { TechnicalIndicator } from './technical-indicator';
 /**
- * SMA Indicator predicts the trend using moving average approach
+ * `SmaIndicator` module is used to render SMA indicator.
  */
@@ -8,0 +8,0 @@ export declare class SmaIndicator extends TechnicalAnalysis {

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

@@ -5,3 +5,3 @@ import { TechnicalIndicator } from './technical-indicator';
 /**
- * Stochastic predicts the trend using Stochastic approach
+ * `StochasticIndicator` module is used to render stochastic indicator.
  */
@@ -8,0 +8,0 @@ export declare class StochasticIndicator extends TechnicalAnalysis {

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

@@ -5,3 +5,3 @@ import { TechnicalIndicator } from './technical-indicator';
 /**
- * TMA Indicator predicts the trend using moving average approach
+ * `TmaIndicator` module is used to render TMA indicator.
  */
@@ -8,0 +8,0 @@ export declare class TmaIndicator extends TechnicalAnalysis {

src/chart/trend-lines/trend-line.d.ts

 import { Series, Trendline } from '../series/chart-series';
 import { Chart } from '../chart';
 /**
- * Trendline module helps to predict the market trend using predefined approaches
+ * `Trendline` module is used to render 6 types of trendlines in chart.
  */
@@ -33,3 +33,3 @@ export declare class Trendlines {
     /**
-     * Calculation of exponential Points
+     * Calculation of exponential points
      */
@@ -36,0 +36,0 @@ private setExponentialRange(points, trendline, series);

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

 import { Chart } from '../chart';
 /**
- * Crosshair Module used to render the crosshair for chart.
+ * `Crosshair` module is used to render the crosshair for chart.
  */
@@ -40,3 +40,2 @@ export declare class Crosshair {
      * @return {void}
-     * @private
      */
@@ -43,0 +42,0 @@ crosshair(): void;

src/chart/user-interaction/crosshair.js

@@ -79,3 +79,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper"], function (require, exports, ej2_base_1, helper_1) {
                 var axisTooltipGroup = chart.renderer.createGroup({ 'id': this.elementID + '_crosshair_axis' });
-                options = new helper_1.PathOption(this.elementID + '_HorizontalLine', 'none', crosshair.line.width, crosshair.line.color, 1, null, horizontalCross);
+                options = new helper_1.PathOption(this.elementID + '_HorizontalLine', 'none', crosshair.line.width, crosshair.line.color || chart.themeStyle.crosshairLine, 1, null, horizontalCross);
                 this.renderCrosshairLine(options, crossGroup);
@@ -124,7 +124,7 @@ options.d = verticalCross;
                                 'id': this.elementID + '_axis_tooltip_' + k,
-                                'fill': axis.crosshairTooltip.fill
+                                'fill': axis.crosshairTooltip.fill || chart.themeStyle.crosshairFill
                             });
                             axisGroup.appendChild(pathElement);
                             options = new helper_1.TextOption(this.elementID + '_axis_tooltip_text_' + k, 0, 0, 'start', text);
-                            textElem = helper_1.textElement(options, axis.crosshairTooltip.textStyle, axis.crosshairTooltip.textStyle.color, axisGroup);
+                            textElem = helper_1.textElement(options, axis.crosshairTooltip.textStyle, axis.crosshairTooltip.textStyle.color || chart.themeStyle.crosshairLabel, axisGroup);
                         }
@@ -131,0 +131,0 @@ direction = helper_1.findDirection(this.rx, this.ry, rect, this.arrowLocation, 10, this.isTop, this.isBottom, this.isLeft, this.valueX, this.valueY);

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

@@ -5,5 +5,5 @@ import { ChartLocation, Rect } from '../../common/utils/helper';
 import { Indexes } from '../../common/model/base';
-import { BaseSelection } from '../../common/selection/selection';
+import { BaseSelection } from '../../common/user-interaction/selection';
 /**
- * Selection Module handles the selection for chart.
+ * `Selection` module handles the selection for chart.
  * @private
@@ -53,3 +53,2 @@ */
      * @return {void}
-     * @private
      */
@@ -56,0 +55,0 @@ invokeSelection(chart: Chart): void;

src/chart/user-interaction/selection.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/model/base", "../../common/model/theme", "../../common/model/constants", "../../common/selection/selection"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, helper_1, base_1, theme_1, constants_1, selection_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/model/base", "../../common/model/constants", "../../common/user-interaction/selection"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, helper_1, base_1, constants_1, selection_1) {
     "use strict";
@@ -192,2 +192,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
             var parentClassName;
+            var legendShape;
+            var selectElement = element;
             for (var i = 0; i < children.length; i++) {
@@ -201,5 +203,19 @@ elementClassName = children[i].getAttribute('class') || '';
                 else {
+                    selectElement = children[i];
                     this.removeSvgClass(children[i], this.unselected);
                 }
             }
+            if (this.control.legendModule && this.control.legendSettings.visible) {
+                legendShape = document.getElementById(this.control.element.id + '_chart_legend_shape_' + className.split('_series_')[1]);
+                if (legendShape) {
+                    elementClassName = selectElement.getAttribute('class') || '';
+                    parentClassName = selectElement.parentNode.getAttribute('class') || '';
+                    if (elementClassName.indexOf(className) === -1 && parentClassName.indexOf(className) === -1 && visibility) {
+                        this.addSvgClass(legendShape, this.unselected);
+                    }
+                    else {
+                        this.removeSvgClass(legendShape, this.unselected);
+                    }
+                }
+            }
         };
@@ -293,3 +309,3 @@ Selection.prototype.applyStyles = function (elements) {
             var seriesElements = [series.seriesElement];
-            if (series.marker.visible && !series.isRectSeries) {
+            if (series.marker.visible && series.type !== 'Scatter' && series.type !== 'Bubble' && !series.isRectSeries) {
                 seriesElements.push(series.symbolElement);
@@ -411,5 +427,5 @@ }
             else {
-                var dragGroup = this.renderer.createGroup({ id: this.draggedRectGroup });
+                var dragGroup = chart.renderer.createGroup({ id: this.draggedRectGroup });
                 chart.svgObject.appendChild(dragGroup);
-                element = this.renderer.drawRectangle(new helper_1.RectOption(this.draggedRect, theme_1.Theme.selectionRectFill, { color: theme_1.Theme.selectionRectStroke, width: 1 }, 1, dragRect));
+                element = chart.renderer.drawRectangle(new helper_1.RectOption(this.draggedRect, chart.themeStyle.selectionRectFill, { color: chart.themeStyle.selectionRectStroke, width: 1 }, 1, dragRect));
                 element.setAttribute('style', 'cursor:move;');
@@ -420,12 +436,13 @@ dragGroup.appendChild(element);
         Selection.prototype.createCloseButton = function (x, y) {
-            var closeIcon = this.renderer.createGroup({
+            var closeIcon = this.chart.renderer.createGroup({
                 id: this.closeIconId,
                 style: 'cursor:pointer; visibility: visible;'
             });
-            closeIcon.appendChild(this.renderer.drawCircle(new helper_1.CircleOption(this.closeIconId + '_circle', '#FFFFFF', { color: theme_1.Theme.selectionRectStroke, width: 1 }, 1, x, y, 10)));
+            closeIcon.appendChild(this.chart.renderer.drawCircle(new helper_1.CircleOption(this.closeIconId + '_circle', '#FFFFFF', { color: this.chart.themeStyle.selectionCircleStroke, width: 1 }, 1, x, y, 10)));
             var direction = 'M ' + (x - 4) + ' ' + (y - 4) + ' L ' + (x + 4) + ' ' + (y + 4) + ' M ' + (x - 4) + ' ' + (y + 4) +
                 ' L ' + (x + 4) + ' ' + (y - 4);
-            closeIcon.appendChild(this.renderer.drawPath({
-                id: this.closeIconId + '_cross', d: direction, stroke: theme_1.Theme.selectionRectStroke,
-                'stroke-width': 2, fill: theme_1.Theme.selectionRectStroke
+            closeIcon.appendChild(this.chart.renderer.drawPath({
+                id: this.closeIconId + '_cross', d: direction,
+                stroke: this.chart.themeStyle.selectionCircleStroke,
+                'stroke-width': 2, fill: this.chart.themeStyle.selectionCircleStroke
             }));
@@ -432,0 +449,0 @@ this.closeIcon = closeIcon;

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

 import { Chart } from '../chart';
-import { Data } from '../../chart/utils/get-data';
+import { PointData } from '../../common/utils/helper';
+import { BaseTooltip } from '../../common/user-interaction/tooltip';
 /**
- * Tooltip Module used to render the tooltip for series.
+ * `Tooltip` module is used to render the tooltip for chart series.
  */
-export declare class Tooltip extends Data {
-    private element;
-    private elementSize;
-    private textStyle;
-    private isRemove;
-    private toolTipInterval;
-    private padding;
-    private arrowPadding;
-    private textElements;
-    private templateFn;
-    private rx;
-    private ry;
-    private isComplete;
-    private inverted;
-    private formattedText;
-    private header;
-    private markerPoint;
-    /** @private */
-    valueX: number;
-    /** @private */
-    valueY: number;
-    private tipRadius;
+export declare class Tooltip extends BaseTooltip {
     /**
@@ -49,26 +29,15 @@ * Constructor for tooltip module.
      * @return {void}
-     * @private
      */
     tooltip(): void;
-    private createElement(chart);
-    private getElement(id);
-    private renderPoint(point, isFirst, fill, firstText?);
-    private removeText();
     private findHeader(data);
     private renderSeriesTooltip(chart, isFirst, tooltipDiv);
-    private updateTemplateFn(chart);
-    private createTemplate(chart, data, parent, isFirst);
+    private findData(data, previous);
+    private getSymbolLocation(data);
+    private getTooltipText(pointData);
+    private getTemplateText(data);
     private findMouseValue(data, chart);
     private renderGroupedTooltip(chart, isFirst, tooltipDiv);
-    private renderTooltip(chart, pointData, isFirst);
-    private sharedTooltipLocation(bounds, x, y);
     private getBoxLocation(data);
-    private seriesTooltipLocation(pointData, arrowLocation, tipLocation);
-    private removeHighlight(chart, removeRect?);
-    private highlightPoints(item);
-    private highlightPoint(series, pointIndex, highlight);
-    private getTooltipText(pointData, isFirst?);
-    private renderText(isRender, chart);
-    private changeText(point, isBottom, isRight, rect);
     private drawMarker(isBottom, isRight, size);
+    private findColor(data, series);
     private parseTemplate(point, series, format, xAxis, yAxis);
@@ -78,3 +47,3 @@ private formatPointValue(point, axis, dataValue, isXPoint, isYPoint);
     private getIndicatorTooltipFormat(series, chart, format);
-    private stopAnimation();
+    removeHighlightedMarker(data: PointData[]): void;
     /**
@@ -87,8 +56,2 @@ * Removes the tooltip on mouse leave.
     /**
-     * @hidden
-     */
-    private removeHighlightedMarker(data);
-    private animateTooltipDiv(tooltipDiv, rect);
-    private updateDiv(tooltipDiv, x, y);
-    /**
      * Get module name.
@@ -95,0 +58,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", "../../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", "@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) {
     "use strict";
@@ -19,10 +19,3 @@ 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;
             _this.addEventListener();
-            _this.textStyle = chart.tooltip.textStyle;
             return _this;
@@ -41,4 +34,4 @@ }
         Tooltip.prototype.mouseUpHandler = function () {
-            var chart = this.chart;
-            if (chart.isTouch &&
+            var chart = this.control;
+            if (chart.isTouch && !this.isSelected(chart) &&
                 ((helper_2.withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect) && chart.tooltip.shared)
@@ -60,3 +53,3 @@ || !chart.tooltip.shared)) {
             var chart = this.chart;
-            if (!chart.disableTrackTooltip) {
+            if (!chart.disableTrackTooltip && !this.isSelected(chart)) {
                 if (!chart.tooltip.shared && (!chart.isTouch || (chart.startMove))) {
@@ -86,66 +79,10 @@ this.tooltip();
             var isTooltip = this.getElement(this.element.id + '_tooltip');
-            var tooltipDiv;
-            var chart = this.chart;
-            this.inverted = this.chart.requireInvertedAxis;
-            this.updateTemplateFn(chart);
-            this.formattedText = [];
-            this.header = (chart.tooltip.header === null) ? ((chart.tooltip.shared) ? '<b>${point.x}</b>' : '<b>${series.name}</b>')
-                : (chart.tooltip.header);
-            if (!isTooltip) {
-                tooltipDiv = this.createElement(chart);
+            var tooltipDiv = this.getTooltipElement(isTooltip);
+            if (!this.chart.tooltip.shared) {
+                this.renderSeriesTooltip(this.chart, !isTooltip, tooltipDiv);
             }
-            if (!chart.tooltip.shared) {
-                this.renderSeriesTooltip(chart, !isTooltip, tooltipDiv);
-            }
             else {
-                this.renderGroupedTooltip(chart, !isTooltip, tooltipDiv);
+                this.renderGroupedTooltip(this.chart, !isTooltip, tooltipDiv);
             }
         };
-        Tooltip.prototype.createElement = function (chart) {
-            this.textElements = [];
-            var tooltipDiv = document.createElement('div');
-            tooltipDiv.id = this.element.id + '_tooltip';
-            tooltipDiv.className = 'ejTooltip' + this.element.id;
-            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, 'opacity': chart.tooltip.opacity, 'stroke': chart.tooltip.border.color
-                });
-                groupElement.appendChild(pathElement);
-            }
-            return tooltipDiv;
-        };
-        Tooltip.prototype.getElement = function (id) {
-            return document.getElementById(id);
-        };
-        Tooltip.prototype.renderPoint = function (point, isFirst, fill, firstText) {
-            if (firstText === void 0) { firstText = true; }
-            var argsData = {
-                cancel: false, name: constants_1.tooltipRender, textCollections: this.getTooltipText(point, firstText),
-                point: point.point, series: point.series, textStyle: this.textStyle
-            };
-            this.chart.trigger(constants_1.tooltipRender, argsData);
-            if (!argsData.cancel) {
-                if (point.series.type === 'BoxAndWhisker') {
-                    this.removeText();
-                    isFirst = true;
-                }
-                this.formattedText = this.formattedText.concat(argsData.textCollections);
-            }
-            return !argsData.cancel;
-        };
-        Tooltip.prototype.removeText = function () {
-            this.textElements = [];
-            var element = this.getElement(this.element.id + '_tooltip_group');
-            if (element.childNodes.length > 0) {
-                while (element.lastChild && element.childNodes.length !== 1) {
-                    element.removeChild(element.lastChild);
-                }
-            }
-        };
         Tooltip.prototype.findHeader = function (data) {
@@ -159,12 +96,9 @@ this.header = this.parseTemplate(data.point, data.series, this.header, data.series.xAxis, data.series.yAxis);
             var data = this.getData();
+            var markerSide;
             data.lierIndex = this.lierIndex;
+            var rect = chart.chartAxisLayoutPanel.seriesClipRect;
             this.currentPoints = [];
-            if (data.point && ((!this.previousPoints[0] || (this.previousPoints[0].point !== data.point)) ||
-                (this.previousPoints[0] && this.previousPoints[0].lierIndex > 3 && this.previousPoints[0].lierIndex !== this.lierIndex))) {
-                this.currentPoints.push(data);
-                if (data.series.enableTooltip) {
-                    this.stopAnimation();
-                    if (isFirst) {
-                        document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);
-                    }
+            if (this.findData(data, this.previousPoints[0])) {
+                if (this.pushData(data, isFirst, tooltipDiv, true)) {
+                    var text = this.getTooltipText(data);
                     if (!chart.tooltip.template) {
@@ -174,16 +108,9 @@ if (this.header !== '') {
                         }
-                        if (this.renderPoint(data, isFirst, this.textStyle.color || '#212121')) {
-                            this.renderText(isFirst, chart);
-                            this.removeHighlight(chart);
-                            this.highlightPoints(data);
-                            this.renderTooltip(chart, data, isFirst);
+                        markerSide = this.renderTooltip(data, rect, this.getSymbolLocation(data), text, isFirst, chart.chartAreaType === 'Cartesian');
+                        if (markerSide) {
+                            this.drawMarker(markerSide.isBottom, markerSide.isRight, 10);
                         }
-                        else {
-                            this.removeHighlight(chart);
-                            this.getElement(this.element.id + '_tooltip').remove();
-                        }
                     }
                     else {
-                        this.removeHighlight(chart);
-                        this.createTemplate(chart, data, this.getElement(this.element.id + '_tooltip'), isFirst);
+                        this.renderTemplate(data, rect, this.getSymbolLocation(data), this.getTemplateText(data), isFirst);
                     }
@@ -212,23 +139,16 @@ this.isRemove = true;
         };
-        Tooltip.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());
-                    }
-                }
-                catch (e) {
-                    this.templateFn = ej2_base_2.compile(chart.tooltip.template);
-                }
-            }
+        Tooltip.prototype.findData = function (data, previous) {
+            return data.point && ((!previous || (previous.point !== data.point)) ||
+                (previous && previous.lierIndex > 3 && previous.lierIndex !== this.lierIndex));
         };
-        Tooltip.prototype.createTemplate = function (chart, data, parent, isFirst) {
-            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();
-            }
+        Tooltip.prototype.getSymbolLocation = function (data) {
+            return data.series.type === 'BoxAndWhisker' ?
+                this.getBoxLocation(data) : data.point.symbolLocations[0];
+        };
+        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);
@@ -243,25 +163,3 @@ point.x = this.formatPointValue(data.point, data.series.xAxis, 'x', true, false);
             }
-            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, 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();
-            }
+            return point;
         };
@@ -295,2 +193,3 @@ Tooltip.prototype.findMouseValue = function (data, chart) {
             var extraPoints = [];
+            var markerSide;
             if (isFirst) {
@@ -314,3 +213,3 @@ document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);
                 }
-                if (data && this.renderPoint(data, true, this.textStyle.color || data.point.color, this.currentPoints.length === 0)) {
+                if (data && this.triggerEvent(data, isFirst, this.getTooltipText(data))) {
                     if (series.category === 'Series') {
@@ -327,5 +226,6 @@ this.highlightPoints(data);
             }
-            this.renderText(isFirst, chart);
             if (this.currentPoints.length > 0) {
-                this.renderTooltip(chart, this.currentPoints[0], isFirst);
+                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);
             }
@@ -338,94 +238,2 @@ else {
         };
-        Tooltip.prototype.renderTooltip = function (chart, pointData, 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;
-            var location = pointData.series.type === 'BoxAndWhisker' ?
-                this.getBoxLocation(pointData) : pointData.point.symbolLocations[0];
-            this.tipRadius = 1;
-            var series = pointData.series;
-            var point = pointData.point;
-            if (this.header !== '') {
-                this.elementSize.height += 5;
-            }
-            if (this.currentPoints.length > 1) {
-                this.arrowPadding = 0;
-                rect = this.sharedTooltipLocation(chart.chartAxisLayoutPanel.seriesClipRect, this.valueX, this.valueY);
-                isTop = true;
-            }
-            else {
-                this.arrowPadding = 12;
-                rect = this.seriesTooltipLocation(pointData, arrowLocation, tipLocation);
-                if (!this.inverted || !series.isRectSeries) {
-                    isTop = (rect.y < (location.y + (chart.chartAreaType === 'Cartesian' ? 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': '#ffffff', '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);
-        };
-        Tooltip.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;
-        };
         Tooltip.prototype.getBoxLocation = function (data) {
@@ -440,240 +248,9 @@ var location;
         };
-        Tooltip.prototype.seriesTooltipLocation = function (pointData, arrowLocation, tipLocation) {
-            var series = pointData.series;
-            var isBoxPlot = series.type === 'BoxAndWhisker';
-            var symbolLocation = isBoxPlot ? this.getBoxLocation(pointData) : pointData.point.symbolLocations[0];
-            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 bounds = this.chart.chartAxisLayoutPanel.seriesClipRect;
-            var markerHeight = 0;
-            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;
-            }
-            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);
-        };
-        Tooltip.prototype.removeHighlight = function (chart, removeRect) {
-            if (removeRect === void 0) { removeRect = false; }
-            var item;
-            for (var i = 0, len = this.previousPoints.length; i < len; i++) {
-                item = this.previousPoints[i];
-                if (item.series.isRectSeries && item.series.visible) {
-                    this.highlightPoint(item.series, item.point.index, false);
-                    continue;
-                }
-                if (!item.series.marker.visible && item.series.type !== 'Scatter' && item.series.type !== 'Bubble') {
-                    this.previousPoints.shift();
-                    len -= 1;
-                }
-            }
-        };
-        Tooltip.prototype.highlightPoints = function (item) {
-            if (item.series.isRectSeries) {
-                this.highlightPoint(item.series, item.point.index, true);
-                return null;
-            }
-        };
-        Tooltip.prototype.highlightPoint = function (series, pointIndex, highlight) {
-            var element = this.getElement(this.element.id + '_Series_' + series.index + '_Point_' + pointIndex);
-            if (element) {
-                element.setAttribute('opacity', (highlight ? series.opacity / 2 : series.opacity).toString());
-            }
-        };
-        Tooltip.prototype.getTooltipText = function (pointData, isFirst) {
-            if (isFirst === void 0) { isFirst = true; }
-            var series = pointData.series;
-            var text;
-            return this.parseTemplate(pointData.point, series, this.getFormat(this.chart, series), series.xAxis, series.yAxis);
-        };
-        Tooltip.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 || '#ffffff');
-                            }
-                            else {
-                                tspanStyle = '';
-                                font.fontWeight = 'Normal';
-                                (tspanElement).setAttribute('fill', chart.tooltip.textStyle.color || '#dbdbdb');
-                            }
-                            (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());
-            }
-        };
-        Tooltip.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)');
-            }
-            this.drawMarker(isBottom, isRight, 10);
-        };
         Tooltip.prototype.drawMarker = function (isBottom, isRight, size) {
+            var shapeOption;
             var count = 0;
-            var shapeOption;
+            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 markerGroup = this.chart.renderer.createGroup({ id: this.element.id + '_tooltip_trackball_group' });
             var x = (this.padding * 2) + (size / 2) + (isRight ? this.arrowPadding : 0);
-            var series;
             for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {
@@ -683,5 +260,4 @@ var data = _a[_i];
                 if (series.visible && series.enableTooltip && data.point.visible) {
-                    shapeOption = new helper_2.PathOption(this.element.id + '_Tooltip_Trackball_' + series.index, series.marker.fill || data.point.interior ||
-                        ((data.point && data.point.color && data.point.color !== '#ffffff') ? data.point.color : 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)), series.marker.shape, new helper_1.Size(size, size), series.marker.imageUrl, shapeOption, null));
+                    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++;
@@ -692,2 +268,10 @@ }
         };
+        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) {
@@ -781,4 +365,12 @@ var val;
         };
-        Tooltip.prototype.stopAnimation = function () {
-            helper_2.stopTimer(this.toolTipInterval);
+        Tooltip.prototype.removeHighlightedMarker = function (data) {
+            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');
+            }
+            if (this.chart.markerRender) {
+                this.chart.markerRender.removeHighlightedMarker();
+            }
+            this.previousPoints = [];
         };
@@ -791,10 +383,10 @@ Tooltip.prototype.removeTooltip = function (duration) {
             if (tooltipElement && this.previousPoints.length > 0) {
-                var data_1 = this.previousPoints;
+                var data_2 = this.previousPoints;
                 this.toolTipInterval = setTimeout(function () {
-                    var series = data_1[0].series;
+                    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;
-                    var element = _this.getElement(chart.element.id + '_Series_' + data_1[0].series.index
-                        + '_Point_' + data_1[0].point.index);
-                    var rectOpacity;
                     if (element && series.isRectSeries && !chart.tooltip.shared) {
@@ -806,7 +398,3 @@ rectOpacity = parseFloat(element.getAttribute('opacity'));
                         progress: function (args) {
-                            tooltipGroup.style.animation = '';
-                            tooltipGroup.setAttribute('opacity', (opacity - (args.timeStamp / args.duration)).toString());
-                            if (element && series.isRectSeries && !chart.tooltip.shared) {
-                                element.setAttribute('opacity', (rectOpacity + (rectOpacity * (args.timeStamp / args.duration))).toString());
-                            }
+                            _this.progressAnimation(element, tooltipGroup, series, opacity, rectOpacity, (args.timeStamp / args.duration), series.isRectSeries, !chart.tooltip.shared);
                         },
@@ -816,14 +404,4 @@ end: function (model) {
                             _this.valueY = null;
-                            _this.currentPoints = [];
-                            if (element && series.isRectSeries && !chart.tooltip.shared) {
-                                element.setAttribute('opacity', series.opacity.toString());
-                            }
-                            _this.removeHighlight(chart, chart.tooltip.shared);
-                            _this.removeHighlightedMarker(data_1);
-                            tooltipGroup.setAttribute('opacity', '0');
-                            if (chart.tooltip.template && !chart.tooltip.shared) {
-                                tooltipGroup.style.display = 'none';
-                            }
-                            chart.trigger('animationComplete', {});
-                            _this.isComplete = true;
+                            _this.endAnimation(element, tooltipGroup, series, chart.tooltip.shared);
+                            _this.removeHighlightedMarker(data_2);
                         }
@@ -834,35 +412,2 @@ });
         };
-        Tooltip.prototype.removeHighlightedMarker = function (data) {
-            for (var _i = 0, data_2 = data; _i < data_2.length; _i++) {
-                var item = data_2[_i];
-                helper_2.removeElement(this.element.id + '_Series_' + item.series.index +
-                    '_Point_' + item.point.index + '_Trackball');
-            }
-            if (this.chart.markerRender) {
-                this.chart.markerRender.removeHighlightedMarker();
-            }
-            this.previousPoints = [];
-        };
-        Tooltip.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);
-                }
-            });
-        };
-        Tooltip.prototype.updateDiv = function (tooltipDiv, x, y) {
-            tooltipDiv.style.left = x + 'px';
-            tooltipDiv.style.top = y + 'px';
-        };
         Tooltip.prototype.getModuleName = function () {
@@ -874,4 +419,4 @@ return 'Tooltip';
         return Tooltip;
-    }(get_data_1.Data));
+    }(tooltip_1.BaseTooltip));
     exports.Tooltip = Tooltip;
 });

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

@@ -7,3 +7,3 @@ import { Chart } from '../chart';
 /**
- * Zooming Module handles the zooming for chart.
+ * `Zooming` module handles the zooming for chart.
  */
@@ -42,2 +42,4 @@ export declare class Zoom {
     isIOS: Boolean;
+    /** @private */
+    performedUI: boolean;
     private zoomkitOpacity;
@@ -54,3 +56,2 @@ private wheelEvent;
      * @return {void}
-     * @private
      */
@@ -90,2 +91,8 @@ renderZooming(e: PointerEvent | TouchEvent, chart: Chart, isTouch: boolean): void;
     applyZoomToolkit(chart: Chart, axes: AxisModel[]): void;
+    /**
+     * Return boolean property to show zooming toolkit.
+     * @return {void}
+     * @private
+     */
+    isAxisZoomed(axes: AxisModel[]): boolean;
     private zoomToolkitMove(e);
@@ -92,0 +99,0 @@ private zoomToolkitLeave(e);

src/chart/user-interaction/zooming.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "./zooming-toolkit", "../../common/model/theme", "../../common/model/constants", "../../common/utils/helper"], function (require, exports, ej2_base_1, helper_1, zooming_toolkit_1, theme_1, constants_1, helper_2) {
+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) {
     "use strict";
@@ -27,2 +27,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 this.isPanning = this.isDevice ? true : this.isPanning;
+                this.performedUI = true;
                 this.drawZoomingRectangle(chart);
@@ -36,3 +37,2 @@ }
             }
-            chart.startMove = (chart.startMove) ? !this.isPanning : chart.startMove;
         };
@@ -56,6 +56,9 @@ Zoom.prototype.drawZoomingRectangle = function (chart) {
                 }
-                chart.svgObject.appendChild(chart.renderer.drawRectangle(new helper_1.RectOption(this.elementId + '_ZoomArea', theme_1.Theme.selectionRectFill, { color: theme_1.Theme.selectionRectStroke, width: 1 }, 1, rect, 0, 0, '', '3')));
+                chart.svgObject.appendChild(chart.renderer.drawRectangle(new helper_1.RectOption(this.elementId + '_ZoomArea', chart.themeStyle.selectionRectFill, { color: chart.themeStyle.selectionRectStroke, width: 1 }, 1, rect, 0, 0, '', '3')));
             }
         };
         Zoom.prototype.doPan = function (chart, axes) {
+            if (chart.startMove && chart.crosshair.enable) {
+                return null;
+            }
             var currentScale;
@@ -105,2 +108,3 @@ var offset;
                 if (rect.width > 0 && rect.height > 0) {
+                    this.performedUI = true;
                     chart.svgObject.setAttribute('cursor', 'auto');
@@ -139,2 +143,3 @@ this.doZoom(chart, chart.axisCollections, chart.chartAxisLayoutPanel.seriesClipRect);
             var currentZP;
+            this.isPanning = chart.zoomSettings.enablePan || this.isPanning;
             axes.forEach(function (axis) {
@@ -184,2 +189,4 @@ previousZF = currentZF = axis.zoomFactor;
             chart.disableTrackTooltip = true;
+            this.performedUI = true;
+            this.isPanning = chart.zoomSettings.enablePan || this.isPanning;
             axes.forEach(function (axis) {
@@ -205,3 +212,3 @@ if ((axis.orientation === 'Vertical' && mode !== 'X') ||
         Zoom.prototype.performPinchZooming = function (e, chart) {
-            if (this.zoomingRect.width > 0 && this.zoomingRect.height > 0) {
+            if ((this.zoomingRect.width > 0 && this.zoomingRect.height > 0) || (chart.startMove && chart.crosshair.enable)) {
                 return false;
@@ -212,2 +219,3 @@ }
             this.isPanning = true;
+            this.performedUI = true;
             this.offset = !chart.delayRedraw ? chart.chartAxisLayoutPanel.seriesClipRect : this.offset;
@@ -256,3 +264,2 @@ chart.delayRedraw = true;
             this.refreshAxis(chart.chartAxisLayoutPanel, chart, chart.axisCollections);
-            chart.startMove = (chart.startMove) ? !this.isPanning : chart.startMove;
             return true;
@@ -297,2 +304,5 @@ };
             chart.seriesElements.setAttribute('clip-path', 'url(#' + this.elementId + '_ChartAreaClipRect_)');
+            if (chart.indicatorElements) {
+                chart.indicatorElements.setAttribute('clip-path', 'url(#' + this.elementId + '_ChartAreaClipRect_)');
+            }
             var translate;
@@ -309,3 +319,8 @@ var xAxisLoc;
                     translate = (scaleX || scaleY) ? translate + ' scale(' + scaleX + ' ' + scaleY + ')' : translate;
-                    value.seriesElement.setAttribute('transform', translate);
+                    if (value.category === 'Indicator') {
+                        value.seriesElement.parentElement.setAttribute('transform', translate);
+                    }
+                    else {
+                        value.seriesElement.setAttribute('transform', translate);
+                    }
                     element = helper_1.getElement(chart.element.id + '_Series_' + value.index + '_DataLabelCollections');
@@ -422,6 +437,3 @@ if (value.errorBarElement) {
         Zoom.prototype.applyZoomToolkit = function (chart, axes) {
-            var showToolkit = false;
-            axes.forEach(function (axis) {
-                showToolkit = (showToolkit || (axis.zoomFactor !== 1 || axis.zoomPosition !== 0));
-            });
+            var showToolkit = this.isAxisZoomed(axes);
             if (showToolkit) {
@@ -435,4 +447,12 @@ this.showZoomingToolkit(chart);
                 this.isZoomed = false;
+                chart.svgObject.setAttribute('cursor', 'auto');
             }
         };
+        Zoom.prototype.isAxisZoomed = function (axes) {
+            var showToolkit = false;
+            axes.forEach(function (axis) {
+                showToolkit = (showToolkit || (axis.zoomFactor !== 1 || axis.zoomPosition !== 0));
+            });
+            return showToolkit;
+        };
         Zoom.prototype.zoomToolkitMove = function (e) {
@@ -439,0 +459,0 @@ var element = this.toolkitElements;

src/chart/utils/enum.d.ts

@@ -235,3 +235,3 @@ /**
  */
-export declare type ChartTheme = 'Material' | 'Fabric' | 'Bootstrap';
+export declare type ChartTheme = 'Material' | 'Fabric' | 'Bootstrap' | 'Highcontrast';
 /**
@@ -238,0 +238,0 @@ *  Specifies the order of the strip line. `Over` | `Behind`.

src/chart/utils/get-data.d.ts

 import { Chart } from '../chart';
-import { PointData } from '../../common/utils/helper';
+import { PointData, AccPointData } from '../../common/utils/helper';
 import { Series } from '../series/chart-series';
@@ -8,3 +8,3 @@ /**
  */
-export declare class Data {
+export declare class ChartData {
     /** @private */
@@ -14,5 +14,5 @@ chart: Chart;
     /** @private */
-    currentPoints: PointData[];
+    currentPoints: PointData[] | AccPointData[];
     /** @private */
-    previousPoints: PointData[];
+    previousPoints: PointData[] | AccPointData[];
     /**
@@ -28,2 +28,3 @@ * Constructor for the data.
     getData(): PointData;
+    isSelected(chart: Chart): boolean;
     private getRectPoint(series, rect, x, y);
@@ -30,0 +31,0 @@ /**

src/chart/utils/get-data.js

 define(["require", "exports", "../../common/utils/helper"], function (require, exports, helper_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var Data = (function () {
-        function Data(chart) {
+    var ChartData = (function () {
+        function ChartData(chart) {
             this.currentPoints = [];
@@ -11,3 +11,3 @@ this.previousPoints = [];
         }
-        Data.prototype.getData = function () {
+        ChartData.prototype.getData = function () {
             var chart = this.chart;
@@ -33,3 +33,6 @@ var point = null;
         };
-        Data.prototype.getRectPoint = function (series, rect, x, y) {
+        ChartData.prototype.isSelected = function (chart) {
+            return (chart.selectionMode.indexOf('Drag') > -1 && chart.selectionModule && chart.selectionModule.rectPoints !== null);
+        };
+        ChartData.prototype.getRectPoint = function (series, rect, x, y) {
             var currentRect;
@@ -78,3 +81,3 @@ var fromCenterX;
         };
-        Data.prototype.checkRegionContainsPoint = function (regionRect, rect, x, y) {
+        ChartData.prototype.checkRegionContainsPoint = function (regionRect, rect, x, y) {
             var _this = this;
@@ -86,3 +89,3 @@ return regionRect.some(function (region, index) {
         };
-        Data.prototype.getClosest = function (series, value) {
+        ChartData.prototype.getClosest = function (series, value) {
             var xData = series.xData;
@@ -100,3 +103,3 @@ var closest;
         };
-        Data.prototype.getClosestX = function (chart, series) {
+        ChartData.prototype.getClosestX = function (chart, series) {
             var value;
@@ -119,5 +122,5 @@ var rect = series.clipRect;
         };
-        return Data;
+        return ChartData;
     }());
-    exports.Data = Data;
+    exports.ChartData = ChartData;
 });

src/common/annotation/annotation.d.ts

@@ -39,2 +39,9 @@ import { Chart } from '../../chart/chart';
     /**
+     * To process the annotation for accumulation chart
+     * @param annotation
+     * @param index
+     * @param parentElement
+     */
+    processAnnotation(annotation: ChartAnnotationSettings | AccumulationAnnotationSettings, index: number, parentElement: HTMLElement): void;
+    /**
      * Method to calculate the location for annotation - coordinate unit as point in accumulation chart.
@@ -41,0 +48,0 @@ * @private

src/common/annotation/annotation.js

@@ -87,2 +87,11 @@ define(["require", "exports", "../utils/helper", "../utils/helper", "../utils/helper", "@syncfusion/ej2-base", "../model/constants", "@syncfusion/ej2-data"], function (require, exports, helper_1, helper_2, helper_3, ej2_base_1, constants_1, ej2_data_1) {
         };
+        AnnotationBase.prototype.processAnnotation = function (annotation, index, parentElement) {
+            var annotationElement;
+            var location;
+            location = new helper_2.ChartLocation(0, 0);
+            annotationElement = this.render(annotation, index);
+            if (this['setAnnotation' + annotation.coordinateUnits + 'Value'](location)) {
+                this.setElementStyle(location, annotationElement, parentElement);
+            }
+        };
         AnnotationBase.prototype.setAccumulationPointValue = function (location) {
@@ -89,0 +98,0 @@ var accumulation = this.control;

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

@@ -10,3 +10,3 @@ import { Property, Complex, ChildProperty} from '@syncfusion/ej2-base';import { Chart } from '../../chart';import { Font, Border } from '../model/base';import { Theme } from '../model/theme';import { FontModel, BorderModel } from '../model/base-model';import { Size, Rect, subtractThickness, Thickness, drawSymbol, measureText, ChartLocation, PathOption } from '../utils/helper';import { RectOption, TextOption, textElement, stringToNumber, removeElement, showTooltip, getElement } from '../utils/helper';import { LegendPosition, LegendShape, ChartSeriesType, ChartShape } from '../../chart/utils/enum';import { Legend } from '../../chart/legend/legend';import { AccumulationType } from '../../accumulation-chart/model/enum';import { AccumulationChart } from '../../accumulation-chart/accumulation';import { AccumulationLegend } from '../../accumulation-chart/renderer/legend';import { Alignment } from '../utils/enum';
      * X coordinate of the legend in pixels.
-     * @default 0.
+     * @default 0
      */
@@ -17,3 +17,3 @@ x?: number;
      * Y coordinate of the legend in pixels.
-     * @default 0.
+     * @default 0
      */
@@ -31,3 +31,3 @@ y?: number;
      * If set to true, legend will be visible.
-     * @default true.
+     * @default true
      */
@@ -38,3 +38,3 @@ visible?: boolean;
      * The height of the legend in pixels.
-     * @default null.
+     * @default null
      */
@@ -45,3 +45,3 @@ height?: string;
      * The width of the legend in pixels.
-     * @default null.
+     * @default null
      */
@@ -73,9 +73,9 @@ width?: string;
      * Position of the legend in the chart are,
-     * * auto: Places the legend based on area type.
-     * * top: Displays the legend at the top of the chart.
-     * * left: Displays the legend at the left of the chart.
-     * * bottom: Displays the legend at the bottom of the chart.
-     * * right: Displays the legend at the right of the chart.
-     * * custom: Displays the legend  based on the given x and y values.
-     * @default 'Auto'.
+     * * Auto: Places the legend based on area type.
+     * * Top: Displays the legend at the top of the chart.
+     * * Left: Displays the legend at the left of the chart.
+     * * Bottom: Displays the legend at the bottom of the chart.
+     * * Right: Displays the legend at the right of the chart.
+     * * Custom: Displays the legend  based on the given x and y values.
+     * @default 'Auto'
      */
@@ -86,3 +86,3 @@ position?: LegendPosition;
      * Option to customize the padding between legend items.
-     * @default 8.
+     * @default 8
      */
@@ -93,6 +93,6 @@ padding?: number;
      * Legend in chart can be aligned as follows:
-     * * near: Aligns the legend to the left of the chart.
-     * * center: Aligns the legend to the center of the chart.
-     * * far: Aligns the legend to the right of the chart.
-     * @default 'Center'.
+     * * Near: Aligns the legend to the left of the chart.
+     * * Center: Aligns the legend to the center of the chart.
+     * * Far: Aligns the legend to the right of the chart.
+     * @default 'Center'
      */
@@ -108,3 +108,3 @@ alignment?: Alignment;
      * Shape height of the legend in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -115,3 +115,3 @@ shapeHeight?: number;
      * Shape width of the legend in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -127,3 +127,3 @@ shapeWidth?: number;
      * Padding between the legend shape and text.
-     * @default 5.
+     * @default 5
      */
@@ -134,3 +134,3 @@ shapePadding?: number;
      * The background color of the legend that accepts value in hex and rgba as a valid CSS color string.
-     * @default 'transparent'.
+     * @default 'transparent'
      */
@@ -141,3 +141,3 @@ background?: string;
      * Opacity of the legend.
-     * @default 1.
+     * @default 1
      */
@@ -148,3 +148,3 @@ opacity?: number;
      * If set to true, series' visibility collapses based on the legend visibility.
-     * @default true.
+     * @default true
      */
@@ -155,3 +155,3 @@ toggleVisibility?: boolean;
      * Description for legends.
-     * @default null.
+     * @default null
      */
@@ -162,3 +162,3 @@ description?: string;
      * TabIndex value for the legend.
-     * @default 3.
+     * @default 3
      */
@@ -165,0 +165,0 @@ tabIndex?: number;

src/common/legend/legend.d.ts

@@ -18,3 +18,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * X coordinate of the legend in pixels.
-     * @default 0.
+     * @default 0
      */
@@ -24,3 +24,3 @@ x: number;
      * Y coordinate of the legend in pixels.
-     * @default 0.
+     * @default 0
      */
@@ -35,3 +35,3 @@ y: number;
      * If set to true, legend will be visible.
-     * @default true.
+     * @default true
      */
@@ -41,3 +41,3 @@ visible: boolean;
      * The height of the legend in pixels.
-     * @default null.
+     * @default null
      */
@@ -47,3 +47,3 @@ height: string;
      * The width of the legend in pixels.
-     * @default null.
+     * @default null
      */
@@ -73,9 +73,9 @@ width: string;
      * Position of the legend in the chart are,
-     * * auto: Places the legend based on area type.
-     * * top: Displays the legend at the top of the chart.
-     * * left: Displays the legend at the left of the chart.
-     * * bottom: Displays the legend at the bottom of the chart.
-     * * right: Displays the legend at the right of the chart.
-     * * custom: Displays the legend  based on the given x and y values.
-     * @default 'Auto'.
+     * * Auto: Places the legend based on area type.
+     * * Top: Displays the legend at the top of the chart.
+     * * Left: Displays the legend at the left of the chart.
+     * * Bottom: Displays the legend at the bottom of the chart.
+     * * Right: Displays the legend at the right of the chart.
+     * * Custom: Displays the legend  based on the given x and y values.
+     * @default 'Auto'
      */
@@ -85,3 +85,3 @@ position: LegendPosition;
      * Option to customize the padding between legend items.
-     * @default 8.
+     * @default 8
      */
@@ -91,6 +91,6 @@ padding: number;
      * Legend in chart can be aligned as follows:
-     * * near: Aligns the legend to the left of the chart.
-     * * center: Aligns the legend to the center of the chart.
-     * * far: Aligns the legend to the right of the chart.
-     * @default 'Center'.
+     * * Near: Aligns the legend to the left of the chart.
+     * * Center: Aligns the legend to the center of the chart.
+     * * Far: Aligns the legend to the right of the chart.
+     * @default 'Center'
      */
@@ -104,3 +104,3 @@ alignment: Alignment;
      * Shape height of the legend in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -110,3 +110,3 @@ shapeHeight: number;
      * Shape width of the legend in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -120,3 +120,3 @@ shapeWidth: number;
      * Padding between the legend shape and text.
-     * @default 5.
+     * @default 5
      */
@@ -126,3 +126,3 @@ shapePadding: number;
      * The background color of the legend that accepts value in hex and rgba as a valid CSS color string.
-     * @default 'transparent'.
+     * @default 'transparent'
      */
@@ -132,3 +132,3 @@ background: string;
      * Opacity of the legend.
-     * @default 1.
+     * @default 1
      */
@@ -138,3 +138,3 @@ opacity: number;
      * If set to true, series' visibility collapses based on the legend visibility.
-     * @default true.
+     * @default true
      */
@@ -144,3 +144,3 @@ toggleVisibility: boolean;
      * Description for legends.
-     * @default null.
+     * @default null
      */
@@ -150,3 +150,3 @@ description: string;
      * TabIndex value for the legend.
-     * @default 3.
+     * @default 3
      */
@@ -153,0 +153,0 @@ tabIndex: number;

src/common/legend/legend.js

@@ -272,3 +272,3 @@ var __extends = (this && this.__extends) || (function () {
             textOptions.id = this.legendID + this.generateId(legendOption, '_text_', i);
-            var fontcolor = legendOption.visible ? legend.textStyle.color : hiddenColor;
+            var fontcolor = legendOption.visible ? legend.textStyle.color || chart.themeStyle.legendLabel : hiddenColor;
             textOptions.text = legendOption.text;
@@ -361,4 +361,3 @@ textOptions.x = legendOption.location.x + (legend.shapeWidth / 2) + legend.shapePadding;
                         else {
-                            var location_1 = this.chart.removeSvgOffset(x, y);
-                            helper_2.showTooltip(this.chart.visibleSeries[0].points[index].x.toString(), location_1.x + 10, location_1.y + 10, element.offsetWidth, element.id + '_EJ2_Legend_Tooltip', helper_2.getElement(this.chart.element.id + '_Secondary_Element'));
+                            helper_2.showTooltip(this.chart.visibleSeries[0].points[index].x.toString(), x + 10, y + 10, element.offsetWidth, element.id + '_EJ2_Legend_Tooltip', helper_2.getElement(this.chart.element.id + '_Secondary_Element'));
                         }
@@ -365,0 +364,0 @@ }

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

@@ -1,2 +0,2 @@
-import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { EmptyPointMode} from '../../chart/utils/enum';import { AccEmptyPointMode, ConnectorType} from '../../accumulation-chart/model/enum';import { Alignment, TextOverflow } from '../utils/enum';
+import { 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';
 
@@ -12,2 +12,3 @@ /**
      * * Line
+     * @default 'Line'
      */
@@ -18,2 +19,3 @@ type?: ConnectorType;
      * Color of the connector line.
+     * @default null
      */
@@ -24,2 +26,3 @@ color?: string;
      * Width of the connector line in pixels.
+     * @default 1
      */
@@ -30,2 +33,3 @@ width?: number;
      * Length of the connector line in pixels.
+     * @default null
      */
@@ -36,2 +40,3 @@ length?: string;
      * dashArray of the connector line.
+     * @default ''
      */
@@ -49,2 +54,3 @@ dashArray?: string;
      * Font size for the text.
+     * @default '16px'
      */
@@ -55,2 +61,3 @@ size?: string;
      * Color for the text.
+     * @default ''
      */
@@ -66,2 +73,3 @@ color?: string;
      * FontWeight for the text.
+     * @default 'Normal'
      */
@@ -72,2 +80,3 @@ fontWeight?: string;
      * FontStyle for the text.
+     * @default 'Normal'
      */
@@ -78,2 +87,3 @@ fontStyle?: string;
      * Opacity for the text.
+     * @default 1
      */
@@ -84,2 +94,3 @@ opacity?: number;
      * text alignment
+     * @default 'Center'
      */
@@ -90,2 +101,3 @@ textAlignment?: Alignment;
      * Specifies the chart title text overflow
+     * @default 'Trim'
      */
@@ -103,2 +115,3 @@ textOverflow?: TextOverflow;
      * The color of the border that accepts value in hex and rgba as a valid CSS color string.
+     * @default ''
      */
@@ -109,2 +122,3 @@ color?: string;
      * The width of the border in pixels.
+     * @default 1
      */
@@ -127,3 +141,3 @@ width?: number;
      * The background of the chart area that accepts value in hex and rgba as a valid CSS color string..
-     * @default transparent.
+     * @default transparent
      */
@@ -134,3 +148,3 @@ background?: string;
      * The opacity for background.
-     * @default 1.
+     * @default 1
      */
@@ -148,3 +162,3 @@ opacity?: number;
      * Left margin in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -155,3 +169,3 @@ left?: number;
      * Right margin in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -162,3 +176,3 @@ right?: number;
      * Top margin in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -169,3 +183,3 @@ top?: number;
      * Bottom margin in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -183,3 +197,3 @@ bottom?: number;
      * If set to true, series gets animated on initial loading.
-     * @default true.
+     * @default true
      */
@@ -191,3 +205,3 @@
      * The duration of animation in milliseconds.
-     * @default 1000.
+     * @default 1000
      */
@@ -199,3 +213,3 @@
      * The option to delay animation of the series.
-     * @default 0.
+     * @default 0
      */
@@ -215,2 +229,3 @@
      * Specifies the series index
+     * @default 0
      */
@@ -221,2 +236,3 @@ series?: number;
      * Specifies the point index
+     * @default 0
      */
@@ -234,2 +250,3 @@ point?: number;
      * Specifies the top left corner radius value
+     * @default 0
      */
@@ -240,2 +257,3 @@ topLeft?: number;
      * Specifies the top right corner radius value
+     * @default 0
      */
@@ -246,2 +264,3 @@ topRight?: number;
      * Specifies the bottom left corner radius value
+     * @default 0
      */
@@ -252,2 +271,3 @@ bottomLeft?: number;
      * Specifies the bottom right corner radius value
+     * @default 0
      */
@@ -273,2 +293,3 @@ bottomRight?: number;
      * To customize the fill color of empty points.
+     * @default null
      */
@@ -279,2 +300,3 @@ fill?: string;
      * Options to customize the border of empty points.
+     * @default "{color: 'transparent', width: 0}"
      */
@@ -289,2 +311,72 @@ border?: BorderModel;
 
+}
+
+/**
+ * Interface for a class TooltipSettings
+ */
+export interface TooltipSettingsModel {
+
+    /**
+     * Enables / Disables the visibility of the tooltip.
+     * @default false.
+     */
+
+    enable?: boolean;
+
+    /**
+     * If set to true, a single ToolTip will be displayed for every index.
+     * @default false.
+     */
+
+    shared?: boolean;
+
+    /**
+     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string. 
+     */
+
+    fill?: string;
+
+    /**
+     * Header for tooltip. 
+     */
+
+    header?: string;
+
+    /**
+     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string. 
+     */
+
+    opacity?: number;
+
+    /**
+     * Options to customize the ToolTip text.
+     */
+
+    textStyle?: FontModel;
+
+    /**
+     * Format the ToolTip content.
+     * @default null.
+     */
+
+    format?: string;
+
+    /**
+     * Custom template to format the ToolTip content. Use ${x} and ${y} as the placeholder text to display the corresponding data point.
+     * @default null.
+     */
+
+    template?: string;
+
+    /**
+     * If set to true, ToolTip will animate while moving from one point to another.
+     * @default true.
+     */
+    enableAnimation?: boolean;
+
+    /**
+     * Options to customize tooltip borders.
+     */
+    border?: BorderModel;
+
 }

src/common/model/base.d.ts

 import { ChildProperty } from '@syncfusion/ej2-base';
-import { BorderModel } from './base-model';
+import { BorderModel, FontModel } from './base-model';
 import { EmptyPointMode } from '../../chart/utils/enum';
@@ -14,2 +14,3 @@ import { AccEmptyPointMode, ConnectorType } from '../../accumulation-chart/model/enum';
      * * Line
+     * @default 'Line'
      */
@@ -19,2 +20,3 @@ type: ConnectorType;
      * Color of the connector line.
+     * @default null
      */
@@ -24,2 +26,3 @@ color: string;
      * Width of the connector line in pixels.
+     * @default 1
      */
@@ -29,2 +32,3 @@ width: number;
      * Length of the connector line in pixels.
+     * @default null
      */
@@ -34,2 +38,3 @@ length: string;
      * dashArray of the connector line.
+     * @default ''
      */
@@ -44,2 +49,3 @@ dashArray: string;
      * Font size for the text.
+     * @default '16px'
      */
@@ -49,2 +55,3 @@ size: string;
      * Color for the text.
+     * @default ''
      */
@@ -58,2 +65,3 @@ color: string;
      * FontWeight for the text.
+     * @default 'Normal'
      */
@@ -63,2 +71,3 @@ fontWeight: string;
      * FontStyle for the text.
+     * @default 'Normal'
      */
@@ -68,2 +77,3 @@ fontStyle: string;
      * Opacity for the text.
+     * @default 1
      */
@@ -73,2 +83,3 @@ opacity: number;
      * text alignment
+     * @default 'Center'
      */
@@ -78,2 +89,3 @@ textAlignment: Alignment;
      * Specifies the chart title text overflow
+     * @default 'Trim'
      */
@@ -88,2 +100,3 @@ textOverflow: TextOverflow;
      * The color of the border that accepts value in hex and rgba as a valid CSS color string.
+     * @default ''
      */
@@ -93,2 +106,3 @@ color: string;
      * The width of the border in pixels.
+     * @default 1
      */
@@ -107,3 +121,3 @@ width: number;
      * The background of the chart area that accepts value in hex and rgba as a valid CSS color string..
-     * @default transparent.
+     * @default transparent
      */
@@ -113,3 +127,3 @@ background: string;
      * The opacity for background.
-     * @default 1.
+     * @default 1
      */
@@ -124,3 +138,3 @@ opacity: number;
      * Left margin in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -130,3 +144,3 @@ left: number;
      * Right margin in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -136,3 +150,3 @@ right: number;
      * Top margin in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -142,3 +156,3 @@ top: number;
      * Bottom margin in pixels.
-     * @default 10.
+     * @default 10
      */
@@ -153,3 +167,3 @@ bottom: number;
      * If set to true, series gets animated on initial loading.
-     * @default true.
+     * @default true
      */
@@ -159,3 +173,3 @@ enable: boolean;
      * The duration of animation in milliseconds.
-     * @default 1000.
+     * @default 1000
      */
@@ -165,3 +179,3 @@ duration: number;
      * The option to delay animation of the series.
-     * @default 0.
+     * @default 0
      */
@@ -174,2 +188,3 @@ delay: number;
      * Specifies the series index
+     * @default 0
      */
@@ -179,2 +194,3 @@ series: number;
      * Specifies the point index
+     * @default 0
      */
@@ -189,2 +205,3 @@ point: number;
      * Specifies the top left corner radius value
+     * @default 0
      */
@@ -194,2 +211,3 @@ topLeft: number;
      * Specifies the top right corner radius value
+     * @default 0
      */
@@ -199,2 +217,3 @@ topRight: number;
      * Specifies the bottom left corner radius value
+     * @default 0
      */
@@ -204,2 +223,3 @@ bottomLeft: number;
      * Specifies the bottom right corner radius value
+     * @default 0
      */
@@ -222,2 +242,3 @@ bottomRight: number;
      * To customize the fill color of empty points.
+     * @default null
      */
@@ -227,2 +248,3 @@ fill: string;
      * Options to customize the border of empty points.
+     * @default "{color: 'transparent', width: 0}"
      */
@@ -236,1 +258,51 @@ border: BorderModel;
 }
+/**
+ * Configures the ToolTips in the chart.
+ */
+export declare class TooltipSettings extends ChildProperty<TooltipSettings> {
+    /**
+     * Enables / Disables the visibility of the tooltip.
+     * @default false.
+     */
+    enable: boolean;
+    /**
+     * If set to true, a single ToolTip will be displayed for every index.
+     * @default false.
+     */
+    shared: boolean;
+    /**
+     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.
+     */
+    fill: string;
+    /**
+     * Header for tooltip.
+     */
+    header: string;
+    /**
+     * The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.
+     */
+    opacity: number;
+    /**
+     * Options to customize the ToolTip text.
+     */
+    textStyle: FontModel;
+    /**
+     * Format the ToolTip content.
+     * @default null.
+     */
+    format: string;
+    /**
+     * Custom template to format the ToolTip content. Use ${x} and ${y} as the placeholder text to display the corresponding data point.
+     * @default null.
+     */
+    template: string;
+    /**
+     * If set to true, ToolTip will animate while moving from one point to another.
+     * @default true.
+     */
+    enableAnimation: boolean;
+    /**
+     * Options to customize tooltip borders.
+     */
+    border: BorderModel;
+}

src/common/model/base.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "../model/theme"], function (require, exports, ej2_base_1, theme_1) {
     "use strict";
@@ -203,2 +203,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
     exports.EmptyPointSettings = EmptyPointSettings;
+    var TooltipSettings = (function (_super) {
+        __extends(TooltipSettings, _super);
+        function TooltipSettings() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        __decorate([
+            ej2_base_1.Property(false)
+        ], TooltipSettings.prototype, "enable", void 0);
+        __decorate([
+            ej2_base_1.Property(false)
+        ], TooltipSettings.prototype, "shared", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], TooltipSettings.prototype, "fill", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], TooltipSettings.prototype, "header", void 0);
+        __decorate([
+            ej2_base_1.Property(0.75)
+        ], TooltipSettings.prototype, "opacity", void 0);
+        __decorate([
+            ej2_base_1.Complex(theme_1.Theme.tooltipLabelFont, Font)
+        ], TooltipSettings.prototype, "textStyle", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], TooltipSettings.prototype, "format", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], TooltipSettings.prototype, "template", void 0);
+        __decorate([
+            ej2_base_1.Property(true)
+        ], TooltipSettings.prototype, "enableAnimation", void 0);
+        __decorate([
+            ej2_base_1.Complex({ color: '#cccccc', width: 0.5 }, Border)
+        ], TooltipSettings.prototype, "border", void 0);
+        return TooltipSettings;
+    }(ej2_base_1.ChildProperty));
+    exports.TooltipSettings = TooltipSettings;
 });

src/common/model/constants.d.ts

@@ -31,2 +31,6 @@ /**
 /** @private */
+export declare const pointClick: string;
+/** @private */
+export declare const pointMove: string;
+/** @private */
 export declare const chartMouseLeave: string;
@@ -33,0 +37,0 @@ /** @private */

src/common/model/constants.js

@@ -17,2 +17,4 @@ define(["require", "exports"], function (require, exports) {
     exports.chartMouseClick = 'chartMouseClick';
+    exports.pointClick = 'pointClick';
+    exports.pointMove = 'pointMove';
     exports.chartMouseLeave = 'chartMouseLeave';
@@ -19,0 +21,0 @@ exports.chartMouseDown = 'chartMouseDown';

src/common/model/interface.d.ts

@@ -9,6 +9,3 @@ import { Chart, Alignment } from '../../chart';
 import { ChartLocation } from '../utils/helper';
-/**
- * Specifies Chart Events
- * @private
- */
+import { AccPoints, AccumulationSeries } from '../../accumulation-chart/model/acc-base';
 export interface IChartEventArgs {
@@ -20,5 +17,2 @@ /** Defines the name of the event */
 }
-/**
- * Specifies the LegendRender Event arguments.
- */
 export interface ILegendRenderEventArgs extends IChartEventArgs {
@@ -34,5 +28,2 @@ /** Defines the current legend text */
 }
-/**
- * Specifies the LegendRender Event arguments for accumulation chart.
- */
 export interface IAccLegendRenderEventArgs extends IChartEventArgs {
@@ -46,5 +37,2 @@ /** Defines the current legend shape */
 }
-/**
- * Specifies the TextRender Event arguments.
- */
 export interface ITextRenderEventArgs extends IChartEventArgs {
@@ -64,5 +52,2 @@ /** Defines the current series of the label */
 }
-/**
- * Specifies the AnnotationRender Event arguments.
- */
 export interface IAnnotationRenderEventArgs extends IChartEventArgs {
@@ -74,5 +59,2 @@ /** Defines the current annotation content */
 }
-/**
- * Specifies the ZoomComplete Event arguments.
- */
 export interface IZoomCompleteEventArgs extends IChartEventArgs {
@@ -90,5 +72,2 @@ /** Defines the zoomed axis */
 }
-/**
- * Specifies the PointRender Event arguments.
- */
 export interface IPointRenderEventArgs extends IChartEventArgs {
@@ -110,5 +89,2 @@ /** Defines the current series of the point */
 }
-/**
- * Specifies the SeriesRender Event arguments.
- */
 export interface ISeriesRenderEventArgs {
@@ -124,5 +100,2 @@ /** Defines the current series */
 }
-/**
- * Specifies the AxisLabelRender Event arguments.
- */
 export interface IAxisLabelRenderEventArgs extends IChartEventArgs {
@@ -138,5 +111,2 @@ /** Defines the current axis */
 }
-/**
- * Specifies the AxisRangeCalculated Event arguments.
- */
 export interface IAxisRangeCalculatedEventArgs extends IChartEventArgs {
@@ -152,5 +122,2 @@ /** Defines the current axis */
 }
-/**
- * Specifies the AxisLabelRender Event arguments.
- */
 export interface IAxisMultiLabelRenderEventArgs extends IChartEventArgs {
@@ -166,18 +133,12 @@ /** Defines the current axis */
 }
-/**
- * Specifies the TooltipRender Event arguments.
- */
 export interface ITooltipRenderEventArgs extends IChartEventArgs {
     /** Defines tooltip text collections */
-    textCollections?: string;
+    text?: string;
     /** Defines tooltip text style */
     textStyle?: FontModel;
     /** Defines current tooltip series */
-    series: Series;
+    series: Series | AccumulationSeries;
     /** Defines current tooltip point */
-    point: Points;
+    point: Points | AccPoints;
 }
-/**
- * Specifies the Chart Mouse Event arguments.
- */
 export interface IMouseEventArgs extends IChartEventArgs {
@@ -191,2 +152,18 @@ /** Defines current mouse event target id */
 }
+export interface IPointEventArgs extends IChartEventArgs {
+    /** Defines the current series */
+    series: SeriesModel;
+    /** Defines the current point */
+    point: Points;
+    /** Defines the point index */
+    pointIndex: number;
+    /** Defines the series index */
+    seriesIndex: number;
+    /** Defines the current chart instance */
+    chart: Chart;
+    /** Defines current mouse x location */
+    x: number;
+    /** Defines current mouse y location */
+    y: number;
+}
 /** @private */
@@ -218,5 +195,2 @@ export interface IFontMapping {
 }
-/**
- * Specifies the DragComplete Event arguments.
- */
 export interface IDragCompleteEventArgs extends IChartEventArgs {
@@ -229,5 +203,2 @@ /** Defines current selected Data X, Y values */
 }
-/**
- * Specifies the Load or Loaded Event arguments.
- */
 export interface ILoadedEventArgs extends IChartEventArgs {
@@ -237,5 +208,2 @@ /** Defines the current chart instance */
 }
-/**
- * Specifies the AnimationComplete Event arguments.
- */
 export interface IAnimationCompleteEventArgs extends IChartEventArgs {
@@ -245,5 +213,2 @@ /** Defines the current animation series */
 }
-/**
- * Specifies the Print Event arguments.
- */
 export interface IPrintEventArgs extends IChartEventArgs {
@@ -262,1 +227,30 @@ htmlContent: Element;
 }
+/** @private */
+/**
+ * Specifies the Theme style for chart and accumulation.
+ */
+export interface IThemeStyle {
+    axisLabel: string;
+    axisTitle: string;
+    axisLine: string;
+    majorGridLine: string;
+    minorGridLine: string;
+    majorTickLine: string;
+    minorTickLine: string;
+    chartTitle: string;
+    legendLabel: string;
+    background: string;
+    areaBorder: string;
+    errorBar: string;
+    crosshairLine: string;
+    crosshairFill: string;
+    crosshairLabel: string;
+    tooltipFill: string;
+    tooltipBoldLabel: string;
+    tooltipLightLabel: string;
+    tooltipHeaderLine: string;
+    markerShadow: string;
+    selectionRectFill: string;
+    selectionRectStroke: string;
+    selectionCircleStroke: 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';
 /**
@@ -22,22 +23,6 @@ * Specifies Chart Themes
     let stripLineLabelFont: IFontMapping;
-    /** @private */
-    let axisLineColor: string;
-    /** @private */
-    let axisMajorGridLineColor: string;
-    /** @private */
-    let axisMinorGridLineColor: string;
-    /** @private */
-    let axisMajorTickLineColor: string;
-    /** @private */
-    let axisMinorTickLineColor: string;
-    /** @private */
-    let crossHairLabelColor: string;
-    /** @private */
-    let chartBackgroundColor: string;
-    /** @private */
-    let selectionRectFill: string;
-    /** @private */
-    let selectionRectStroke: string;
 }
 /** @private */
 export declare function getSeriesColor(theme: ChartTheme | AccumulationTheme): string[];
+/** @private */
+export declare function getThemeColor(theme: ChartTheme | AccumulationTheme): IThemeStyle;

src/common/model/theme.js

@@ -9,3 +9,3 @@ define(["require", "exports"], function (require, exports) {
             fontWeight: 'Normal',
-            color: '#686868',
+            color: null,
             fontStyle: 'Normal',
@@ -17,3 +17,3 @@ fontFamily: 'Segoe UI'
             fontWeight: 'Normal',
-            color: '#424242',
+            color: null,
             fontStyle: 'Normal',
@@ -25,3 +25,3 @@ fontFamily: 'Segoe UI'
             fontWeight: '500',
-            color: '#424242',
+            color: null,
             fontStyle: 'Normal',
@@ -33,3 +33,3 @@ fontFamily: 'Segoe UI'
             fontWeight: 'Normal',
-            color: '#e5e5e5',
+            color: null,
             fontStyle: 'Normal',
@@ -48,3 +48,3 @@ fontFamily: 'Segoe UI'
             fontWeight: 'Normal',
-            color: '#353535',
+            color: null,
             fontStyle: 'Normal',
@@ -60,11 +60,2 @@ fontFamily: 'Segoe UI'
         };
-        Theme.axisLineColor = '#b5b5b5';
-        Theme.axisMajorGridLineColor = '#dbdbdb';
-        Theme.axisMinorGridLineColor = '#eaeaea';
-        Theme.axisMajorTickLineColor = '#b5b5b5';
-        Theme.axisMinorTickLineColor = '#d6d6d6';
-        Theme.crossHairLabelColor = '#4f4f4f';
-        Theme.chartBackgroundColor = '#FFFFFF';
-        Theme.selectionRectFill = 'rgba(41, 171, 226, 0.1)';
-        Theme.selectionRectStroke = '#29abe2';
     })(Theme = exports.Theme || (exports.Theme = {}));
@@ -82,2 +73,6 @@ function getSeriesColor(theme) {
                 break;
+            case 'Highcontrast':
+                palette = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',
+                    '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];
+                break;
             default:
@@ -91,2 +86,63 @@ palette = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
     exports.getSeriesColor = getSeriesColor;
+    function getThemeColor(theme) {
+        var style;
+        switch (theme) {
+            case 'Highcontrast':
+                style = {
+                    axisLabel: '#ffffff',
+                    axisTitle: '#ffffff',
+                    axisLine: '#ffffff',
+                    majorGridLine: '#BFBFBF',
+                    minorGridLine: '#969696',
+                    majorTickLine: '#BFBFBF',
+                    minorTickLine: '#969696',
+                    chartTitle: '#ffffff',
+                    legendLabel: '#ffffff',
+                    background: '#000000',
+                    areaBorder: '#ffffff',
+                    errorBar: '#ffffff',
+                    crosshairLine: '#ffffff',
+                    crosshairFill: '#ffffff',
+                    crosshairLabel: '#000000',
+                    tooltipFill: '#ffffff',
+                    tooltipBoldLabel: '#000000',
+                    tooltipLightLabel: '#000000',
+                    tooltipHeaderLine: '#969696',
+                    markerShadow: '#BFBFBF',
+                    selectionRectFill: 'rgba(255, 217, 57, 0.3)',
+                    selectionRectStroke: '#ffffff',
+                    selectionCircleStroke: '#FFD939'
+                };
+                break;
+            default:
+                style = {
+                    axisLabel: '#686868',
+                    axisTitle: '#424242',
+                    axisLine: '#b5b5b5',
+                    majorGridLine: '#dbdbdb',
+                    minorGridLine: '#eaeaea',
+                    majorTickLine: '#b5b5b5',
+                    minorTickLine: '#d6d6d6',
+                    chartTitle: '#424242',
+                    legendLabel: '#353535',
+                    background: '#FFFFFF',
+                    areaBorder: 'Gray',
+                    errorBar: '#000000',
+                    crosshairLine: '#4f4f4f',
+                    crosshairFill: '#4f4f4f',
+                    crosshairLabel: '#e5e5e5',
+                    tooltipFill: 'rgba(0, 8, 22, 0.75)',
+                    tooltipBoldLabel: '#ffffff',
+                    tooltipLightLabel: '#dbdbdb',
+                    tooltipHeaderLine: '#ffffff',
+                    markerShadow: null,
+                    selectionRectFill: 'rgba(41, 171, 226, 0.1)',
+                    selectionRectStroke: '#29abe2',
+                    selectionCircleStroke: '#29abe2'
+                };
+                break;
+        }
+        return style;
+    }
+    exports.getThemeColor = getThemeColor;
 });

src/common/utils/enum.d.ts

@@ -34,3 +34,3 @@ /**
  */
-export declare type ExportType = 'PNG' | 'JPEG' | 'SVG';
+export declare type ExportType = 'PNG' | 'JPEG' | 'SVG' | 'PDF';
 /**
@@ -37,0 +37,0 @@ * Defines the Text overflow.

src/common/utils/export.d.ts

 import { Chart } from '../../chart/chart';
 import { AccumulationChart } from '../../accumulation-chart/accumulation';
 import { ExportType } from '../utils/enum';
+import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
 /**
@@ -31,3 +32,10 @@ * Annotation Module handles the Annotation for chart and accumulation series.
      */
-    export(type: ExportType, fileName: string): void;
+    export(type: ExportType, fileName: string, orientation?: PdfPageOrientation): void;
+    /**
+     * To trigger the download element
+     * @param fileName
+     * @param type
+     * @param url
+     */
+    triggerDownload(fileName: string, type: ExportType, url: string, isDownload: boolean): void;
 }

src/common/utils/export.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "../utils/helper", "../model/constants"], function (require, exports, ej2_base_1, helper_1, constants_1) {
+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) {
     "use strict";
@@ -40,3 +40,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
         };
-        ExportUtils.prototype.export = function (type, fileName) {
+        ExportUtils.prototype.export = function (type, fileName, orientation) {
+            var _this = this;
             var element = ej2_base_1.createElement('canvas', {
@@ -49,2 +50,4 @@ id: 'ej2-canvas',
             });
+            var isDownload = !(ej2_base_1.Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
+            orientation = ej2_base_1.isNullOrUndefined(orientation) ? ej2_pdf_export_1.PdfPageOrientation.Landscape : orientation;
             var svgData = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
@@ -56,9 +59,45 @@ this.control.svgObject.outerHTML +
             if (type === 'SVG') {
+                this.triggerDownload(fileName, type, url, isDownload);
             }
             else {
-                var image = new Image();
-                var ctx = element.getContext('2d');
-                image.src = url;
+                var image_1 = new Image();
+                var ctx_1 = element.getContext('2d');
+                image_1.onload = (function () {
+                    ctx_1.drawImage(image_1, 0, 0);
+                    window.URL.revokeObjectURL(url);
+                    if (type === 'PDF') {
+                        var document_1 = new ej2_pdf_export_1.PdfDocument();
+                        var imageString = element.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
+                        document_1.pageSettings.orientation = orientation;
+                        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);
+                        if (isDownload) {
+                            document_1.save(fileName + '.pdf');
+                            document_1.destroy();
+                        }
+                    }
+                    else {
+                        if (window.navigator.msSaveOrOpenBlob) {
+                            window.navigator.msSaveOrOpenBlob(element.msToBlob(), fileName + '.' + type.toLocaleLowerCase());
+                        }
+                        else {
+                            _this.triggerDownload(fileName, type, element.toDataURL('image/png').replace('image/png', 'image/octet-stream'), isDownload);
+                        }
+                    }
+                });
+                image_1.src = url;
             }
         };
+        ExportUtils.prototype.triggerDownload = function (fileName, type, url, isDownload) {
+            ej2_base_1.createElement('a', {
+                attrs: {
+                    'download': fileName + '.' + type.toLocaleLowerCase(),
+                    'href': url
+                }
+            }).dispatchEvent(new MouseEvent(isDownload ? 'click' : 'move', {
+                view: window,
+                bubbles: false,
+                cancelable: true
+            }));
+        };
         return ExportUtils;
@@ -65,0 +104,0 @@ }());

src/common/utils/helper.d.ts

 import { Effect } from '@syncfusion/ej2-base';
+import { Index } from '../../common/model/base';
 import { FontModel, BorderModel, MarginModel } from '../model/base-model';
@@ -62,2 +63,7 @@ import { VisibleRangeModel } from '../../chart/axis/axis';
 export declare function TransformToVisible(x: number, y: number, xAxis: Axis, yAxis: Axis, isInverted?: boolean, series?: Series): ChartLocation;
+/**
+ * method to find series, point index by element id
+ * @private
+ */
+export declare function indexFinder(id: string, isPoint?: boolean): Index;
 /** @private */
@@ -304,2 +310,8 @@ export declare function CoefficientToVector(coefficient: number, startAngle: number): ChartLocation;
 /** @private */
+export declare class AccPointData {
+    point: AccPoints;
+    series: AccumulationSeries;
+    constructor(point: AccPoints, series: AccumulationSeries, index?: number);
+}
+/** @private */
 export declare class ControlPoints {
@@ -306,0 +318,0 @@ controlPoint1: ChartLocation;

src/common/utils/helper.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/model/base"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, base_1) {
     "use strict";
@@ -157,3 +157,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
             for (var i = (first + 1); i < last; i++) {
-                sum += values[i][series.yName];
+                if (!ej2_base_2.isNullOrUndefined(values[i][series.yName])) {
+                    sum += values[i][series.yName];
+                }
             }
@@ -214,5 +216,5 @@ }
     function TransformToVisible(x, y, xAxis, yAxis, isInverted, series) {
-        x = (xAxis.valueType === 'Logarithmic' ? logBase(x, xAxis.logBase) : x);
+        x = (xAxis.valueType === 'Logarithmic' ? logBase(x > 1 ? x : 1, xAxis.logBase) : x);
         y = (yAxis.valueType === 'Logarithmic' ?
-            logBase(y === 0 ? 1 : y, yAxis.logBase) : y);
+            logBase(y > 1 ? y : 1, yAxis.logBase) : y);
         x += xAxis.valueType === 'Category' && xAxis.labelPlacement === 'BetweenTicks' && series.type !== 'Radar' ? 0.5 : 0;
@@ -227,2 +229,19 @@ var radius = series.chart.radius * valueToCoefficient(y, yAxis);
     exports.TransformToVisible = TransformToVisible;
+    function indexFinder(id, isPoint) {
+        if (isPoint === void 0) { isPoint = false; }
+        var ids = ['NaN', 'NaN'];
+        if (id.indexOf('_Point_') > -1) {
+            ids = id.split('_Series_')[1].split('_Point_');
+        }
+        else if (id.indexOf('_shape_') > -1 && (!isPoint || (isPoint && id.indexOf('_legend_') === -1))) {
+            ids = id.split('_shape_');
+            ids[0] = '0';
+        }
+        else if (id.indexOf('_text_') > -1 && (!isPoint || (isPoint && id.indexOf('_legend_') === -1))) {
+            ids = id.split('_text_');
+            ids[0] = '0';
+        }
+        return new base_1.Index(parseInt(ids[0], 10), parseInt(ids[1], 10));
+    }
+    exports.indexFinder = indexFinder;
     function CoefficientToVector(coefficient, startAngle) {
@@ -644,10 +663,10 @@ startAngle = startAngle < 0 ? startAngle + 360 : startAngle;
     function getPoint(x, y, xAxis, yAxis, isInverted, series) {
-        var xLength = isInverted ? xAxis.rect.height : xAxis.rect.width;
-        var yLength = isInverted ? yAxis.rect.width : yAxis.rect.height;
-        var xvalue = (xAxis.valueType === 'Logarithmic') ? logBase(((x === 0 || x < 0) ? 1 : x), xAxis.logBase) : x;
-        var yvalue = (yAxis.valueType === 'Logarithmic') ? logBase(((y === 0 || y < 0) ? 1 : y), yAxis.logBase) : y;
-        xvalue = valueToCoefficient(xvalue, xAxis);
-        yvalue = valueToCoefficient(yvalue, yAxis);
-        var locationX = isInverted ? yvalue * (yLength) : xvalue * (xLength);
-        var locationY = isInverted ? (1 - xvalue) * (xLength) : (1 - yvalue) * (yLength);
+        x = ((xAxis.valueType === 'Logarithmic') ? logBase(((x > 1) ? x : 1), xAxis.logBase) : x);
+        y = ((yAxis.valueType === 'Logarithmic') ? logBase(((y > 1) ? y : 1), yAxis.logBase) : y);
+        x = valueToCoefficient(x, xAxis);
+        y = valueToCoefficient(y, yAxis);
+        var xLength = (isInverted ? xAxis.rect.height : xAxis.rect.width);
+        var yLength = (isInverted ? yAxis.rect.width : yAxis.rect.height);
+        var locationX = isInverted ? y * (yLength) : x * (xLength);
+        var locationY = isInverted ? (1 - x) * (xLength) : (1 - y) * (yLength);
         return new ChartLocation(locationX, locationY);
@@ -1269,2 +1288,11 @@ }
     exports.PointData = PointData;
+    var AccPointData = (function () {
+        function AccPointData(point, series, index) {
+            if (index === void 0) { index = 0; }
+            this.point = point;
+            this.series = series;
+        }
+        return AccPointData;
+    }());
+    exports.AccPointData = AccPointData;
     var ControlPoints = (function () {
@@ -1271,0 +1299,0 @@ function ControlPoints(controlPoint1, controlPoint2) {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

13646248

decreased by-0.22%

Dependency count

5

increased by66.67%

Number of package files

232

decreased by-4.53%

Lines of code

83013

decreased by-11.21%

Dependency changes

• + Added@syncfusion/ej2-compression@^16.1.24

• + Added@syncfusion/ej2-file-utils@^16.1.24

• + Added@syncfusion/ej2-pdf-export@^16.1.24

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

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

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

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

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

• - Removed@syncfusion/ej2-popups@^15.4.27

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

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

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

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

• Updated@syncfusion/ej2-base@^16.1.24

• Updated@syncfusion/ej2-data@^16.1.24