@syncfusion/ej2-charts - npm Package Compare versions

Comparing version 1.0.18 to 1.0.19

dist/es6/accumulation-chart/accumulation.js

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Internationalization, Event, Browser, EventHandler, Touch } from '@syncfusion/ej2-base';
-import { remove, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { remove, extend, isNullOrUndefined, createElement } from '@syncfusion/ej2-base';
 import { Font, Margin, Border, Indexes } from '../common/model/base';
@@ -28,5 +28,6 @@ import { AccumulationSeries, AccumulationTooltipSettings } from './model/acc-base';
 import { Rect, Size, subtractRect, measureText, RectOption, textTrim, showTooltip } from '../common/utils/helper';
-import { textElement, TextOption, createSvg, calculateSize, removeElement } from '../common/utils/helper';
+import { textElement, TextOption, createSvg, calculateSize, removeElement, getElement } from '../common/utils/helper';
 import { Data } from '../common/model/data';
 import { PieSeries } from './renderer/pie-series';
+import { AccumulationAnnotationSettings } from './model/acc-base';
 var AccumulationChart = (function (_super) {
@@ -214,2 +215,3 @@ __extends(AccumulationChart, _super);
     AccumulationChart.prototype.removeSvg = function () {
+        removeElement(this.element.id + '_Secondary_Element');
         if (this.svgObject) {
@@ -226,2 +228,8 @@ while (this.svgObject.childNodes.length > 0) {
     };
+    AccumulationChart.prototype.createSecondaryElement = function () {
+        this.element.appendChild(createElement('div', {
+            id: this.element.id + '_Secondary_Element',
+            styles: 'position: relative'
+        }));
+    };
     AccumulationChart.prototype.calculateAreaType = function () {
@@ -280,2 +288,3 @@ var series = this.series[0];
         this.renderTitle();
+        this.createSecondaryElement();
         this.renderSeries();
@@ -286,5 +295,11 @@ this.renderLegend();
         this.processExplode();
+        this.renderAnnotation();
         this.trigger('loaded', { accumulation: this });
         this.animateSeries = false;
     };
+    AccumulationChart.prototype.renderAnnotation = function () {
+        if (this.annotationModule) {
+            this.annotationModule.renderAnnotations(getElement(this.element.id + '_Secondary_Element'));
+        }
+    };
     AccumulationChart.prototype.processExplode = function () {
@@ -362,2 +377,3 @@ if (!this.visibleSeries[0].explode) {
         var modules = [];
+        var enableAnnotation = false;
         modules.push({
@@ -391,2 +407,11 @@ member: this.type + 'Series',
         }
+        enableAnnotation = this.annotations.some(function (value) {
+            return (value.content !== null);
+        });
+        if (enableAnnotation) {
+            modules.push({
+                member: 'Annotation',
+                args: [this, this.annotations]
+            });
+        }
         return modules;
@@ -463,2 +488,5 @@ };
 __decorate([
+    Collection([{}], AccumulationAnnotationSettings)
+], AccumulationChart.prototype, "annotations", void 0);
+__decorate([
     Property('Material')
@@ -489,2 +517,5 @@ ], AccumulationChart.prototype, "theme", void 0);
     Event()
+], AccumulationChart.prototype, "annotationRender", void 0);
+__decorate([
+    Event()
 ], AccumulationChart.prototype, "chartMouseMove", void 0);
@@ -491,0 +522,0 @@ __decorate([

dist/es6/accumulation-chart/index.js

@@ -8,1 +8,2 @@ export * from './accumulation';
 export * from './user-interaction/selection';
+export * from './annotation/annotation';

dist/es6/accumulation-chart/model/acc-base.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';
+import { Property, ChildProperty, Complex, createElement } from '@syncfusion/ej2-base';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
@@ -24,2 +24,35 @@ import { Border, Font, Animation, Index } from '../../common/model/base';
 import { Theme, getSeriesColor } from '../../common/model/theme';
+import { getElement } from '../../common/utils/helper';
+var AccumulationAnnotationSettings = (function (_super) {
+    __extends(AccumulationAnnotationSettings, _super);
+    function AccumulationAnnotationSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return AccumulationAnnotationSettings;
+}(ChildProperty));
+export { AccumulationAnnotationSettings };
+__decorate([
+    Property(null)
+], AccumulationAnnotationSettings.prototype, "content", void 0);
+__decorate([
+    Property('0')
+], AccumulationAnnotationSettings.prototype, "x", void 0);
+__decorate([
+    Property('0')
+], AccumulationAnnotationSettings.prototype, "y", void 0);
+__decorate([
+    Property('Pixel')
+], AccumulationAnnotationSettings.prototype, "coordinateUnits", void 0);
+__decorate([
+    Property('Chart')
+], AccumulationAnnotationSettings.prototype, "region", void 0);
+__decorate([
+    Property('Middle')
+], AccumulationAnnotationSettings.prototype, "verticalAlignment", void 0);
+__decorate([
+    Property('Center')
+], AccumulationAnnotationSettings.prototype, "horizontalAlignment", void 0);
+__decorate([
+    Property(null)
+], AccumulationAnnotationSettings.prototype, "description", void 0);
 var Connector = (function (_super) {
@@ -80,2 +113,5 @@ __extends(Connector, _super);
 ], AccumulationDataLabelSettings.prototype, "connectorStyle", void 0);
+__decorate([
+    Property(null)
+], AccumulationDataLabelSettings.prototype, "template", void 0);
 var AccumulationTooltipSettings = (function (_super) {
@@ -240,8 +276,14 @@ __extends(AccumulationTooltipSettings, _super);
         accumulation.accumulationDataLabelModule.findAreaRect();
+        var element = createElement('div', {
+            id: accumulation.element.id + '_Series_0' + '_DataLabelCollections'
+        });
         for (var _i = 0, _a = this.points; _i < _a.length; _i++) {
             var point = _a[_i];
             if (point.visible) {
-                accumulation.accumulationDataLabelModule.renderDataLabel(point, this.dataLabel, datalabelGroup, this.points, this.index);
+                accumulation.accumulationDataLabelModule.renderDataLabel(point, this.dataLabel, datalabelGroup, this.points, this.index, element);
             }
         }
+        if (this.dataLabel.template !== null && element.childElementCount) {
+            getElement(accumulation.element.id + '_Secondary_Element').appendChild(element);
+        }
         accumulation.getSeriesElement().appendChild(datalabelGroup);
@@ -248,0 +290,0 @@ };

dist/es6/accumulation-chart/renderer/dataLabel.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-import { extend } from '@syncfusion/ej2-base';
+import { extend, createElement } from '@syncfusion/ej2-base';
 import { ChartLocation, degreeToLocation, Rect, isOverlap, stringToNumber, getAngle, TextOption } from '../../common/utils/helper';
@@ -19,2 +19,3 @@ import { textTrim, subtractThickness, Thickness, removeElement, measureText, RectOption, textElement } from '../../common/utils/helper';
 import { PieBase } from '../renderer/pie-base';
+import { getFontStyle, createTemplate, measureElementRect, templateAnimate } from '../../common/utils/helper';
 var AccumulationDataLabel = (function (_super) {
@@ -290,3 +291,3 @@ __extends(AccumulationDataLabel, _super);
     };
-    AccumulationDataLabel.prototype.renderDataLabel = function (point, dataLabel, parent, points, series) {
+    AccumulationDataLabel.prototype.renderDataLabel = function (point, dataLabel, parent, points, series, templateElement) {
         var id = this.accumulation.element.id + '_datalabel_Series_' + series + '_';
@@ -297,9 +298,16 @@ var datalabelGroup = this.accumulation.renderer.createGroup({ id: id + 'g_' + point.index });
             cancel: false, name: textRender, series: this.accumulation.visibleSeries[0], point: point,
-            text: point.label, border: dataLabel.border, color: dataLabel.fill
+            text: point.label, border: dataLabel.border, color: dataLabel.fill, template: dataLabel.template
         };
         this.accumulation.trigger(textRender, argsData);
+        var isTemplate = argsData.template !== null;
         point.labelVisible = !argsData.cancel;
         point.text = point.label = argsData.text;
         this.marginValue = argsData.border.width ? (5 + argsData.border.width) : 1;
-        var textSize = measureText(point.label, dataLabel.font);
+        var childElement = createElement('div', {
+            id: this.accumulation.element.id + '_Series_' + 0 + '_DataLabel_' + point.index,
+            styles: 'position: absolute;background-color:' + argsData.color + ';' +
+                getFontStyle(dataLabel.font) + ';border:' + argsData.border.width + 'px solid ' + argsData.border.color + ';'
+        });
+        var textSize = isTemplate ? this.getTemplateSize(childElement, point, argsData) :
+            measureText(point.label, dataLabel.font);
         textSize.height += 4;
@@ -310,4 +318,9 @@ textSize.width += 4;
             this.correctLabelRegion(point.labelRegion, textSize);
-            datalabelGroup.appendChild(this.accumulation.renderer.drawRectangle(new RectOption(id + 'shape_' + point.index, argsData.color, argsData.border, 1, point.labelRegion, dataLabel.rx, dataLabel.ry)));
-            textElement(new TextOption(id + 'text_' + point.index, point.labelRegion.x + this.marginValue, point.labelRegion.y + (textSize.height * 3 / 4) + this.marginValue, 'start', point.label, '', 'auto'), dataLabel.font, dataLabel.font.color || this.getSaturatedColor(point, argsData.color), datalabelGroup);
+            if (isTemplate) {
+                this.setTemplateStyle(childElement, point, templateElement, dataLabel.font.color, argsData.color);
+            }
+            else {
+                datalabelGroup.appendChild(this.accumulation.renderer.drawRectangle(new RectOption(id + 'shape_' + point.index, argsData.color, argsData.border, 1, point.labelRegion, dataLabel.rx, dataLabel.ry)));
+                textElement(new TextOption(id + 'text_' + point.index, point.labelRegion.x + this.marginValue, point.labelRegion.y + (textSize.height * 3 / 4) + this.marginValue, 'start', point.label, '', 'auto'), dataLabel.font, dataLabel.font.color || this.getSaturatedColor(point, argsData.color), datalabelGroup);
+            }
             if (this.accumulation.accumulationLegendModule && (dataLabel.position === 'Outside' || this.accumulation.enableSmartLabels)) {
@@ -324,2 +337,25 @@ this.accumulation.visibleSeries[0].findMaxBounds(this.accumulation.visibleSeries[0].labelBound, point.labelRegion);
     };
+    AccumulationDataLabel.prototype.getTemplateSize = function (element, point, argsData) {
+        var clientRect;
+        element = createTemplate(element, point.index, argsData.template, this.accumulation, point, this.accumulation.visibleSeries[0]);
+        clientRect = measureElementRect(element);
+        return { width: clientRect.width, height: clientRect.height };
+    };
+    AccumulationDataLabel.prototype.setTemplateStyle = function (childElement, point, parent, labelColor, fill) {
+        childElement.style.left = (point.labelRegion.x) + 'px';
+        childElement.style.top = (point.labelRegion.y) + 'px';
+        childElement.style.color = labelColor ||
+            this.getSaturatedColor(point, fill);
+        if (childElement.childElementCount) {
+            parent.appendChild(childElement);
+            this.doTemplateAnimation(this.accumulation, childElement);
+        }
+    };
+    AccumulationDataLabel.prototype.doTemplateAnimation = function (accumulation, element) {
+        var series = accumulation.visibleSeries[0];
+        var delay = series.animation.delay + series.animation.duration;
+        if (series.animation.enable && accumulation.animateSeries) {
+            templateAnimate(element, delay, 200);
+        }
+    };
     AccumulationDataLabel.prototype.getSaturatedColor = function (point, color) {
@@ -326,0 +362,0 @@ var saturatedColor;

dist/es6/accumulation-chart/user-interaction/tooltip.js

@@ -134,4 +134,14 @@ import { compile as templateComplier } from '@syncfusion/ej2-base';
         var tooltip = getElement(id);
-        tooltip.style.top = y + 'px';
-        tooltip.style.left = x + 'px';
+        if (tooltip) {
+            tooltip.style.top = y + 'px';
+            tooltip.style.left = x + 'px';
+        }
+        else {
+            tooltip = createElement('div', {
+                id: id,
+                styles: 'position:absolute;left:' + x + 'px;top:' + y +
+                    'px;width:2px;height:2px;background:transparent'
+            });
+            getElement(this.accumulation.element.id + '_Secondary_Element').appendChild(tooltip);
+        }
     };
@@ -138,0 +148,0 @@ AccumulationTooltip.prototype.getTooltipText = function (point, tooltip, seriesIndex) {

dist/es6/chart/chart.js

@@ -34,2 +34,4 @@ var __extends = (this && this.__extends) || (function () {
 import { chartMouseClick, chartMouseLeave, chartMouseDown, chartMouseMove, chartMouseUp, load } from '../common/model/constants';
+import { ChartAnnotationSettings } from './model/chart-base';
+import { getElement } from '../common/utils/helper';
 var TooltipSettings = (function (_super) {
@@ -213,4 +215,10 @@ __extends(TooltipSettings, _super);
         }
+        this.renderAnnotation();
         this.trigger('loaded', { chart: this });
     };
+    Chart.prototype.renderAnnotation = function () {
+        if (this.annotationModule) {
+            this.annotationModule.renderAnnotations(getElement(this.element.id + '_Secondary_Element'));
+        }
+    };
     Chart.prototype.processData = function () {
@@ -728,2 +736,3 @@ var series;
         var zooming = this.zoomSettings;
+        var enableAnnotation = false;
         series.map(function (value) {
@@ -782,2 +791,11 @@ _this.isLegend = (_this.legendSettings.visible && ((value.name !== '') || !!_this.isLegend));
         }
+        enableAnnotation = this.annotations.some(function (value) {
+            return (value.content !== null);
+        });
+        if (enableAnnotation) {
+            modules.push({
+                member: 'Annotation',
+                args: [this, this.annotations]
+            });
+        }
         return modules;
@@ -1007,2 +1025,5 @@ };
 __decorate([
+    Collection([{}], ChartAnnotationSettings)
+], Chart.prototype, "annotations", void 0);
+__decorate([
     Property([])
@@ -1045,2 +1066,5 @@ ], Chart.prototype, "palettes", void 0);
     Event()
+], Chart.prototype, "annotationRender", void 0);
+__decorate([
+    Event()
 ], Chart.prototype, "loaded", void 0);
@@ -1047,0 +1071,0 @@ __decorate([

dist/es6/chart/index.js

@@ -29,1 +29,3 @@ export * from './chart';
 export * from './legend/legend';
+export * from './annotation/annotation';
+export * from './model/chart-base';

dist/es6/chart/series/area-series.js

@@ -18,3 +18,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    AreaSeries.prototype.render = function (series) {
+    AreaSeries.prototype.render = function (series, xAxis, yAxis) {
         var firstPoint;
@@ -38,10 +38,10 @@ var endPoint;
                     startPoint.y = origin;
-                    firstPoint = getPoint(currentXValue, origin, series);
+                    firstPoint = getPoint(currentXValue, origin, xAxis, yAxis);
                     direction += ('M' + ' ' + (firstPoint.x) + ' ' + (firstPoint.y) + ' ');
                 }
-                firstPoint = getPoint(currentXValue, point.yValue, series);
+                firstPoint = getPoint(currentXValue, point.yValue, xAxis, yAxis);
                 direction += ('L' + ' ' + (firstPoint.x) + ' ' + (firstPoint.y) + ' ');
                 if (series.points[i + 1] && !series.points[i + 1].visible) {
-                    firstPoint = getPoint(currentXValue, origin, series);
-                    endPoint = getPoint(startPoint.x, startPoint.y, series);
+                    firstPoint = getPoint(currentXValue, origin, xAxis, yAxis);
+                    endPoint = getPoint(startPoint.x, startPoint.y, xAxis, yAxis);
                     direction += ('L' + ' ' + (firstPoint.x) + ' ' + (firstPoint.y) + ' ' + 'L' +
@@ -51,3 +51,3 @@ ' ' + (endPoint.x) + ' ' + (endPoint.y) + ' ');
                 }
-                point.symbolLocation = getPoint(currentXValue, point.yValue, series);
+                point.symbolLocation = getPoint(currentXValue, point.yValue, xAxis, yAxis);
                 point.region = new Rect(point.symbolLocation.x - series.marker.width, point.symbolLocation.y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height);
@@ -58,3 +58,3 @@ }
             startPoint = { 'x': series.points[pointsLength - 1].xValue, 'y': origin };
-            endPoint = getPoint(startPoint.x, startPoint.y, series);
+            endPoint = getPoint(startPoint.x, startPoint.y, xAxis, yAxis);
             direction += ('L' + ' ' + (endPoint.x) + ' ' + (endPoint.y) + ' ');
@@ -61,0 +61,0 @@ }

dist/es6/chart/series/bubble-series.js

@@ -6,3 +6,3 @@ import { withInRange, getPoint, PathOption, drawSymbol, Size, Rect, markerAnimate } from '../../common/utils/helper';
     }
-    BubbleSeries.prototype.render = function (series) {
+    BubbleSeries.prototype.render = function (series, xAxis, yAxis) {
         var marker = series.marker;
@@ -40,3 +40,3 @@ var visiblePoints = series.points;
                 withInRange(visiblePoints[bubblePoint.index - 1], bubblePoint, visiblePoints[bubblePoint.index + 1], series)) {
-                bubblePoint.symbolLocation = getPoint(bubblePoint.xValue, bubblePoint.yValue, series);
+                bubblePoint.symbolLocation = getPoint(bubblePoint.xValue, bubblePoint.yValue, xAxis, yAxis);
                 if ((series.maxRadius === null || series.minRadius === null)) {
@@ -43,0 +43,0 @@ segmentRadius = radius * Math.abs(+bubblePoint.size / maximumSize);

dist/es6/chart/series/chart-series.js

@@ -71,2 +71,5 @@ var __extends = (this && this.__extends) || (function () {
 ], DataLabelSettings.prototype, "font", void 0);
+__decorate([
+    Property(null)
+], DataLabelSettings.prototype, "template", void 0);
 var MarkerSettings = (function (_super) {
@@ -388,3 +391,3 @@ __extends(MarkerSettings, _super);
             this.createSeriesElements(chart);
-            chart[seriesType + 'SeriesModule'].render(this);
+            chart[seriesType + 'SeriesModule'].render(this, this.xAxis, this.yAxis);
             if (this.marker.dataLabel.visible) {
@@ -391,0 +394,0 @@ chart.dataLabelModule.render(this, this.chart, this.marker.dataLabel);

dist/es6/chart/series/data-label.js

 import { ChartLocation, TextOption, RectOption, isCollide, markerAnimate } from '../../common/utils/helper';
 import { getLabelText, measureText, convertHexToColor, calculateRect, textElement, colorNameToHex } from '../../common/utils/helper';
 import { textRender } from '../../common/model/constants';
+import { createTemplate, getFontStyle, getElement, measureElementRect, templateAnimate, withIn } from '../../common/utils/helper';
+import { createElement } from '@syncfusion/ej2-base';
 var DataLabel = (function () {
@@ -22,11 +24,18 @@ function DataLabel(chart) {
         this.yAxisInversed = series.yAxis.isInversed;
+        var element = createElement('div', {
+            id: chart.element.id + '_Series_' + series.index + '_DataLabelCollections'
+        });
         series.points.map(function (point, index) {
             _this.margin = dataLabel.margin;
             var labelText = [];
+            var labelLength;
             border = { width: dataLabel.border.width, color: dataLabel.border.color };
             if (point.symbolLocation) {
                 labelText = getLabelText(point, series, chart);
-                for (var i = 0; i < labelText.length; i++) {
+                labelLength = labelText.length;
+                for (var i = 0; i < labelLength; i++) {
                     argsData = {
-                        cancel: false, name: textRender, series: series, point: point, text: labelText[i], border: border, color: dataLabel.fill
+                        cancel: false, name: textRender, series: series,
+                        point: point, text: labelText[i], border: border,
+                        color: dataLabel.fill, template: dataLabel.template
                     };
@@ -36,14 +45,19 @@ chart.trigger(textRender, argsData);
                         _this.fontBackground = argsData.color;
-                        textSize = measureText(argsData.text, dataLabel.font);
                         _this.isDataLabelShape(argsData);
                         _this.markerHeight = series.type === 'Bubble' ? (point.region.height / 2) : _this.markerHeight;
-                        rect = _this.calculateTextPosition(point, series, textSize, dataLabel, i);
-                        if (!isCollide(rect, chart.dataLabelCollections)) {
-                            chart.dataLabelCollections.push(rect);
-                            if (_this.isShape) {
-                                series.shapeElement.appendChild(chart.renderer.drawRectangle(new RectOption(_this.commonId + index + '_TextShape_' + i, argsData.color, argsData.border, dataLabel.opacity, rect, dataLabel.rx, dataLabel.ry)));
+                        if (argsData.template !== null) {
+                            _this.createDataLabelTemplate(element, series, dataLabel, point, argsData, i);
+                        }
+                        else {
+                            textSize = measureText(argsData.text, dataLabel.font);
+                            rect = _this.calculateTextPosition(point, series, textSize, dataLabel, i);
+                            if (!isCollide(rect, chart.dataLabelCollections)) {
+                                chart.dataLabelCollections.push(rect);
+                                if (_this.isShape) {
+                                    series.shapeElement.appendChild(chart.renderer.drawRectangle(new RectOption(_this.commonId + index + '_TextShape_' + i, argsData.color, argsData.border, dataLabel.opacity, rect, dataLabel.rx, dataLabel.ry)));
+                                }
+                                rgbValue = convertHexToColor(colorNameToHex(_this.fontBackground));
+                                contrast = Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000);
+                                textElement(new TextOption(_this.commonId + index + '_Text_' + i, rect.x + _this.margin.left + textSize.width / 2, rect.y + _this.margin.top + textSize.height * 3 / 4, 'middle', argsData.text, 'rotate(0,' + (rect.x) + ',' + (rect.y) + ')', 'auto'), dataLabel.font, dataLabel.font.color || (contrast >= 128 ? 'black' : 'white'), series.textElement);
                             }
-                            rgbValue = convertHexToColor(colorNameToHex(_this.fontBackground));
-                            contrast = Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000);
-                            textElement(new TextOption(_this.commonId + index + '_Text_' + i, rect.x + _this.margin.left + textSize.width / 2, rect.y + _this.margin.top + textSize.height * 3 / 4, 'middle', argsData.text, 'rotate(0,' + (rect.x) + ',' + (rect.y) + ')', 'auto'), dataLabel.font, dataLabel.font.color || (contrast >= 128 ? 'black' : 'white'), series.textElement);
                         }
@@ -54,3 +68,31 @@ }
         });
+        if (element.childElementCount) {
+            getElement(chart.element.id + '_Secondary_Element').appendChild(element);
+        }
     };
+    DataLabel.prototype.createDataLabelTemplate = function (parentElement, series, dataLabel, point, data, labelIndex) {
+        this.margin = { left: 0, right: 0, bottom: 0, top: 0 };
+        var childElement = createTemplate(createElement('div', {
+            id: this.chart.element.id + '_Series_' + series.index + '_DataLabel_'
+                + point.index + (labelIndex ? ('_' + labelIndex) : ''),
+            styles: 'position: absolute;background-color:' + data.color + ';' +
+                getFontStyle(dataLabel.font) + ';border:' + data.border.width + 'px solid ' + data.border.color + ';'
+        }), point.index, data.template, this.chart, point, series);
+        var elementRect = measureElementRect(childElement);
+        var rect = this.calculateTextPosition(point, series, { width: elementRect.width, height: elementRect.height }, dataLabel, labelIndex);
+        childElement.style.left = (series.clipRect.x + rect.x) + 'px';
+        childElement.style.top = (series.clipRect.y + rect.y) + 'px';
+        var rgbValue = convertHexToColor(colorNameToHex(this.fontBackground));
+        childElement.style.color = dataLabel.font.color ||
+            ((Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000)) >= 128 ? 'black' : 'white');
+        if (childElement.childElementCount && !isCollide(rect, this.chart.dataLabelCollections)
+            && (point.yValue === undefined || withIn(point.yValue, series.yAxis.visibleRange))
+            && withIn(point.xValue, series.xAxis.visibleRange)) {
+            this.chart.dataLabelCollections.push(rect);
+            parentElement.appendChild(childElement);
+            if (series.animation.enable && this.chart.animateSeries) {
+                this.doDataLabelAnimation(series, childElement);
+            }
+        }
+    };
     DataLabel.prototype.calculateTextPosition = function (point, series, textSize, dataLabel, labelIndex) {
@@ -265,3 +307,3 @@ var location = new ChartLocation(point.symbolLocation.x, point.symbolLocation.y);
     };
-    DataLabel.prototype.doDataLabelAnimation = function (series) {
+    DataLabel.prototype.doDataLabelAnimation = function (series, element) {
         var shapeElements = series.shapeElement.childNodes;
@@ -271,9 +313,15 @@ var textNode = series.textElement.childNodes;
         var location;
-        for (var i = 0, count = textNode.length; i < count; i++) {
-            location = new ChartLocation((+textNode[i].getAttribute('x')) + ((+textNode[i].getAttribute('width')) / 2), (+textNode[i].getAttribute('y')) + ((+textNode[i].getAttribute('height')) / 2));
-            markerAnimate(textNode[i], delay, 200, series, null, location, true);
-            if (shapeElements[i]) {
-                location = new ChartLocation((+shapeElements[i].getAttribute('x')) + ((+shapeElements[i].getAttribute('width')) / 2), (+shapeElements[i].getAttribute('y')) + ((+shapeElements[i].getAttribute('height')) / 2));
-                markerAnimate(shapeElements[i], delay, 200, series, null, location, true);
+        var length = element ? 1 : textNode.length;
+        for (var i = 0; i < length; i++) {
+            if (element) {
+                templateAnimate(element, delay, 200);
             }
+            else {
+                location = new ChartLocation((+textNode[i].getAttribute('x')) + ((+textNode[i].getAttribute('width')) / 2), (+textNode[i].getAttribute('y')) + ((+textNode[i].getAttribute('height')) / 2));
+                markerAnimate(textNode[i], delay, 200, series, null, location, true);
+                if (shapeElements[i]) {
+                    location = new ChartLocation((+shapeElements[i].getAttribute('x')) + ((+shapeElements[i].getAttribute('width')) / 2), (+shapeElements[i].getAttribute('y')) + ((+shapeElements[i].getAttribute('height')) / 2));
+                    markerAnimate(shapeElements[i], delay, 200, series, null, location, true);
+                }
+            }
         }
@@ -280,0 +328,0 @@ };

dist/es6/chart/series/line-series.js

@@ -18,3 +18,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    LineSeries.prototype.render = function (series) {
+    LineSeries.prototype.render = function (series, xAxis, yAxis) {
         var point1;
@@ -31,4 +31,4 @@ var point2;
                 if (prevPoint != null) {
-                    point1 = getPoint(prevPoint.xValue, prevPoint.yValue, series);
-                    point2 = getPoint(point.xValue, point.yValue, series);
+                    point1 = getPoint(prevPoint.xValue, prevPoint.yValue, xAxis, yAxis);
+                    point2 = getPoint(point.xValue, point.yValue, xAxis, yAxis);
                     direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ' +
@@ -39,3 +39,3 @@ 'L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');
                 prevPoint = point;
-                point.symbolLocation = getPoint(point.xValue, point.yValue, series);
+                point.symbolLocation = getPoint(point.xValue, point.yValue, xAxis, yAxis);
                 point.region = new Rect(point.symbolLocation.x - series.marker.width, point.symbolLocation.y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height);
@@ -42,0 +42,0 @@ }

dist/es6/chart/series/scatter-series.js

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    ScatterSeries.prototype.render = function (series) {
+    ScatterSeries.prototype.render = function (series, xAxis, yAxis) {
         var seriesIndex = series.index;
@@ -34,3 +34,3 @@ var marker = series.marker;
             if (point.visible && withInRange(visiblePoints[point.index - 1], point, visiblePoints[point.index + 1], series)) {
-                point.symbolLocation = getPoint(point.xValue, point.yValue, series);
+                point.symbolLocation = getPoint(point.xValue, point.yValue, xAxis, yAxis);
                 symbolId = series.chart.element.id + '_Series_' + seriesIndex + '_Point_' + point.index;
@@ -37,0 +37,0 @@ argsData = { cancel: false, name: pointRender, series: series, point: point, fill: series.interior,

dist/es6/chart/series/spline-series.js

@@ -20,3 +20,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    SplineSeries.prototype.render = function (series) {
+    SplineSeries.prototype.render = function (series, xAxis, yAxis) {
         var chart = series.chart;
@@ -45,6 +45,6 @@ var marker = series.marker;
                     controlPoint2 = data.controlPoint2;
-                    pt1 = getPoint(firstPoint.xValue, firstPoint.yValue, series);
-                    pt2 = getPoint(point.xValue, point.yValue, series);
-                    bpt1 = getPoint(controlPoint1.x, controlPoint1.y, series);
-                    bpt2 = getPoint(controlPoint2.x, controlPoint2.y, series);
+                    pt1 = getPoint(firstPoint.xValue, firstPoint.yValue, xAxis, yAxis);
+                    pt2 = getPoint(point.xValue, point.yValue, xAxis, yAxis);
+                    bpt1 = getPoint(controlPoint1.x, controlPoint1.y, xAxis, yAxis);
+                    bpt2 = getPoint(controlPoint2.x, controlPoint2.y, xAxis, yAxis);
                     direction = direction.concat((startPoint + ' ' + (pt1.x) + ' ' + (pt1.y) + ' ' + 'C' + ' ' + (bpt1.x) + ' '
@@ -55,3 +55,3 @@ + (bpt1.y) + ' ' + (bpt2.x) + ' ' + (bpt2.y) + ' ' + (pt2.x) + ' ' + (pt2.y) + ' '));
                 firstPoint = point;
-                point.symbolLocation = getPoint(point.xValue, point.yValue, series);
+                point.symbolLocation = getPoint(point.xValue, point.yValue, xAxis, yAxis);
                 point.region = new Rect(point.symbolLocation.x - marker.width, point.symbolLocation.y - marker.height, 2 * marker.width, 2 * marker.height);
@@ -58,0 +58,0 @@ }

dist/es6/chart/series/stacking-area-series.js

@@ -18,3 +18,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    StackingAreaSeries.prototype.render = function (series) {
+    StackingAreaSeries.prototype.render = function (series, xAxis, yAxis) {
         var point1;
@@ -30,3 +30,3 @@ var point2;
         var startPoint = 0;
-        point1 = getPoint(visiblePoints[0].xValue, origin, series);
+        point1 = getPoint(visiblePoints[0].xValue, origin, xAxis, yAxis);
         lineDirection = lineDirection.concat('M' + ' ' + (point1.x) + ' ' + (point1.y) + ' ');
@@ -36,5 +36,5 @@ for (var i = 0; i < pointsLength; i++) {
             if (visiblePoints[i].visible && withInRange(visiblePoints[i - 1], visiblePoints[i], visiblePoints[i + 1], series)) {
-                point1 = getPoint(visiblePoints[i].xValue, stackedvalue.endValues[i], series);
+                point1 = getPoint(visiblePoints[i].xValue, stackedvalue.endValues[i], xAxis, yAxis);
                 lineDirection = lineDirection.concat('L' + ' ' + (point1.x) + ' ' + (point1.y) + ' ');
-                visiblePoints[i].symbolLocation = getPoint(visiblePoints[i].xValue, stackedvalue.endValues[i], series);
+                visiblePoints[i].symbolLocation = getPoint(visiblePoints[i].xValue, stackedvalue.endValues[i], xAxis, yAxis);
                 visiblePoints[i].region = new Rect(visiblePoints[i].symbolLocation.x - series.marker.width, visiblePoints[i].symbolLocation.y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height);
@@ -44,7 +44,7 @@ }
                 for (var j = i - 1; j >= startPoint; j--) {
-                    point2 = getPoint(visiblePoints[j].xValue, stackedvalue.startValues[j], series);
+                    point2 = getPoint(visiblePoints[j].xValue, stackedvalue.startValues[j], xAxis, yAxis);
                     lineDirection = lineDirection.concat('L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');
                 }
                 if (visiblePoints[i + 1] && visiblePoints[i + 1].visible) {
-                    point1 = getPoint(visiblePoints[i + 1].xValue, stackedvalue.startValues[i + 1], series);
+                    point1 = getPoint(visiblePoints[i + 1].xValue, stackedvalue.startValues[i + 1], xAxis, yAxis);
                     lineDirection = lineDirection.concat('M' + ' ' + (point1.x) + ' ' + (point1.y) + ' ');
@@ -56,3 +56,3 @@ }
         for (var j = pointsLength - 1; j >= startPoint; j--) {
-            point2 = getPoint(visiblePoints[j].xValue, stackedvalue.startValues[j], series);
+            point2 = getPoint(visiblePoints[j].xValue, stackedvalue.startValues[j], xAxis, yAxis);
             lineDirection = lineDirection.concat('L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');
@@ -59,0 +59,0 @@ }

dist/es6/chart/series/step-area-series.js

@@ -18,3 +18,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    StepAreaSeries.prototype.render = function (series) {
+    StepAreaSeries.prototype.render = function (series, xAxis, yAxis) {
         var currentPoint;
@@ -37,14 +37,14 @@ var secondPoint;
                     start = new ChartLocation(xValue, 0);
-                    currentPoint = getPoint(xValue, origin, series);
+                    currentPoint = getPoint(xValue, origin, xAxis, yAxis);
                     direction += ('M' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
-                    currentPoint = getPoint(xValue, point.yValue, series);
+                    currentPoint = getPoint(xValue, point.yValue, xAxis, yAxis);
                     direction += ('L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
                 }
                 if (prevPoint != null) {
-                    currentPoint = getPoint(point.xValue, point.yValue, series);
-                    secondPoint = getPoint(prevPoint.xValue, prevPoint.yValue, series);
+                    currentPoint = getPoint(point.xValue, point.yValue, xAxis, yAxis);
+                    secondPoint = getPoint(prevPoint.xValue, prevPoint.yValue, xAxis, yAxis);
                     direction += ('L' + ' ' +
                         (currentPoint.x) + ' ' + (secondPoint.y) + 'L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
                 }
-                point.symbolLocation = getPoint(xValue, point.yValue, series);
+                point.symbolLocation = getPoint(xValue, point.yValue, xAxis, yAxis);
                 point.region = new Rect(point.symbolLocation.x - series.marker.width, point.symbolLocation.y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height);
@@ -54,3 +54,3 @@ prevPoint = point;
             if (series.points[i + 1] && !series.points[i + 1].visible) {
-                currentPoint = getPoint(xValue, origin, series);
+                currentPoint = getPoint(xValue, origin, xAxis, yAxis);
                 direction += ('L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y));
@@ -63,3 +63,3 @@ start = null;
             start = { 'x': series.points[pointsLength - 1].xValue, 'y': origin };
-            secondPoint = getPoint(start.x, start.y, series);
+            secondPoint = getPoint(start.x, start.y, xAxis, yAxis);
             direction += ('L' + ' ' + (secondPoint.x) + ' ' + (secondPoint.y) + ' ');
@@ -66,0 +66,0 @@ }

dist/es6/chart/series/step-line-series.js

@@ -18,3 +18,3 @@ var __extends = (this && this.__extends) || (function () {
     }
-    StepLineSeries.prototype.render = function (series) {
+    StepLineSeries.prototype.render = function (series, xAxis, yAxis) {
         var direction = '';
@@ -39,4 +39,4 @@ var startPoint = 'M';
                 if (prevPoint != null) {
-                    point2 = getPoint(point.xValue, point.yValue, series);
-                    point1 = getPoint(prevPoint.xValue, prevPoint.yValue, series);
+                    point2 = getPoint(point.xValue, point.yValue, xAxis, yAxis);
+                    point1 = getPoint(prevPoint.xValue, prevPoint.yValue, xAxis, yAxis);
                     direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ' + 'L' + ' ' +
@@ -47,7 +47,7 @@ (point2.x) + ' ' + (point1.y) + 'L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');
                 else {
-                    point1 = getPoint(point.xValue - lineLength, point.yValue, series);
+                    point1 = getPoint(point.xValue - lineLength, point.yValue, xAxis, yAxis);
                     direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ');
                     startPoint = 'L';
                 }
-                point.symbolLocation = getPoint(point.xValue, point.yValue, series);
+                point.symbolLocation = getPoint(point.xValue, point.yValue, xAxis, yAxis);
                 prevPoint = point;
@@ -61,3 +61,3 @@ point.region = new Rect(point.symbolLocation.x - series.marker.width, point.symbolLocation.y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height);
         }
-        point1 = getPoint((visiblePoints[visiblePoints.length - 1].xValue + lineLength), visiblePoints[visiblePoints.length - 1].yValue, series);
+        point1 = getPoint((visiblePoints[visiblePoints.length - 1].xValue + lineLength), visiblePoints[visiblePoints.length - 1].yValue, xAxis, yAxis);
         direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ');
@@ -64,0 +64,0 @@ pathOptions = new PathOption(series.chart.element.id + '_Series_' + series.index, 'transparent', series.width, series.interior, series.opacity, series.dashArray, direction);

dist/es6/chart/user-interaction/zooming.js

@@ -281,2 +281,3 @@ import { EventHandler, Browser } from '@syncfusion/ej2-base';
         var yAxisLoc;
+        var element;
         if (transX !== null && transY !== null) {
@@ -290,2 +291,3 @@ chart.visibleSeries.forEach(function (value) {
                 value.seriesElement.setAttribute('transform', translate);
+                element = getElement(chart.element.id + '_Series_' + value.index + '_DataLabelCollections');
                 if (value.symbolElement) {
@@ -298,2 +300,5 @@ value.symbolElement.setAttribute('transform', translate);
                 }
+                if (element) {
+                    element.style.visibility = 'hidden';
+                }
             });
@@ -300,0 +305,0 @@ }

dist/es6/common/model/constants.js

@@ -18,1 +18,2 @@ export var loaded = 'loaded';
 export var resized = 'resized';
+export var annotationRender = 'annotationRender';

dist/es6/common/utils/helper.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-import { SvgRenderer, Animation } from '@syncfusion/ej2-base';
+import { SvgRenderer, Animation, compile as templateComplier } from '@syncfusion/ej2-base';
 import { merge } from '@syncfusion/ej2-base';
@@ -203,10 +203,10 @@ import { createElement, remove } from '@syncfusion/ej2-base';
 }
-export function getPoint(xValue, yValue, series) {
-    var xLength = series.xAxis.rect.width;
-    var yLength = series.yAxis.rect.height;
-    xValue = (series.xAxis.valueType === 'Logarithmic' ? logBase(xValue, series.xAxis.logBase) : xValue);
-    yValue = (series.yAxis.valueType === 'Logarithmic' ?
-        logBase(yValue === 0 ? 1 : yValue, series.yAxis.logBase) : yValue);
-    xValue = this.valueToCoefficient(xValue, series.xAxis);
-    yValue = this.valueToCoefficient(yValue, series.yAxis);
+export function getPoint(xValue, yValue, xAxis, yAxis) {
+    var xLength = xAxis.rect.width;
+    var yLength = yAxis.rect.height;
+    xValue = (xAxis.valueType === 'Logarithmic' ? logBase(xValue, xAxis.logBase) : xValue);
+    yValue = (yAxis.valueType === 'Logarithmic' ?
+        logBase(yValue === 0 ? 1 : yValue, yAxis.logBase) : yValue);
+    xValue = this.valueToCoefficient(xValue, xAxis);
+    yValue = this.valueToCoefficient(yValue, yAxis);
     xValue = xValue * xLength;
@@ -320,2 +320,66 @@ yValue = (1 - yValue) * yLength;
 }
+export function templateAnimate(element, delay, duration) {
+    element.style.visibility = 'hidden';
+    new Animation({}).animate(element, {
+        duration: duration,
+        delay: delay,
+        name: 'ZoomIn',
+        progress: function (args) {
+            args.element.style.visibility = 'visible';
+        }
+    });
+}
+export function getTemplateFunction(template) {
+    var templateFn = null;
+    var e;
+    try {
+        if (document.querySelectorAll(template).length) {
+            templateFn = templateComplier(document.querySelector(template).innerHTML.trim());
+        }
+    }
+    catch (e) {
+        templateFn = templateComplier(template);
+    }
+    return templateFn;
+}
+export function createTemplate(childElement, pointIndex, content, chart, point, series) {
+    var templateFn;
+    var templateElement;
+    templateFn = getTemplateFunction(content);
+    try {
+        if (templateFn && templateFn({ chart: chart, series: series, point: point }).length) {
+            templateElement = templateFn({ chart: chart, series: series, point: point });
+            while (templateElement.length > 0) {
+                childElement.appendChild(templateElement[0]);
+            }
+        }
+    }
+    catch (e) {
+        return childElement;
+    }
+    return childElement;
+}
+export function getFontStyle(font) {
+    var style = '';
+    style = 'font-size:' + font.size +
+        '; font-style:' + font.fontStyle + '; font-weight:' + font.fontWeight +
+        '; font-family:' + font.fontFamily + ';opacity:' + font.opacity +
+        '; color:' + font.color + ';';
+    return style;
+}
+export function measureElementRect(element) {
+    var bounds;
+    document.body.appendChild(element);
+    bounds = element.getBoundingClientRect();
+    removeElement(element.id);
+    return bounds;
+}
+export function appendElement(child, parent) {
+    if (child && child.hasChildNodes() && parent) {
+        parent.appendChild(child);
+    }
+    else {
+        return null;
+    }
+}
 export function drawSymbol(location, shape, size, url, options, label) {
@@ -322,0 +386,0 @@ var functionName = 'Path';

package.json

 {
   "name": "@syncfusion/ej2-charts",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Essential JS 2 Chart Components",
@@ -8,4 +8,4 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "^1.0.18",
-    "@syncfusion/ej2-data": "^1.0.14",
+    "@syncfusion/ej2-base": "^1.0.19",
+    "@syncfusion/ej2-data": "^1.0.19",
     "@syncfusion/ej2-popups": "^1.0.17"
@@ -12,0 +12,0 @@ },

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

@@ -1,2 +0,2 @@
-import {Property, Component, Complex, Collection, NotifyPropertyChanges, INotifyPropertyChanged, SvgRenderer} from '@syncfusion/ej2-base';import {ModuleDeclaration, Internationalization, Event, EmitType, Browser, EventHandler, Touch} from '@syncfusion/ej2-base';import { remove, extend, isNullOrUndefined } from '@syncfusion/ej2-base';import { 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} 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, measureText, RectOption, textTrim, showTooltip} from '../common/utils/helper';import { textElement, TextOption, createSvg, calculateSize, removeElement } from '../common/utils/helper';import { Data} from '../common/model/data';import { AccumulationTooltip} from './user-interaction/tooltip';import { PieSeries } from './renderer/pie-series';import { AccumulationDataLabel} from './renderer/dataLabel';import { AccumulationSelection } from './user-interaction/selection';import { AccumulationTheme } from './model/enum';
+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, measureText, RectOption, textTrim, showTooltip } from '../common/utils/helper';import { textElement, TextOption, createSvg, calculateSize, removeElement, getElement } from '../common/utils/helper';import { Data } from '../common/model/data';import { AccumulationTooltip } from './user-interaction/tooltip';import { PieSeries } from './renderer/pie-series';import { AccumulationDataLabel } from './renderer/dataLabel';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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -111,2 +111,8 @@
     /**
+     * The configuration for annotation in chart.
+     */
+
+    annotations?: AccumulationAnnotationSettingsModel[];
+
+    /**
      * Specifies the theme for accumulation chart.
@@ -160,2 +166,9 @@ */
     /**
+     * Triggers before the annotation gets rendered.
+     * @event
+     */
+
+    annotationRender?: EmitType<IAnnotationRenderEventArgs>;
+
+    /**
      * Triggers on hovering the accumulation chart.
@@ -162,0 +175,0 @@ * @event

src/accumulation-chart/accumulation.d.ts

@@ -11,3 +11,3 @@ /**
 import { IAccAnimationCompleteEventArgs, IAccPointRenderEventArgs, IAccLoadedEventArgs, IAccResizeEventArgs } from './model/pie-interface';
-import { ILegendRenderEventArgs, IMouseEventArgs } from '../common/model/interface';
+import { ILegendRenderEventArgs, IMouseEventArgs, IAnnotationRenderEventArgs } from '../common/model/interface';
 import { FontModel, MarginModel, BorderModel, IndexesModel } from '../common/model/base-model';
@@ -23,2 +23,4 @@ import { AccumulationSeriesModel, AccumulationTooltipSettingsModel } from './model/acc-base-model';
 import { AccumulationTheme } from './model/enum';
+import { AccumulationAnnotationSettingsModel } from './model/acc-base-model';
+import { AccumulationAnnotation } from './annotation/annotation';
 export declare class AccumulationChart extends Component<HTMLElement> implements INotifyPropertyChanged {
@@ -47,2 +49,6 @@ /**
     /**
+     * `annotationModule` is used to manipulate and add annotation in chart.
+     */
+    annotationModule: AccumulationAnnotation;
+    /**
      * The width of the chart as a string in order to provide input as both like '100px' or '100%'.
@@ -128,2 +134,6 @@ * If specified as '100%, chart will render to the full width of its parent element.
     /**
+     * The configuration for annotation in chart.
+     */
+    annotations: AccumulationAnnotationSettingsModel[];
+    /**
      * Specifies the theme for accumulation chart.
@@ -168,2 +178,7 @@ */
     /**
+     * Triggers before the annotation gets rendered.
+     * @event
+     */
+    annotationRender: EmitType<IAnnotationRenderEventArgs>;
+    /**
      * Triggers on hovering the accumulation chart.
@@ -313,2 +328,6 @@ * @event
     /**
+     * Method to create the secondary element for tooltip, datalabel and annotaitons.
+     */
+    private createSecondaryElement();
+    /**
      * Method to calculate area type based on series
@@ -345,2 +364,6 @@ */
     /**
+     * To render the annotaitions for accumulation series.
+     */
+    private renderAnnotation();
+    /**
      * Method to process the explode in accumulation chart
@@ -347,0 +370,0 @@ */

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/model/data", "./renderer/pie-series"], 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, data_1, pie_series_1) {
+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/model/data", "./renderer/pie-series", "./model/acc-base"], 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, data_1, pie_series_1, acc_base_2) {
     "use strict";
@@ -203,2 +203,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
         AccumulationChart.prototype.removeSvg = function () {
+            helper_2.removeElement(this.element.id + '_Secondary_Element');
             if (this.svgObject) {
@@ -215,2 +216,8 @@ while (this.svgObject.childNodes.length > 0) {
         };
+        AccumulationChart.prototype.createSecondaryElement = function () {
+            this.element.appendChild(ej2_base_3.createElement('div', {
+                id: this.element.id + '_Secondary_Element',
+                styles: 'position: relative'
+            }));
+        };
         AccumulationChart.prototype.calculateAreaType = function () {
@@ -269,2 +276,3 @@ var series = this.series[0];
             this.renderTitle();
+            this.createSecondaryElement();
             this.renderSeries();
@@ -275,5 +283,11 @@ this.renderLegend();
             this.processExplode();
+            this.renderAnnotation();
             this.trigger('loaded', { accumulation: this });
             this.animateSeries = false;
         };
+        AccumulationChart.prototype.renderAnnotation = function () {
+            if (this.annotationModule) {
+                this.annotationModule.renderAnnotations(helper_2.getElement(this.element.id + '_Secondary_Element'));
+            }
+        };
         AccumulationChart.prototype.processExplode = function () {
@@ -351,2 +365,3 @@ if (!this.visibleSeries[0].explode) {
             var modules = [];
+            var enableAnnotation = false;
             modules.push({
@@ -380,2 +395,11 @@ member: this.type + 'Series',
             }
+            enableAnnotation = this.annotations.some(function (value) {
+                return (value.content !== null);
+            });
+            if (enableAnnotation) {
+                modules.push({
+                    member: 'Annotation',
+                    args: [this, this.annotations]
+                });
+            }
             return modules;
@@ -452,2 +476,5 @@ };
     __decorate([
+        ej2_base_1.Collection([{}], acc_base_2.AccumulationAnnotationSettings)
+    ], AccumulationChart.prototype, "annotations", void 0);
+    __decorate([
         ej2_base_1.Property('Material')
@@ -478,2 +505,5 @@ ], AccumulationChart.prototype, "theme", void 0);
         ej2_base_2.Event()
+    ], AccumulationChart.prototype, "annotationRender", void 0);
+    __decorate([
+        ej2_base_2.Event()
     ], AccumulationChart.prototype, "chartMouseMove", void 0);
@@ -480,0 +510,0 @@ __decorate([

src/accumulation-chart/index.d.ts

@@ -15,1 +15,3 @@ /**
 export * from './model/enum';
+export * from './annotation/annotation';
+export * from '../common/utils/enum';

src/accumulation-chart/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./accumulation", "./model/acc-base", "./renderer/pie-series", "./renderer/legend", "./renderer/dataLabel", "./user-interaction/tooltip", "./user-interaction/selection"], function (require, exports, accumulation_1, acc_base_1, pie_series_1, legend_1, dataLabel_1, tooltip_1, selection_1) {
+define(["require", "exports", "./accumulation", "./model/acc-base", "./renderer/pie-series", "./renderer/legend", "./renderer/dataLabel", "./user-interaction/tooltip", "./user-interaction/selection", "./annotation/annotation"], function (require, exports, accumulation_1, acc_base_1, pie_series_1, legend_1, dataLabel_1, tooltip_1, selection_1, annotation_1) {
     "use strict";
@@ -14,2 +14,3 @@ function __export(m) {
     __export(selection_1);
+    __export(annotation_1);
 });

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

@@ -1,4 +0,76 @@
-import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { isNullOrUndefined} from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { Border, Font, Animation, Index } from '../../common/model/base';import { Rect, ChartLocation, stringToNumber, PathOption} from '../../common/utils/helper';import { AccumulationType, AccumulationLabelPosition, ConnectorType } 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 } from '../../common/model/base-model';import { AccumulationChart} from '../accumulation';
+import { Property, ChildProperty, Complex, createElement } from '@syncfusion/ej2-base';import { isNullOrUndefined } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { Border, Font, Animation, Index } from '../../common/model/base';import { Rect, ChartLocation, stringToNumber, PathOption } from '../../common/utils/helper';import { AccumulationType, AccumulationLabelPosition, ConnectorType } 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 } from '../../common/model/base-model';import { AccumulationChart } from '../accumulation';import { getElement } from '../../common/utils/helper';import { Units, Alignment, Regions, Position } from '../../common/utils/enum';
 
 /**
+ * Interface for a class AccumulationAnnotationSettings
+ * @private
+ */
+export interface AccumulationAnnotationSettingsModel {
+
+    /**
+     * Content of the annotation, which accepts the id of the custom element.
+     * @default null
+     */
+    content?: string;
+
+    /**
+     * if set coordinateUnit as `Pixel` X specifies the axis value
+     * else is specifies pixel or percentage of coordinate
+     * @default 0
+     */
+    x?: string | Date | number;
+
+    /**
+     * if set coordinateUnit as `Pixel` Y specifies the axis value
+     * else is specifies pixel or percentage of coordinate
+     * @default 0
+     */
+    y?: string | number;
+
+    /**
+     * Specifies the coordinate units of the annotation. They are
+     * * Pixel - Annotation renders based on x and y pixel value.
+     * * Point - Annotation renders based on x and y axis value.
+     * @default 'Pixel'
+     */
+
+    coordinateUnits?: Units;
+
+    /**
+     * Specifies the regions of the annotation. They are
+     * * Chart - Annotation renders based on chart coordinates.
+     * * Series - Annotation renders based on series coordinates.
+     * @default 'Chart'
+     */
+
+    region?: Regions;
+
+    /**
+     * Specifies the position of the annotation. They are
+     * * Top - Align the annotation element as top side.
+     * * Bottom - Align the annotation element as bottom side.
+     * * Middle - Align the annotation element as mid point.
+     * @default 'Middle'
+     */
+
+    verticalAlignment?: Position;
+
+    /**
+     * Specifies the alignment of the annotation. They are
+     * * Near - Align the annotation element as top side.
+     * * Far - Align the annotation element as bottom side.
+     * * Center - Align the annotation element as mid point.
+     * @default 'Center'
+     */
+
+    horizontalAlignment?: Alignment;
+
+    /**
+     * Information about annotation for assistive technology.
+     * @default null
+     */
+    description?: string;
+
+}
+
+/**
  * Interface for a class Connector
@@ -96,2 +168,10 @@ */
 
+    /**
+     * Custom template to format the data label content. Use ${point.x} and ${point.y} as a placeholder
+     * text to display the corresponding data point.
+     * @default null
+     */
+
+    template?: string;
+
 }
@@ -98,0 +178,0 @@

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

@@ -14,2 +14,61 @@ /**
 import { AccumulationChart } from '../accumulation';
+import { Units, Alignment, Regions, Position } from '../../common/utils/enum';
+/**
+ * accumulation-chart annotation property
+ */
+/** @private */
+export declare class AccumulationAnnotationSettings extends ChildProperty<AccumulationAnnotationSettings> {
+    /**
+     * Content of the annotation, which accepts the id of the custom element.
+     * @default null
+     */
+    content: string;
+    /**
+     * if set coordinateUnit as `Pixel` X specifies the axis value
+     * else is specifies pixel or percentage of coordinate
+     * @default 0
+     */
+    x: string | Date | number;
+    /**
+     * if set coordinateUnit as `Pixel` Y specifies the axis value
+     * else is specifies pixel or percentage of coordinate
+     * @default 0
+     */
+    y: string | number;
+    /**
+     * Specifies the coordinate units of the annotation. They are
+     * * Pixel - Annotation renders based on x and y pixel value.
+     * * Point - Annotation renders based on x and y axis value.
+     * @default 'Pixel'
+     */
+    coordinateUnits: Units;
+    /**
+     * Specifies the regions of the annotation. They are
+     * * Chart - Annotation renders based on chart coordinates.
+     * * Series - Annotation renders based on series coordinates.
+     * @default 'Chart'
+     */
+    region: Regions;
+    /**
+     * Specifies the position of the annotation. They are
+     * * Top - Align the annotation element as top side.
+     * * Bottom - Align the annotation element as bottom side.
+     * * Middle - Align the annotation element as mid point.
+     * @default 'Middle'
+     */
+    verticalAlignment: Position;
+    /**
+     * Specifies the alignment of the annotation. They are
+     * * Near - Align the annotation element as top side.
+     * * Far - Align the annotation element as bottom side.
+     * * Center - Align the annotation element as mid point.
+     * @default 'Center'
+     */
+    horizontalAlignment: Alignment;
+    /**
+     * Information about annotation for assistive technology.
+     * @default null
+     */
+    description: string;
+}
 export declare class Connector extends ChildProperty<Connector> {
@@ -80,2 +139,8 @@ /**
     connectorStyle: ConnectorModel;
+    /**
+     * Custom template to format the data label content. Use ${point.x} and ${point.y} as a placeholder
+     * text to display the corresponding data point.
+     * @default null
+     */
+    template: string;
 }
@@ -82,0 +147,0 @@ /**

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

@@ -17,5 +17,37 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/model/base", "../../common/utils/helper", "../../common/model/constants", "../../common/model/theme"], function (require, exports, ej2_base_1, ej2_base_2, base_1, helper_1, constants_1, theme_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/model/base", "../../common/utils/helper", "../../common/model/constants", "../../common/model/theme", "../../common/utils/helper"], function (require, exports, ej2_base_1, ej2_base_2, base_1, helper_1, constants_1, theme_1, helper_2) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    var AccumulationAnnotationSettings = (function (_super) {
+        __extends(AccumulationAnnotationSettings, _super);
+        function AccumulationAnnotationSettings() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return AccumulationAnnotationSettings;
+    }(ej2_base_1.ChildProperty));
+    __decorate([
+        ej2_base_1.Property(null)
+    ], AccumulationAnnotationSettings.prototype, "content", void 0);
+    __decorate([
+        ej2_base_1.Property('0')
+    ], AccumulationAnnotationSettings.prototype, "x", void 0);
+    __decorate([
+        ej2_base_1.Property('0')
+    ], AccumulationAnnotationSettings.prototype, "y", void 0);
+    __decorate([
+        ej2_base_1.Property('Pixel')
+    ], AccumulationAnnotationSettings.prototype, "coordinateUnits", void 0);
+    __decorate([
+        ej2_base_1.Property('Chart')
+    ], AccumulationAnnotationSettings.prototype, "region", void 0);
+    __decorate([
+        ej2_base_1.Property('Middle')
+    ], AccumulationAnnotationSettings.prototype, "verticalAlignment", void 0);
+    __decorate([
+        ej2_base_1.Property('Center')
+    ], AccumulationAnnotationSettings.prototype, "horizontalAlignment", void 0);
+    __decorate([
+        ej2_base_1.Property(null)
+    ], AccumulationAnnotationSettings.prototype, "description", void 0);
+    exports.AccumulationAnnotationSettings = AccumulationAnnotationSettings;
     var Connector = (function (_super) {
@@ -75,2 +107,5 @@ __extends(Connector, _super);
     ], AccumulationDataLabelSettings.prototype, "connectorStyle", void 0);
+    __decorate([
+        ej2_base_1.Property(null)
+    ], AccumulationDataLabelSettings.prototype, "template", void 0);
     exports.AccumulationDataLabelSettings = AccumulationDataLabelSettings;
@@ -236,8 +271,14 @@ var AccumulationTooltipSettings = (function (_super) {
             accumulation.accumulationDataLabelModule.findAreaRect();
+            var element = ej2_base_1.createElement('div', {
+                id: accumulation.element.id + '_Series_0' + '_DataLabelCollections'
+            });
             for (var _i = 0, _a = this.points; _i < _a.length; _i++) {
                 var point = _a[_i];
                 if (point.visible) {
-                    accumulation.accumulationDataLabelModule.renderDataLabel(point, this.dataLabel, datalabelGroup, this.points, this.index);
+                    accumulation.accumulationDataLabelModule.renderDataLabel(point, this.dataLabel, datalabelGroup, this.points, this.index, element);
                 }
             }
+            if (this.dataLabel.template !== null && element.childElementCount) {
+                helper_2.getElement(accumulation.element.id + '_Secondary_Element').appendChild(element);
+            }
             accumulation.getSeriesElement().appendChild(datalabelGroup);
@@ -244,0 +285,0 @@ };

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

@@ -21,2 +21,3 @@ /**
     border: BorderModel;
+    template: string;
 }
@@ -23,0 +24,0 @@ export interface IAccTooltipRenderEventArgs extends IChartEventArgs {

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

@@ -88,4 +88,26 @@ import { Size, Rect } from '../../common/utils/helper';
      */
-    renderDataLabel(point: AccPoints, dataLabel: AccumulationDataLabelSettingsModel, parent: Element, points: AccPoints[], series: number): void;
+    renderDataLabel(point: AccPoints, dataLabel: AccumulationDataLabelSettingsModel, parent: Element, points: AccPoints[], series: number, templateElement?: HTMLElement): void;
     /**
+     * To find the template element size
+     * @param element
+     * @param point
+     * @param argsData
+     */
+    private getTemplateSize(element, point, argsData);
+    /**
+     * To set the template element style
+     * @param childElement
+     * @param point
+     * @param parent
+     * @param labelColor
+     * @param fill
+     */
+    private setTemplateStyle(childElement, point, parent, labelColor, fill);
+    /**
+     * Animates the data label template.
+     * @return {void}.
+     * @private
+     */
+    doTemplateAnimation(accumulation: AccumulationChart, element: Element): void;
+    /**
      * To find saturated color for datalabel
@@ -92,0 +114,0 @@ */

src/accumulation-chart/renderer/dataLabel.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper", "../../common/utils/helper", "../model/acc-base", "../../common/model/constants", "../renderer/pie-base"], function (require, exports, ej2_base_1, helper_1, helper_2, helper_3, acc_base_1, constants_1, pie_base_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper", "../../common/utils/helper", "../model/acc-base", "../../common/model/constants", "../renderer/pie-base", "../../common/utils/helper"], function (require, exports, ej2_base_1, helper_1, helper_2, helper_3, acc_base_1, constants_1, pie_base_1, helper_4) {
     "use strict";
@@ -285,3 +285,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
         };
-        AccumulationDataLabel.prototype.renderDataLabel = function (point, dataLabel, parent, points, series) {
+        AccumulationDataLabel.prototype.renderDataLabel = function (point, dataLabel, parent, points, series, templateElement) {
             var id = this.accumulation.element.id + '_datalabel_Series_' + series + '_';
@@ -292,9 +292,16 @@ var datalabelGroup = this.accumulation.renderer.createGroup({ id: id + 'g_' + point.index });
                 cancel: false, name: constants_1.textRender, series: this.accumulation.visibleSeries[0], point: point,
-                text: point.label, border: dataLabel.border, color: dataLabel.fill
+                text: point.label, border: dataLabel.border, color: dataLabel.fill, template: dataLabel.template
             };
             this.accumulation.trigger(constants_1.textRender, argsData);
+            var isTemplate = argsData.template !== null;
             point.labelVisible = !argsData.cancel;
             point.text = point.label = argsData.text;
             this.marginValue = argsData.border.width ? (5 + argsData.border.width) : 1;
-            var textSize = helper_2.measureText(point.label, dataLabel.font);
+            var childElement = ej2_base_1.createElement('div', {
+                id: this.accumulation.element.id + '_Series_' + 0 + '_DataLabel_' + point.index,
+                styles: 'position: absolute;background-color:' + argsData.color + ';' +
+                    helper_4.getFontStyle(dataLabel.font) + ';border:' + argsData.border.width + 'px solid ' + argsData.border.color + ';'
+            });
+            var textSize = isTemplate ? this.getTemplateSize(childElement, point, argsData) :
+                helper_2.measureText(point.label, dataLabel.font);
             textSize.height += 4;
@@ -305,4 +312,9 @@ textSize.width += 4;
                 this.correctLabelRegion(point.labelRegion, textSize);
-                datalabelGroup.appendChild(this.accumulation.renderer.drawRectangle(new helper_2.RectOption(id + 'shape_' + point.index, argsData.color, argsData.border, 1, point.labelRegion, dataLabel.rx, dataLabel.ry)));
-                helper_2.textElement(new helper_1.TextOption(id + 'text_' + point.index, point.labelRegion.x + this.marginValue, point.labelRegion.y + (textSize.height * 3 / 4) + this.marginValue, 'start', point.label, '', 'auto'), dataLabel.font, dataLabel.font.color || this.getSaturatedColor(point, argsData.color), datalabelGroup);
+                if (isTemplate) {
+                    this.setTemplateStyle(childElement, point, templateElement, dataLabel.font.color, argsData.color);
+                }
+                else {
+                    datalabelGroup.appendChild(this.accumulation.renderer.drawRectangle(new helper_2.RectOption(id + 'shape_' + point.index, argsData.color, argsData.border, 1, point.labelRegion, dataLabel.rx, dataLabel.ry)));
+                    helper_2.textElement(new helper_1.TextOption(id + 'text_' + point.index, point.labelRegion.x + this.marginValue, point.labelRegion.y + (textSize.height * 3 / 4) + this.marginValue, 'start', point.label, '', 'auto'), dataLabel.font, dataLabel.font.color || this.getSaturatedColor(point, argsData.color), datalabelGroup);
+                }
                 if (this.accumulation.accumulationLegendModule && (dataLabel.position === 'Outside' || this.accumulation.enableSmartLabels)) {
@@ -319,2 +331,25 @@ this.accumulation.visibleSeries[0].findMaxBounds(this.accumulation.visibleSeries[0].labelBound, point.labelRegion);
         };
+        AccumulationDataLabel.prototype.getTemplateSize = function (element, point, argsData) {
+            var clientRect;
+            element = helper_4.createTemplate(element, point.index, argsData.template, this.accumulation, point, this.accumulation.visibleSeries[0]);
+            clientRect = helper_4.measureElementRect(element);
+            return { width: clientRect.width, height: clientRect.height };
+        };
+        AccumulationDataLabel.prototype.setTemplateStyle = function (childElement, point, parent, labelColor, fill) {
+            childElement.style.left = (point.labelRegion.x) + 'px';
+            childElement.style.top = (point.labelRegion.y) + 'px';
+            childElement.style.color = labelColor ||
+                this.getSaturatedColor(point, fill);
+            if (childElement.childElementCount) {
+                parent.appendChild(childElement);
+                this.doTemplateAnimation(this.accumulation, childElement);
+            }
+        };
+        AccumulationDataLabel.prototype.doTemplateAnimation = function (accumulation, element) {
+            var series = accumulation.visibleSeries[0];
+            var delay = series.animation.delay + series.animation.duration;
+            if (series.animation.enable && accumulation.animateSeries) {
+                helper_4.templateAnimate(element, delay, 200);
+            }
+        };
         AccumulationDataLabel.prototype.getSaturatedColor = function (point, color) {
@@ -321,0 +356,0 @@ var saturatedColor;

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

@@ -130,4 +130,14 @@ 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 tooltip = helper_1.getElement(id);
-            tooltip.style.top = y + 'px';
-            tooltip.style.left = x + 'px';
+            if (tooltip) {
+                tooltip.style.top = y + 'px';
+                tooltip.style.left = x + 'px';
+            }
+            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);
+            }
         };
@@ -134,0 +144,0 @@ AccumulationTooltip.prototype.getTooltipText = function (point, tooltip, seriesIndex) {

src/chart/chart-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, NotifyPropertyChanges, Internationalization, ModuleDeclaration } 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, findPosition, textTrim, showTooltip, removeElement} from '../common/utils/helper';import { textElement, withInBounds, RectOption, ChartLocation, createSvg, PointData } 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 { Logarithmic } from './axis/logarithmic-axis';import { Size, Rect } from '../common/utils/helper';import { SelectionMode, LineType, ZoomMode, ToolbarItems, ChartTheme  } from './utils/enum';import { Series } 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 { RangeColumnSeries } from'./series/range-column-series';import { BubbleSeries } from './series/bubble-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 { ITouches, ILegendRenderEventArgs, IAxisLabelRenderEventArgs, ITextRenderEventArgs } 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 { Component, Property, NotifyPropertyChanges, Internationalization, ModuleDeclaration } 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, findPosition, textTrim, showTooltip, removeElement } from '../common/utils/helper';import { textElement, withInBounds, RectOption, ChartLocation, createSvg, PointData } 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 { Logarithmic } from './axis/logarithmic-axis';import { Size, Rect } from '../common/utils/helper';import { SelectionMode, LineType, ZoomMode, ToolbarItems, ChartTheme } from './utils/enum';import { Series } 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 { RangeColumnSeries } from './series/range-column-series';import { BubbleSeries } from './series/bubble-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 { ITouches, ILegendRenderEventArgs, IAxisLabelRenderEventArgs, ITextRenderEventArgs } 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 { IAnnotationRenderEventArgs } from '../common/model/interface';import { ChartAnnotationSettingsModel } from './model/chart-base-model';import { ChartAnnotationSettings } from './model/chart-base';import { ChartAnnotation } from './annotation/annotation';import { getElement } from '../common/utils/helper';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -269,2 +269,8 @@
     /**
+     * The configuration for annotation in chart.
+     */
+
+    annotations?: ChartAnnotationSettingsModel[];
+
+    /**
      * The palette for chart series.
@@ -359,2 +365,9 @@ * @default []
     /**
+     * Triggers before the annotation gets rendered.
+     * @event
+     */
+
+    annotationRender?: EmitType<IAnnotationRenderEventArgs>;
+
+    /**
      * Triggers after chart loaded.
@@ -361,0 +374,0 @@ * @event

src/chart/chart.d.ts

@@ -42,2 +42,5 @@ import { Component, Internationalization, ModuleDeclaration } from '@syncfusion/ej2-base';
 import { IZoomCompleteEventArgs, ILoadedEventArgs, IAnimationCompleteEventArgs, IMouseEventArgs } from '../common/model/interface';
+import { IAnnotationRenderEventArgs } from '../common/model/interface';
+import { ChartAnnotationSettingsModel } from './model/chart-base-model';
+import { ChartAnnotation } from './annotation/annotation';
 /**
@@ -243,2 +246,6 @@ * Configures the tooltip in chart.
     /**
+     * `annotationModule` is used to manipulate and add annotation in chart.
+     */
+    annotationModule: ChartAnnotation;
+    /**
      * `tooltipModule` is used to manipulate and add tooltip for series.
@@ -346,2 +353,6 @@ */
     /**
+     * The configuration for annotation in chart.
+     */
+    annotations: ChartAnnotationSettingsModel[];
+    /**
      * The palette for chart series.
@@ -423,2 +434,7 @@ * @default []
     /**
+     * Triggers before the annotation gets rendered.
+     * @event
+     */
+    annotationRender: EmitType<IAnnotationRenderEventArgs>;
+    /**
      * Triggers after chart loaded.
@@ -607,2 +623,3 @@ * @event
     private renderElements();
+    private renderAnnotation();
     private processData();
@@ -609,0 +626,0 @@ private calculateBounds();

src/chart/chart.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../common/utils/helper", "../common/utils/helper", "../common/model/theme", "../common/model/base", "./axis/axis", "./axis/cartesian-panel", "../common/utils/helper", "./series/chart-series", "../common/model/data", "../common/legend/legend", "../common/model/constants"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_base_5, ej2_base_6, helper_1, helper_2, theme_1, base_1, axis_1, cartesian_panel_1, helper_3, chart_series_1, data_1, legend_1, constants_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../common/utils/helper", "../common/utils/helper", "../common/model/theme", "../common/model/base", "./axis/axis", "./axis/cartesian-panel", "../common/utils/helper", "./series/chart-series", "../common/model/data", "../common/legend/legend", "../common/model/constants", "./model/chart-base", "../common/utils/helper"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_base_5, ej2_base_6, helper_1, helper_2, theme_1, base_1, axis_1, cartesian_panel_1, helper_3, chart_series_1, data_1, legend_1, constants_1, chart_base_1, helper_4) {
     "use strict";
@@ -199,4 +199,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
             }
+            this.renderAnnotation();
             this.trigger('loaded', { chart: this });
         };
+        Chart.prototype.renderAnnotation = function () {
+            if (this.annotationModule) {
+                this.annotationModule.renderAnnotations(helper_4.getElement(this.element.id + '_Secondary_Element'));
+            }
+        };
         Chart.prototype.processData = function () {
@@ -714,2 +720,3 @@ var series;
             var zooming = this.zoomSettings;
+            var enableAnnotation = false;
             series.map(function (value) {
@@ -768,2 +775,11 @@ _this.isLegend = (_this.legendSettings.visible && ((value.name !== '') || !!_this.isLegend));
             }
+            enableAnnotation = this.annotations.some(function (value) {
+                return (value.content !== null);
+            });
+            if (enableAnnotation) {
+                modules.push({
+                    member: 'Annotation',
+                    args: [this, this.annotations]
+                });
+            }
             return modules;
@@ -993,2 +1009,5 @@ };
     __decorate([
+        ej2_base_6.Collection([{}], chart_base_1.ChartAnnotationSettings)
+    ], Chart.prototype, "annotations", void 0);
+    __decorate([
         ej2_base_1.Property([])
@@ -1031,2 +1050,5 @@ ], Chart.prototype, "palettes", void 0);
         ej2_base_6.Event()
+    ], Chart.prototype, "annotationRender", void 0);
+    __decorate([
+        ej2_base_6.Event()
     ], Chart.prototype, "loaded", void 0);
@@ -1033,0 +1055,0 @@ __decorate([

src/chart/index.d.ts

@@ -38,1 +38,5 @@ /**
 export * from '../common/model/base-model';
+export * from './annotation/annotation';
+export * from './model/chart-base-model';
+export * from './model/chart-base';
+export * from '../common/utils/enum';

src/chart/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./chart", "./axis/axis", "./axis/date-time-axis", "./axis/category-axis", "./axis/logarithmic-axis", "../common/model/base", "./series/line-series", "./series/column-series", "./series/area-series", "./series/bar-series", "./series/stacking-bar-series", "./series/stacking-column-series", "./series/step-line-series", "./series/step-area-series", "./series/stacking-area-series", "./series/scatter-series", "./series/range-column-series", "./series/bubble-series", "./series/spline-series", "./series/marker", "../common/utils/helper", "./user-interaction/crosshair", "./user-interaction/tooltip", "./user-interaction/zooming", "./user-interaction/selection", "./series/data-label", "./series/chart-series", "./legend/legend"], function (require, exports, chart_1, axis_1, date_time_axis_1, category_axis_1, logarithmic_axis_1, base_1, line_series_1, column_series_1, area_series_1, bar_series_1, stacking_bar_series_1, stacking_column_series_1, step_line_series_1, step_area_series_1, stacking_area_series_1, scatter_series_1, range_column_series_1, bubble_series_1, spline_series_1, marker_1, helper_1, crosshair_1, tooltip_1, zooming_1, selection_1, data_label_1, chart_series_1, legend_1) {
+define(["require", "exports", "./chart", "./axis/axis", "./axis/date-time-axis", "./axis/category-axis", "./axis/logarithmic-axis", "../common/model/base", "./series/line-series", "./series/column-series", "./series/area-series", "./series/bar-series", "./series/stacking-bar-series", "./series/stacking-column-series", "./series/step-line-series", "./series/step-area-series", "./series/stacking-area-series", "./series/scatter-series", "./series/range-column-series", "./series/bubble-series", "./series/spline-series", "./series/marker", "../common/utils/helper", "./user-interaction/crosshair", "./user-interaction/tooltip", "./user-interaction/zooming", "./user-interaction/selection", "./series/data-label", "./series/chart-series", "./legend/legend", "./annotation/annotation", "./model/chart-base"], function (require, exports, chart_1, axis_1, date_time_axis_1, category_axis_1, logarithmic_axis_1, base_1, line_series_1, column_series_1, area_series_1, bar_series_1, stacking_bar_series_1, stacking_column_series_1, step_line_series_1, step_area_series_1, stacking_area_series_1, scatter_series_1, range_column_series_1, bubble_series_1, spline_series_1, marker_1, helper_1, crosshair_1, tooltip_1, zooming_1, selection_1, data_label_1, chart_series_1, legend_1, annotation_1, chart_base_1) {
     "use strict";
@@ -35,2 +35,4 @@ function __export(m) {
     __export(legend_1);
+    __export(annotation_1);
+    __export(chart_base_1);
 });

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

 import { Chart } from '../chart';
 import { Series } from './chart-series';
 import { LineBase } from './line-base';
+import { Axis } from '../../chart/axis/axis';
 /**
@@ -13,3 +14,3 @@ * Area Module used to render the Area series.
      */
-    render(series: Series): void;
+    render(series: Series, xAxis: Axis, yAxis: Axis): void;
     /**
@@ -16,0 +17,0 @@ * To destroy the area series.

src/chart/series/area-series.js

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {
         }
-        AreaSeries.prototype.render = function (series) {
+        AreaSeries.prototype.render = function (series, xAxis, yAxis) {
             var firstPoint;
@@ -39,10 +39,10 @@ var endPoint;
                         startPoint.y = origin;
-                        firstPoint = helper_1.getPoint(currentXValue, origin, series);
+                        firstPoint = helper_1.getPoint(currentXValue, origin, xAxis, yAxis);
                         direction += ('M' + ' ' + (firstPoint.x) + ' ' + (firstPoint.y) + ' ');
                     }
-                    firstPoint = helper_1.getPoint(currentXValue, point.yValue, series);
+                    firstPoint = helper_1.getPoint(currentXValue, point.yValue, xAxis, yAxis);
                     direction += ('L' + ' ' + (firstPoint.x) + ' ' + (firstPoint.y) + ' ');
                     if (series.points[i + 1] && !series.points[i + 1].visible) {
-                        firstPoint = helper_1.getPoint(currentXValue, origin, series);
-                        endPoint = helper_1.getPoint(startPoint.x, startPoint.y, series);
+                        firstPoint = helper_1.getPoint(currentXValue, origin, xAxis, yAxis);
+                        endPoint = helper_1.getPoint(startPoint.x, startPoint.y, xAxis, yAxis);
                         direction += ('L' + ' ' + (firstPoint.x) + ' ' + (firstPoint.y) + ' ' + 'L' +
@@ -52,3 +52,3 @@ ' ' + (endPoint.x) + ' ' + (endPoint.y) + ' ');
                     }
-                    point.symbolLocation = helper_1.getPoint(currentXValue, point.yValue, series);
+                    point.symbolLocation = helper_1.getPoint(currentXValue, point.yValue, xAxis, yAxis);
                     point.region = new helper_1.Rect(point.symbolLocation.x - series.marker.width, point.symbolLocation.y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height);
@@ -59,3 +59,3 @@ }
                 startPoint = { 'x': series.points[pointsLength - 1].xValue, 'y': origin };
-                endPoint = helper_1.getPoint(startPoint.x, startPoint.y, series);
+                endPoint = helper_1.getPoint(startPoint.x, startPoint.y, xAxis, yAxis);
                 direction += ('L' + ' ' + (endPoint.x) + ' ' + (endPoint.y) + ' ');
@@ -62,0 +62,0 @@ }

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

 import { Chart } from '../chart';
 import { Series } from './chart-series';
+import { Axis } from '../../chart/axis/axis';
 /**
@@ -12,3 +13,3 @@ * Bubble Module used to render the Bubble series.
      */
-    render(series: Series): void;
+    render(series: Series, xAxis: Axis, yAxis: Axis): void;
     /**
@@ -15,0 +16,0 @@ * To destroy the Bubble.

src/chart/series/bubble-series.js

@@ -7,3 +7,3 @@ define(["require", "exports", "../../common/utils/helper", "../../common/model/constants"], function (require, exports, helper_1, constants_1) {
         }
-        BubbleSeries.prototype.render = function (series) {
+        BubbleSeries.prototype.render = function (series, xAxis, yAxis) {
             var marker = series.marker;
@@ -41,3 +41,3 @@ var visiblePoints = series.points;
                     helper_1.withInRange(visiblePoints[bubblePoint.index - 1], bubblePoint, visiblePoints[bubblePoint.index + 1], series)) {
-                    bubblePoint.symbolLocation = helper_1.getPoint(bubblePoint.xValue, bubblePoint.yValue, series);
+                    bubblePoint.symbolLocation = helper_1.getPoint(bubblePoint.xValue, bubblePoint.yValue, xAxis, yAxis);
                     if ((series.maxRadius === null || series.minRadius === null)) {
@@ -44,0 +44,0 @@ segmentRadius = radius * Math.abs(+bubblePoint.size / maximumSize);

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

@@ -1,2 +0,2 @@
-import { Property, ChildProperty, Complex, SvgRenderer, DateFormatOptions } from '@syncfusion/ej2-base';import { isNullOrUndefined } from '@syncfusion/ej2-base';import { firstToLowerCase, ChartLocation, Rect, logBase, StackValues, RectOption, ControlPoints } from '../../common/utils/helper';import { ChartSeriesType, ChartShape, LegendShape, LabelAlignment, LabelPosition, SeriesValueType } from '../utils/enum';import { BorderModel, FontModel, MarginModel, AnimationModel } from '../../common/model/base-model';import { Border, Font, Margin, Animation } from '../../common/model/base';import { DataManager, Query } 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 { Property, ChildProperty, Complex, SvgRenderer, DateFormatOptions } from '@syncfusion/ej2-base';import { isNullOrUndefined } from '@syncfusion/ej2-base';import { firstToLowerCase, ChartLocation, Rect, logBase, StackValues, RectOption, ControlPoints } from '../../common/utils/helper';import { ChartSeriesType, ChartShape, LegendShape, LabelPosition, SeriesValueType } from '../utils/enum';import { BorderModel, FontModel, MarginModel, AnimationModel } from '../../common/model/base-model';import { Border, Font, Margin, Animation } from '../../common/model/base';import { DataManager, Query } 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';
 
@@ -75,3 +75,3 @@ /**
      */
-    alignment?: LabelAlignment;
+    alignment?: Alignment;
 
@@ -96,2 +96,10 @@ /**
 
+    /**
+     * Custom template to show the data label. Use ${point.x} and ${point.y} as a placeholder
+     * text to display the corresponding data point.
+     * @default null
+     */
+
+    template?: string;
+
 }
@@ -98,0 +106,0 @@

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

 import { ChildProperty } from '@syncfusion/ej2-base';
 import { DataLabelSettingsModel, MarkerSettingsModel } from '../series/chart-series-model';
 import { ChartLocation, Rect, StackValues, ControlPoints } from '../../common/utils/helper';
-import { ChartSeriesType, ChartShape, LegendShape, LabelAlignment, LabelPosition, SeriesValueType } from '../utils/enum';
+import { ChartSeriesType, ChartShape, LegendShape, LabelPosition, SeriesValueType } from '../utils/enum';
 import { BorderModel, FontModel, MarginModel, AnimationModel } from '../../common/model/base-model';
@@ -10,2 +10,3 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Data } from '../../common/model/data';
+import { Alignment } from '../../common/utils/enum';
 /**
@@ -82,3 +83,3 @@ * Points model for the series.
      */
-    alignment: LabelAlignment;
+    alignment: Alignment;
     /**
@@ -96,2 +97,8 @@ * Option for customizing the border lines.
     font: FontModel;
+    /**
+     * Custom template to show the data label. Use ${point.x} and ${point.y} as a placeholder
+     * text to display the corresponding data point.
+     * @default null
+     */
+    template: string;
 }
@@ -98,0 +105,0 @@ /**

src/chart/series/chart-series.js

@@ -68,2 +68,5 @@ var __extends = (this && this.__extends) || (function () {
     ], DataLabelSettings.prototype, "font", void 0);
+    __decorate([
+        ej2_base_1.Property(null)
+    ], DataLabelSettings.prototype, "template", void 0);
     exports.DataLabelSettings = DataLabelSettings;
@@ -386,3 +389,3 @@ var MarkerSettings = (function (_super) {
                 this.createSeriesElements(chart);
-                chart[seriesType + 'SeriesModule'].render(this);
+                chart[seriesType + 'SeriesModule'].render(this, this.xAxis, this.yAxis);
                 if (this.marker.dataLabel.visible) {
@@ -389,0 +392,0 @@ chart.dataLabelModule.render(this, this.chart, this.marker.dataLabel);

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

@@ -30,2 +30,8 @@ import { Chart } from '../chart';
     render(series: Series, chart: Chart, dataLabel: DataLabelSettingsModel): void;
+    /**
+     * Render the data label template.
+     * @return {void}
+     * @private
+     */
+    private createDataLabelTemplate(parentElement, series, dataLabel, point, data, labelIndex);
     private calculateTextPosition(point, series, textSize, dataLabel, labelIndex);
@@ -43,3 +49,3 @@ private calculateRectPosition(y, rect, isMinus, position, series, textSize, labelIndex);
      */
-    doDataLabelAnimation(series: Series): void;
+    doDataLabelAnimation(series: Series, element?: Element): void;
     private getPosition(index);
@@ -46,0 +52,0 @@ /**

src/chart/series/data-label.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "../../common/utils/helper", "../../common/utils/helper", "../../common/model/constants"], function (require, exports, helper_1, helper_2, constants_1) {
+define(["require", "exports", "../../common/utils/helper", "../../common/utils/helper", "../../common/model/constants", "../../common/utils/helper", "@syncfusion/ej2-base"], function (require, exports, helper_1, helper_2, constants_1, helper_3, ej2_base_1) {
     "use strict";
@@ -22,11 +22,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.yAxisInversed = series.yAxis.isInversed;
+            var element = ej2_base_1.createElement('div', {
+                id: chart.element.id + '_Series_' + series.index + '_DataLabelCollections'
+            });
             series.points.map(function (point, index) {
                 _this.margin = dataLabel.margin;
                 var labelText = [];
+                var labelLength;
                 border = { width: dataLabel.border.width, color: dataLabel.border.color };
                 if (point.symbolLocation) {
                     labelText = helper_2.getLabelText(point, series, chart);
-                    for (var i = 0; i < labelText.length; i++) {
+                    labelLength = labelText.length;
+                    for (var i = 0; i < labelLength; i++) {
                         argsData = {
-                            cancel: false, name: constants_1.textRender, series: series, point: point, text: labelText[i], border: border, color: dataLabel.fill
+                            cancel: false, name: constants_1.textRender, series: series,
+                            point: point, text: labelText[i], border: border,
+                            color: dataLabel.fill, template: dataLabel.template
                         };
@@ -36,14 +43,19 @@ chart.trigger(constants_1.textRender, argsData);
                             _this.fontBackground = argsData.color;
-                            textSize = helper_2.measureText(argsData.text, dataLabel.font);
                             _this.isDataLabelShape(argsData);
                             _this.markerHeight = series.type === 'Bubble' ? (point.region.height / 2) : _this.markerHeight;
-                            rect = _this.calculateTextPosition(point, series, textSize, dataLabel, i);
-                            if (!helper_1.isCollide(rect, chart.dataLabelCollections)) {
-                                chart.dataLabelCollections.push(rect);
-                                if (_this.isShape) {
-                                    series.shapeElement.appendChild(chart.renderer.drawRectangle(new helper_1.RectOption(_this.commonId + index + '_TextShape_' + i, argsData.color, argsData.border, dataLabel.opacity, rect, dataLabel.rx, dataLabel.ry)));
+                            if (argsData.template !== null) {
+                                _this.createDataLabelTemplate(element, series, dataLabel, point, argsData, i);
+                            }
+                            else {
+                                textSize = helper_2.measureText(argsData.text, dataLabel.font);
+                                rect = _this.calculateTextPosition(point, series, textSize, dataLabel, i);
+                                if (!helper_1.isCollide(rect, chart.dataLabelCollections)) {
+                                    chart.dataLabelCollections.push(rect);
+                                    if (_this.isShape) {
+                                        series.shapeElement.appendChild(chart.renderer.drawRectangle(new helper_1.RectOption(_this.commonId + index + '_TextShape_' + i, argsData.color, argsData.border, dataLabel.opacity, rect, dataLabel.rx, dataLabel.ry)));
+                                    }
+                                    rgbValue = helper_2.convertHexToColor(helper_2.colorNameToHex(_this.fontBackground));
+                                    contrast = Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000);
+                                    helper_2.textElement(new helper_1.TextOption(_this.commonId + index + '_Text_' + i, rect.x + _this.margin.left + textSize.width / 2, rect.y + _this.margin.top + textSize.height * 3 / 4, 'middle', argsData.text, 'rotate(0,' + (rect.x) + ',' + (rect.y) + ')', 'auto'), dataLabel.font, dataLabel.font.color || (contrast >= 128 ? 'black' : 'white'), series.textElement);
                                 }
-                                rgbValue = helper_2.convertHexToColor(helper_2.colorNameToHex(_this.fontBackground));
-                                contrast = Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000);
-                                helper_2.textElement(new helper_1.TextOption(_this.commonId + index + '_Text_' + i, rect.x + _this.margin.left + textSize.width / 2, rect.y + _this.margin.top + textSize.height * 3 / 4, 'middle', argsData.text, 'rotate(0,' + (rect.x) + ',' + (rect.y) + ')', 'auto'), dataLabel.font, dataLabel.font.color || (contrast >= 128 ? 'black' : 'white'), series.textElement);
                             }
@@ -54,3 +66,31 @@ }
             });
+            if (element.childElementCount) {
+                helper_3.getElement(chart.element.id + '_Secondary_Element').appendChild(element);
+            }
         };
+        DataLabel.prototype.createDataLabelTemplate = function (parentElement, series, dataLabel, point, data, labelIndex) {
+            this.margin = { left: 0, right: 0, bottom: 0, top: 0 };
+            var childElement = helper_3.createTemplate(ej2_base_1.createElement('div', {
+                id: this.chart.element.id + '_Series_' + series.index + '_DataLabel_'
+                    + point.index + (labelIndex ? ('_' + labelIndex) : ''),
+                styles: 'position: absolute;background-color:' + data.color + ';' +
+                    helper_3.getFontStyle(dataLabel.font) + ';border:' + data.border.width + 'px solid ' + data.border.color + ';'
+            }), point.index, data.template, this.chart, point, series);
+            var elementRect = helper_3.measureElementRect(childElement);
+            var rect = this.calculateTextPosition(point, series, { width: elementRect.width, height: elementRect.height }, dataLabel, labelIndex);
+            childElement.style.left = (series.clipRect.x + rect.x) + 'px';
+            childElement.style.top = (series.clipRect.y + rect.y) + 'px';
+            var rgbValue = helper_2.convertHexToColor(helper_2.colorNameToHex(this.fontBackground));
+            childElement.style.color = dataLabel.font.color ||
+                ((Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000)) >= 128 ? 'black' : 'white');
+            if (childElement.childElementCount && !helper_1.isCollide(rect, this.chart.dataLabelCollections)
+                && (point.yValue === undefined || helper_3.withIn(point.yValue, series.yAxis.visibleRange))
+                && helper_3.withIn(point.xValue, series.xAxis.visibleRange)) {
+                this.chart.dataLabelCollections.push(rect);
+                parentElement.appendChild(childElement);
+                if (series.animation.enable && this.chart.animateSeries) {
+                    this.doDataLabelAnimation(series, childElement);
+                }
+            }
+        };
         DataLabel.prototype.calculateTextPosition = function (point, series, textSize, dataLabel, labelIndex) {
@@ -265,3 +305,3 @@ var location = new helper_1.ChartLocation(point.symbolLocation.x, point.symbolLocation.y);
         };
-        DataLabel.prototype.doDataLabelAnimation = function (series) {
+        DataLabel.prototype.doDataLabelAnimation = function (series, element) {
             var shapeElements = series.shapeElement.childNodes;
@@ -271,9 +311,15 @@ var textNode = series.textElement.childNodes;
             var location;
-            for (var i = 0, count = textNode.length; i < count; i++) {
-                location = new helper_1.ChartLocation((+textNode[i].getAttribute('x')) + ((+textNode[i].getAttribute('width')) / 2), (+textNode[i].getAttribute('y')) + ((+textNode[i].getAttribute('height')) / 2));
-                helper_1.markerAnimate(textNode[i], delay, 200, series, null, location, true);
-                if (shapeElements[i]) {
-                    location = new helper_1.ChartLocation((+shapeElements[i].getAttribute('x')) + ((+shapeElements[i].getAttribute('width')) / 2), (+shapeElements[i].getAttribute('y')) + ((+shapeElements[i].getAttribute('height')) / 2));
-                    helper_1.markerAnimate(shapeElements[i], delay, 200, series, null, location, true);
+            var length = element ? 1 : textNode.length;
+            for (var i = 0; i < length; i++) {
+                if (element) {
+                    helper_3.templateAnimate(element, delay, 200);
                 }
+                else {
+                    location = new helper_1.ChartLocation((+textNode[i].getAttribute('x')) + ((+textNode[i].getAttribute('width')) / 2), (+textNode[i].getAttribute('y')) + ((+textNode[i].getAttribute('height')) / 2));
+                    helper_1.markerAnimate(textNode[i], delay, 200, series, null, location, true);
+                    if (shapeElements[i]) {
+                        location = new helper_1.ChartLocation((+shapeElements[i].getAttribute('x')) + ((+shapeElements[i].getAttribute('width')) / 2), (+shapeElements[i].getAttribute('y')) + ((+shapeElements[i].getAttribute('height')) / 2));
+                        helper_1.markerAnimate(shapeElements[i], delay, 200, series, null, location, true);
+                    }
+                }
             }
@@ -280,0 +326,0 @@ };

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

 import { Chart } from '../chart';
 import { Series } from './chart-series';
 import { LineBase } from './line-base';
+import { Axis } from '../../chart/axis/axis';
 /**
@@ -13,3 +14,3 @@ * Line Module used to render the line series.
      */
-    render(series: Series): void;
+    render(series: Series, xAxis: Axis, yAxis: Axis): void;
     /**
@@ -16,0 +17,0 @@ * Animates the series.

src/chart/series/line-series.js

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {
         }
-        LineSeries.prototype.render = function (series) {
+        LineSeries.prototype.render = function (series, xAxis, yAxis) {
             var point1;
@@ -32,4 +32,4 @@ var point2;
                     if (prevPoint != null) {
-                        point1 = helper_1.getPoint(prevPoint.xValue, prevPoint.yValue, series);
-                        point2 = helper_1.getPoint(point.xValue, point.yValue, series);
+                        point1 = helper_1.getPoint(prevPoint.xValue, prevPoint.yValue, xAxis, yAxis);
+                        point2 = helper_1.getPoint(point.xValue, point.yValue, xAxis, yAxis);
                         direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ' +
@@ -40,3 +40,3 @@ 'L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');
                     prevPoint = point;
-                    point.symbolLocation = helper_1.getPoint(point.xValue, point.yValue, series);
+                    point.symbolLocation = helper_1.getPoint(point.xValue, point.yValue, xAxis, yAxis);
                     point.region = new helper_1.Rect(point.symbolLocation.x - series.marker.width, point.symbolLocation.y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height);
@@ -43,0 +43,0 @@ }

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

 import { Chart } from '../chart';
 import { Series } from './chart-series';
 import { LineBase } from './line-base';
+import { Axis } from '../../chart/axis/axis';
 /**
@@ -13,3 +14,3 @@ * Scatter Module used to render the scatter series.
      */
-    render(series: Series): void;
+    render(series: Series, xAxis: Axis, yAxis: Axis): void;
     /**
@@ -16,0 +17,0 @@ * Animates the series.

src/chart/series/scatter-series.js

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {
         }
-        ScatterSeries.prototype.render = function (series) {
+        ScatterSeries.prototype.render = function (series, xAxis, yAxis) {
             var seriesIndex = series.index;
@@ -34,3 +34,3 @@ var marker = series.marker;
                 if (point.visible && helper_1.withInRange(visiblePoints[point.index - 1], point, visiblePoints[point.index + 1], series)) {
-                    point.symbolLocation = helper_1.getPoint(point.xValue, point.yValue, series);
+                    point.symbolLocation = helper_1.getPoint(point.xValue, point.yValue, xAxis, yAxis);
                     symbolId = series.chart.element.id + '_Series_' + seriesIndex + '_Point_' + point.index;
@@ -37,0 +37,0 @@ argsData = { cancel: false, name: constants_1.pointRender, series: series, point: point, fill: series.interior,

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

@@ -5,2 +5,3 @@ import { ControlPoints } from '../../common/utils/helper';
 import { LineBase } from './line-base';
+import { Axis } from '../../chart/axis/axis';
 /**
@@ -16,3 +17,3 @@ * Spline Module used to render the spline series.
      */
-    render(series: Series): void;
+    render(series: Series, xAxis: Axis, yAxis: Axis): void;
     /**
@@ -19,0 +20,0 @@ * To find the control points for spline.

src/chart/series/spline-series.js

@@ -21,3 +21,3 @@ var __extends = (this && this.__extends) || (function () {
         }
-        SplineSeries.prototype.render = function (series) {
+        SplineSeries.prototype.render = function (series, xAxis, yAxis) {
             var chart = series.chart;
@@ -46,6 +46,6 @@ var marker = series.marker;
                         controlPoint2 = data.controlPoint2;
-                        pt1 = helper_1.getPoint(firstPoint.xValue, firstPoint.yValue, series);
-                        pt2 = helper_1.getPoint(point.xValue, point.yValue, series);
-                        bpt1 = helper_1.getPoint(controlPoint1.x, controlPoint1.y, series);
-                        bpt2 = helper_1.getPoint(controlPoint2.x, controlPoint2.y, series);
+                        pt1 = helper_1.getPoint(firstPoint.xValue, firstPoint.yValue, xAxis, yAxis);
+                        pt2 = helper_1.getPoint(point.xValue, point.yValue, xAxis, yAxis);
+                        bpt1 = helper_1.getPoint(controlPoint1.x, controlPoint1.y, xAxis, yAxis);
+                        bpt2 = helper_1.getPoint(controlPoint2.x, controlPoint2.y, xAxis, yAxis);
                         direction = direction.concat((startPoint + ' ' + (pt1.x) + ' ' + (pt1.y) + ' ' + 'C' + ' ' + (bpt1.x) + ' '
@@ -56,3 +56,3 @@ + (bpt1.y) + ' ' + (bpt2.x) + ' ' + (bpt2.y) + ' ' + (pt2.x) + ' ' + (pt2.y) + ' '));
                     firstPoint = point;
-                    point.symbolLocation = helper_1.getPoint(point.xValue, point.yValue, series);
+                    point.symbolLocation = helper_1.getPoint(point.xValue, point.yValue, xAxis, yAxis);
                     point.region = new helper_1.Rect(point.symbolLocation.x - marker.width, point.symbolLocation.y - marker.height, 2 * marker.width, 2 * marker.height);
@@ -59,0 +59,0 @@ }

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

 import { Chart } from '../chart';
 import { Series } from './chart-series';
 import { LineBase } from './line-base';
+import { Axis } from '../../chart/axis/axis';
 /**
@@ -13,3 +14,3 @@ * Stacking Area Module used to render the Stacking Area series.
      */
-    render(series: Series): void;
+    render(series: Series, xAxis: Axis, yAxis: Axis): void;
     /**
@@ -16,0 +17,0 @@ * Animates the series.

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

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {
         }
-        StackingAreaSeries.prototype.render = function (series) {
+        StackingAreaSeries.prototype.render = function (series, xAxis, yAxis) {
             var point1;
@@ -31,3 +31,3 @@ var point2;
             var startPoint = 0;
-            point1 = helper_1.getPoint(visiblePoints[0].xValue, origin, series);
+            point1 = helper_1.getPoint(visiblePoints[0].xValue, origin, xAxis, yAxis);
             lineDirection = lineDirection.concat('M' + ' ' + (point1.x) + ' ' + (point1.y) + ' ');
@@ -37,5 +37,5 @@ for (var i = 0; i < pointsLength; i++) {
                 if (visiblePoints[i].visible && helper_1.withInRange(visiblePoints[i - 1], visiblePoints[i], visiblePoints[i + 1], series)) {
-                    point1 = helper_1.getPoint(visiblePoints[i].xValue, stackedvalue.endValues[i], series);
+                    point1 = helper_1.getPoint(visiblePoints[i].xValue, stackedvalue.endValues[i], xAxis, yAxis);
                     lineDirection = lineDirection.concat('L' + ' ' + (point1.x) + ' ' + (point1.y) + ' ');
-                    visiblePoints[i].symbolLocation = helper_1.getPoint(visiblePoints[i].xValue, stackedvalue.endValues[i], series);
+                    visiblePoints[i].symbolLocation = helper_1.getPoint(visiblePoints[i].xValue, stackedvalue.endValues[i], xAxis, yAxis);
                     visiblePoints[i].region = new helper_1.Rect(visiblePoints[i].symbolLocation.x - series.marker.width, visiblePoints[i].symbolLocation.y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height);
@@ -45,7 +45,7 @@ }
                     for (var j = i - 1; j >= startPoint; j--) {
-                        point2 = helper_1.getPoint(visiblePoints[j].xValue, stackedvalue.startValues[j], series);
+                        point2 = helper_1.getPoint(visiblePoints[j].xValue, stackedvalue.startValues[j], xAxis, yAxis);
                         lineDirection = lineDirection.concat('L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');
                     }
                     if (visiblePoints[i + 1] && visiblePoints[i + 1].visible) {
-                        point1 = helper_1.getPoint(visiblePoints[i + 1].xValue, stackedvalue.startValues[i + 1], series);
+                        point1 = helper_1.getPoint(visiblePoints[i + 1].xValue, stackedvalue.startValues[i + 1], xAxis, yAxis);
                         lineDirection = lineDirection.concat('M' + ' ' + (point1.x) + ' ' + (point1.y) + ' ');
@@ -57,3 +57,3 @@ }
             for (var j = pointsLength - 1; j >= startPoint; j--) {
-                point2 = helper_1.getPoint(visiblePoints[j].xValue, stackedvalue.startValues[j], series);
+                point2 = helper_1.getPoint(visiblePoints[j].xValue, stackedvalue.startValues[j], xAxis, yAxis);
                 lineDirection = lineDirection.concat('L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');
@@ -60,0 +60,0 @@ }

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

 import { Chart } from '../chart';
 import { Series } from './chart-series';
 import { LineBase } from './line-base';
+import { Axis } from '../../chart/axis/axis';
 /**
@@ -13,3 +14,3 @@ * StepArea Module used to render the StepArea series.
      */
-    render(series: Series): void;
+    render(series: Series, xAxis: Axis, yAxis: Axis): void;
     /**
@@ -16,0 +17,0 @@ * Animates the series.

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

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {
         }
-        StepAreaSeries.prototype.render = function (series) {
+        StepAreaSeries.prototype.render = function (series, xAxis, yAxis) {
             var currentPoint;
@@ -38,14 +38,14 @@ var secondPoint;
                         start = new helper_1.ChartLocation(xValue, 0);
-                        currentPoint = helper_1.getPoint(xValue, origin, series);
+                        currentPoint = helper_1.getPoint(xValue, origin, xAxis, yAxis);
                         direction += ('M' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
-                        currentPoint = helper_1.getPoint(xValue, point.yValue, series);
+                        currentPoint = helper_1.getPoint(xValue, point.yValue, xAxis, yAxis);
                         direction += ('L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
                     }
                     if (prevPoint != null) {
-                        currentPoint = helper_1.getPoint(point.xValue, point.yValue, series);
-                        secondPoint = helper_1.getPoint(prevPoint.xValue, prevPoint.yValue, series);
+                        currentPoint = helper_1.getPoint(point.xValue, point.yValue, xAxis, yAxis);
+                        secondPoint = helper_1.getPoint(prevPoint.xValue, prevPoint.yValue, xAxis, yAxis);
                         direction += ('L' + ' ' +
                             (currentPoint.x) + ' ' + (secondPoint.y) + 'L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');
                     }
-                    point.symbolLocation = helper_1.getPoint(xValue, point.yValue, series);
+                    point.symbolLocation = helper_1.getPoint(xValue, point.yValue, xAxis, yAxis);
                     point.region = new helper_1.Rect(point.symbolLocation.x - series.marker.width, point.symbolLocation.y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height);
@@ -55,3 +55,3 @@ prevPoint = point;
                 if (series.points[i + 1] && !series.points[i + 1].visible) {
-                    currentPoint = helper_1.getPoint(xValue, origin, series);
+                    currentPoint = helper_1.getPoint(xValue, origin, xAxis, yAxis);
                     direction += ('L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y));
@@ -64,3 +64,3 @@ start = null;
                 start = { 'x': series.points[pointsLength - 1].xValue, 'y': origin };
-                secondPoint = helper_1.getPoint(start.x, start.y, series);
+                secondPoint = helper_1.getPoint(start.x, start.y, xAxis, yAxis);
                 direction += ('L' + ' ' + (secondPoint.x) + ' ' + (secondPoint.y) + ' ');
@@ -67,0 +67,0 @@ }

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

 import { Chart } from '../chart';
 import { Series } from './chart-series';
 import { LineBase } from './line-base';
+import { Axis } from '../../chart/axis/axis';
 /**
@@ -13,3 +14,3 @@ * StepLine Module used to render the step line series.
      */
-    render(series: Series): void;
+    render(series: Series, xAxis: Axis, yAxis: Axis): void;
     /**
@@ -16,0 +17,0 @@ * Animates the series.

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

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {
         }
-        StepLineSeries.prototype.render = function (series) {
+        StepLineSeries.prototype.render = function (series, xAxis, yAxis) {
             var direction = '';
@@ -40,4 +40,4 @@ var startPoint = 'M';
                     if (prevPoint != null) {
-                        point2 = helper_1.getPoint(point.xValue, point.yValue, series);
-                        point1 = helper_1.getPoint(prevPoint.xValue, prevPoint.yValue, series);
+                        point2 = helper_1.getPoint(point.xValue, point.yValue, xAxis, yAxis);
+                        point1 = helper_1.getPoint(prevPoint.xValue, prevPoint.yValue, xAxis, yAxis);
                         direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ' + 'L' + ' ' +
@@ -48,7 +48,7 @@ (point2.x) + ' ' + (point1.y) + 'L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');
                     else {
-                        point1 = helper_1.getPoint(point.xValue - lineLength, point.yValue, series);
+                        point1 = helper_1.getPoint(point.xValue - lineLength, point.yValue, xAxis, yAxis);
                         direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ');
                         startPoint = 'L';
                     }
-                    point.symbolLocation = helper_1.getPoint(point.xValue, point.yValue, series);
+                    point.symbolLocation = helper_1.getPoint(point.xValue, point.yValue, xAxis, yAxis);
                     prevPoint = point;
@@ -62,3 +62,3 @@ point.region = new helper_1.Rect(point.symbolLocation.x - series.marker.width, point.symbolLocation.y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height);
             }
-            point1 = helper_1.getPoint((visiblePoints[visiblePoints.length - 1].xValue + lineLength), visiblePoints[visiblePoints.length - 1].yValue, series);
+            point1 = helper_1.getPoint((visiblePoints[visiblePoints.length - 1].xValue + lineLength), visiblePoints[visiblePoints.length - 1].yValue, xAxis, yAxis);
             direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ');
@@ -65,0 +65,0 @@ pathOptions = new helper_1.PathOption(series.chart.element.id + '_Series_' + series.index, 'transparent', series.width, series.interior, series.opacity, series.dashArray, direction);

src/chart/user-interaction/zooming.js

@@ -279,2 +279,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/helper", "./zooming-toolkit", "../../common/model/theme", "../../common/model/constants"], function (require, exports, ej2_base_1, helper_1, zooming_toolkit_1, theme_1, constants_1) {
             var yAxisLoc;
+            var element;
             if (transX !== null && transY !== null) {
@@ -288,2 +289,3 @@ chart.visibleSeries.forEach(function (value) {
                     value.seriesElement.setAttribute('transform', translate);
+                    element = helper_1.getElement(chart.element.id + '_Series_' + value.index + '_DataLabelCollections');
                     if (value.symbolElement) {
@@ -296,2 +298,5 @@ value.symbolElement.setAttribute('transform', translate);
                     }
+                    if (element) {
+                        element.style.visibility = 'hidden';
+                    }
                 });
@@ -298,0 +303,0 @@ }

src/chart/utils/enum.d.ts

@@ -116,10 +116,2 @@ /**
 /**
- * Defines the Alignment. They are
- * * near - Align the legend to the left of chart.
- * * center - Align the legend to the center of chart.
- * * far - Align the legend to the right of chart.
- * *
- */
-export declare type Alignment = 'Near' | 'Center' | 'Far';
-/**
  * Defines the shape of legend. They are
@@ -126,0 +118,0 @@ * * circle - Renders a circle.

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

@@ -1,2 +0,2 @@
-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 } from '../utils/helper';import { LegendPosition, Alignment, 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 { 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 } 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';
 
@@ -3,0 +3,0 @@ /**

src/common/legend/legend.d.ts

@@ -6,3 +6,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 import { Size, Rect, ChartLocation } from '../utils/helper';
-import { LegendPosition, Alignment, LegendShape, ChartSeriesType, ChartShape } from '../../chart/utils/enum';
+import { LegendPosition, LegendShape, ChartSeriesType, ChartShape } from '../../chart/utils/enum';
 import { Legend } from '../../chart/legend/legend';
@@ -12,2 +12,3 @@ import { AccumulationType } from '../../accumulation-chart/model/enum';
 import { AccumulationLegend } from '../../accumulation-chart/renderer/legend';
+import { Alignment } from '../utils/enum';
 /**
@@ -14,0 +15,0 @@ * Configures the location for legend.

src/common/model/constants.d.ts

@@ -38,1 +38,3 @@ /**
 export declare const resized: string;
+/** @private */
+export declare const annotationRender: string;

src/common/model/constants.js

@@ -21,2 +21,3 @@ define(["require", "exports"], function (require, exports) {
     exports.resized = 'resized';
+    exports.annotationRender = 'annotationRender';
 });

src/common/model/interface.d.ts

@@ -8,2 +8,3 @@ import { Chart } from '../../chart';
 import { BorderModel, FontModel } from './base-model';
+import { ChartLocation } from '../utils/helper';
 /**
@@ -29,3 +30,8 @@ * Specifies Chart Events
     border: BorderModel;
+    template: string;
 }
+export interface IAnnotationRenderEventArgs extends IChartEventArgs {
+    content: HTMLElement;
+    location: ChartLocation;
+}
 export interface IZoomCompleteEventArgs extends IChartEventArgs {
@@ -32,0 +38,0 @@ axis: AxisModel;

src/common/utils/helper.d.ts

@@ -5,5 +5,5 @@ import { FontModel, BorderModel, MarginModel } from '../model/base-model';
 import { Axis } from '../../chart/axis/axis';
-import { Chart } from '../../chart';
-import { AccumulationChart } from '../../accumulation-chart';
-import { AccumulationSeries } from '../../accumulation-chart/model/acc-base';
+import { Chart } from '../../chart/chart';
+import { AccumulationChart } from '../../accumulation-chart/accumulation';
+import { AccumulationSeries, AccPoints } from '../../accumulation-chart/model/acc-base';
 import { IShapes } from '../model/interface';
@@ -55,3 +55,3 @@ /**
 /** @private */
-export declare function getPoint(xValue: number, yValue: number, series: Series): ChartLocation;
+export declare function getPoint(xValue: number, yValue: number, xAxis: Axis, yAxis: Axis): ChartLocation;
 /** @private */
@@ -85,3 +85,17 @@ export declare function withInBounds(x: number, y: number, bounds: Rect, width?: number, height?: number): boolean;
 export declare function markerAnimate(element: Element, delay: number, duration: number, series: Series | AccumulationSeries, pointIndex: number, point: ChartLocation, isLabel: boolean): void;
+/**
+ * Animation for template
+ * @private
+ */
+export declare function templateAnimate(element: Element, delay: number, duration: number): void;
+export declare function getTemplateFunction(template: string): Function;
 /** @private */
+export declare function createTemplate(childElement: HTMLElement, pointIndex: number, content: string, chart: Chart | AccumulationChart, point?: Points | AccPoints, series?: Series | AccumulationSeries): HTMLElement;
+/** @private */
+export declare function getFontStyle(font: FontModel): string;
+/** @private */
+export declare function measureElementRect(element: HTMLElement): ClientRect;
+/** @private */
+export declare function appendElement(child: Element, parent: Element): void;
+/** @private */
 export declare function drawSymbol(location: ChartLocation, shape: string, size: Size, url: string, options: PathOption, label: string): Element;
@@ -88,0 +102,0 @@ /** @private */

src/common/utils/helper.js

@@ -219,10 +219,10 @@ var __extends = (this && this.__extends) || (function () {
     exports.createZoomingLabels = createZoomingLabels;
-    function getPoint(xValue, yValue, series) {
-        var xLength = series.xAxis.rect.width;
-        var yLength = series.yAxis.rect.height;
-        xValue = (series.xAxis.valueType === 'Logarithmic' ? logBase(xValue, series.xAxis.logBase) : xValue);
-        yValue = (series.yAxis.valueType === 'Logarithmic' ?
-            logBase(yValue === 0 ? 1 : yValue, series.yAxis.logBase) : yValue);
-        xValue = this.valueToCoefficient(xValue, series.xAxis);
-        yValue = this.valueToCoefficient(yValue, series.yAxis);
+    function getPoint(xValue, yValue, xAxis, yAxis) {
+        var xLength = xAxis.rect.width;
+        var yLength = yAxis.rect.height;
+        xValue = (xAxis.valueType === 'Logarithmic' ? logBase(xValue, xAxis.logBase) : xValue);
+        yValue = (yAxis.valueType === 'Logarithmic' ?
+            logBase(yValue === 0 ? 1 : yValue, yAxis.logBase) : yValue);
+        xValue = this.valueToCoefficient(xValue, xAxis);
+        yValue = this.valueToCoefficient(yValue, yAxis);
         xValue = xValue * xLength;
@@ -346,2 +346,72 @@ yValue = (1 - yValue) * yLength;
     exports.markerAnimate = markerAnimate;
+    function templateAnimate(element, delay, duration) {
+        element.style.visibility = 'hidden';
+        new ej2_base_1.Animation({}).animate(element, {
+            duration: duration,
+            delay: delay,
+            name: 'ZoomIn',
+            progress: function (args) {
+                args.element.style.visibility = 'visible';
+            }
+        });
+    }
+    exports.templateAnimate = templateAnimate;
+    function getTemplateFunction(template) {
+        var templateFn = null;
+        var e;
+        try {
+            if (document.querySelectorAll(template).length) {
+                templateFn = ej2_base_1.compile(document.querySelector(template).innerHTML.trim());
+            }
+        }
+        catch (e) {
+            templateFn = ej2_base_1.compile(template);
+        }
+        return templateFn;
+    }
+    exports.getTemplateFunction = getTemplateFunction;
+    function createTemplate(childElement, pointIndex, content, chart, point, series) {
+        var templateFn;
+        var templateElement;
+        templateFn = getTemplateFunction(content);
+        try {
+            if (templateFn && templateFn({ chart: chart, series: series, point: point }).length) {
+                templateElement = templateFn({ chart: chart, series: series, point: point });
+                while (templateElement.length > 0) {
+                    childElement.appendChild(templateElement[0]);
+                }
+            }
+        }
+        catch (e) {
+            return childElement;
+        }
+        return childElement;
+    }
+    exports.createTemplate = createTemplate;
+    function getFontStyle(font) {
+        var style = '';
+        style = 'font-size:' + font.size +
+            '; font-style:' + font.fontStyle + '; font-weight:' + font.fontWeight +
+            '; font-family:' + font.fontFamily + ';opacity:' + font.opacity +
+            '; color:' + font.color + ';';
+        return style;
+    }
+    exports.getFontStyle = getFontStyle;
+    function measureElementRect(element) {
+        var bounds;
+        document.body.appendChild(element);
+        bounds = element.getBoundingClientRect();
+        removeElement(element.id);
+        return bounds;
+    }
+    exports.measureElementRect = measureElementRect;
+    function appendElement(child, parent) {
+        if (child && child.hasChildNodes() && parent) {
+            parent.appendChild(child);
+        }
+        else {
+            return null;
+        }
+    }
+    exports.appendElement = appendElement;
     function drawSymbol(location, shape, size, url, options, label) {
@@ -348,0 +418,0 @@ var functionName = 'Path';

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Number of package files

221

increased by9.41%

Worsened metrics

Total package byte prevSize

9918961

decreased by-5.35%

Lines of code

80770

decreased by-31.93%

Dependency changes

• Updated@syncfusion/ej2-base@^1.0.19

• Updated@syncfusion/ej2-data@^1.0.19