@syncfusion/ej2-charts - npm Package Compare versions

Comparing version 1.0.16 to 1.0.18

dist/es6/accumulation-chart/accumulation.js

@@ -19,4 +19,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Internationalization, Event, Browser, EventHandler, Touch } from '@syncfusion/ej2-base';
-import { remove } from '@syncfusion/ej2-base';
-import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { remove, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { Font, Margin, Border, Indexes } from '../common/model/base';
@@ -28,4 +27,4 @@ import { AccumulationSeries, AccumulationTooltipSettings } from './model/acc-base';
 import { LegendSettings } from '../common/legend/legend';
-import { Rect, Size, subtractRect, measureText, RectOption } from '../common/utils/helper';
-import { textElement, TextOption, removeElement, createSvg, calculateSize } from '../common/utils/helper';
+import { Rect, 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';
@@ -104,14 +103,15 @@ import { PieSeries } from './renderer/pie-series';
         this.trigger(chartMouseUp, { target: e.target.id, x: this.mouseX, y: this.mouseY });
-        if (this.accumulationTooltipModule && this.accumulationTooltipModule.tooltip && this.isTouch) {
-            this.pieSeriesModule.getTooltipPoint(e, this, this.mouseX, this.mouseY);
-            this.accumulationTooltipModule.fadeOutTooltip();
+        if (this.isTouch) {
+            this.titleTooltip(e, this.mouseX, this.mouseY, this.isTouch);
+            if (this.accumulationTooltipModule && this.accumulationTooltipModule.tooltip) {
+                this.pieSeriesModule.getTooltipPoint(e, this, this.mouseX, this.mouseY);
+                this.accumulationTooltipModule.fadeOutTooltip();
+            }
+            if (this.accumulationDataLabelModule && this.visibleSeries[0].dataLabel.visible) {
+                this.accumulationDataLabelModule.move(e, this.mouseX, this.mouseY, this.isTouch);
+            }
+            if (this.accumulationLegendModule && this.legendSettings.visible) {
+                this.accumulationLegendModule.move(e, this.mouseX, this.mouseY, this.isTouch);
+            }
         }
-        if (this.accumulationDataLabelModule && this.visibleSeries[0].dataLabel.visible && this.isTouch) {
-            this.accumulationDataLabelModule.move(e, this.mouseX, this.mouseY);
-            this.accumulationDataLabelModule.fadeOutTooltip();
-        }
-        if (this.accumulationLegendModule && this.legendSettings.visible) {
-            this.accumulationLegendModule.move(e, this.mouseX, this.mouseY);
-            this.accumulationLegendModule.fadeOutTooltip();
-        }
         return false;
@@ -163,4 +163,16 @@ };
         }
+        if (!this.isTouch) {
+            this.titleTooltip(e, this.mouseX, this.mouseY);
+        }
         return false;
     };
+    AccumulationChart.prototype.titleTooltip = function (event, x, y, isTouch) {
+        var targetId = event.target.id;
+        if ((event.target.textContent.indexOf('...') > -1) && (targetId === (this.element.id + '_title'))) {
+            showTooltip(this.title, x, y, this.element.offsetWidth, this.element.id + '_EJ2_Title_Tooltip', isTouch);
+        }
+        else {
+            removeElement(this.element.id + '_EJ2_Title_Tooltip');
+        }
+    };
     AccumulationChart.prototype.accumulationOnMouseClick = function (e) {
@@ -320,3 +332,3 @@ this.setMouseXY(e);
         var height = measureText(this.title, this.titleStyle).height;
-        textElement(new TextOption(this.element.id + '_title', this.availableSize.width / 2, this.margin.top + (height * 3 / 4), 'middle', this.title, '', 'auto'), this.titleStyle, this.titleStyle.color, this.svgObject);
+        textElement(new TextOption(this.element.id + '_title', this.availableSize.width / 2, this.margin.top + (height * 3 / 4), 'middle', textTrim(this.availableSize.width, this.title, this.titleStyle), '', 'auto'), this.titleStyle, this.titleStyle.color, this.svgObject);
     };
@@ -323,0 +335,0 @@ AccumulationChart.prototype.getSeriesElement = function () {

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

@@ -11,7 +11,6 @@ var __extends = (this && this.__extends) || (function () {
 })();
-import { createElement } from '@syncfusion/ej2-base';
 import { extend } from '@syncfusion/ej2-base';
 import { ChartLocation, degreeToLocation, Rect, isOverlap, stringToNumber, getAngle, TextOption } from '../../common/utils/helper';
 import { textTrim, subtractThickness, Thickness, removeElement, measureText, RectOption, textElement } from '../../common/utils/helper';
-import { PathOption, colorNameToHex, convertHexToColor } from '../../common/utils/helper';
+import { PathOption, colorNameToHex, convertHexToColor, showTooltip } from '../../common/utils/helper';
 import { getSeriesFromIndex } from '../model/acc-base';
@@ -95,3 +94,4 @@ import { textRender } from '../../common/model/constants';
     };
-    AccumulationDataLabel.prototype.move = function (e, x, y) {
+    AccumulationDataLabel.prototype.move = function (e, x, y, isTouch) {
+        var _this = this;
         if (e.target.textContent.indexOf('...') > -1) {
@@ -103,3 +103,7 @@ var targetId = e.target.id.split(this.id);
                 if (!isNaN(seriesIndex) && !isNaN(pointIndex)) {
-                    this.showText(e, seriesIndex, pointIndex, x, y);
+                    if (isTouch) {
+                        removeElement(this.accumulation.element.id + '_EJ2_Datalabel_Tooltip');
+                    }
+                    var point = getSeriesFromIndex(seriesIndex, (this.accumulation).visibleSeries).points[pointIndex];
+                    showTooltip(point.text || point.y.toString(), x, y, this.areaRect.width, this.accumulation.element.id + '_EJ2_Datalabel_Tooltip');
                 }
@@ -109,30 +113,7 @@ }
         else {
-            removeElement('EJ2_datalabel_tooltip');
+            removeElement(this.accumulation.element.id + '_EJ2_Datalabel_Tooltip');
         }
-    };
-    AccumulationDataLabel.prototype.fadeOutTooltip = function () {
-        clearTimeout(this.clearTooltip);
-        this.clearTooltip = setTimeout(this.removeTooltip, 1500);
-    };
-    AccumulationDataLabel.prototype.removeTooltip = function () {
-        removeElement('EJ2_datalabel_tooltip');
-    };
-    AccumulationDataLabel.prototype.showText = function (event, seriesIndex, pointIndex, x, y) {
-        var point = getSeriesFromIndex(seriesIndex, this.accumulation.visibleSeries).points[pointIndex];
-        var id = 'EJ2_datalabel_tooltip';
-        var tooltip = document.getElementById(id);
-        var width = measureText(point.text || point.y.toString(), {
-            fontFamily: 'Segoe UI', size: '12px',
-            fontStyle: 'Normal', fontWeight: 'Regular'
-        }).width + 5;
-        x = (x + width > this.areaRect.width) ? x - width : x;
-        if (!tooltip) {
-            tooltip = createElement('div', {
-                id: id,
-                innerHTML: point.text || point.y.toString(),
-                styles: 'top:' + (y + 10).toString() + 'px;left:' + (x + 10).toString() + 'px;background-color: rgb(255, 255, 255);' +
-                    'position:fixed;border:1px solid rgb(112, 112, 112); padding-left : 3px; padding-right : 2px;' +
-                    'padding-bottom : 2px; padding-top : 2px; font-size:12px; font-family: "Segoe UI"'
-            });
-            document.body.appendChild(tooltip);
+        if (isTouch) {
+            clearTimeout(this.clearTooltip);
+            this.clearTooltip = setTimeout(function () { removeElement(_this.accumulation.element.id + '_EJ2_Datalabel_Tooltip'); }, 1000);
         }
@@ -139,0 +120,0 @@ };

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

@@ -245,3 +245,2 @@ var __extends = (this && this.__extends) || (function () {
                     }
-                    this.chart.loaded = null;
                     this.chart.refreshPoints(currentSeries.points);
@@ -248,0 +247,0 @@ this.chart.renderElements();

dist/es6/chart/axis/axis.js

@@ -436,2 +436,5 @@ var __extends = (this && this.__extends) || (function () {
 __decorate([
+    Property(false)
+], Axis.prototype, "isInversed", void 0);
+__decorate([
     Property(null)
@@ -438,0 +441,0 @@ ], Axis.prototype, "description", void 0);

dist/es6/chart/axis/cartesian-panel.js

@@ -535,4 +535,2 @@ import { subtractThickness, valueToCoefficient, sum, subArray, TextOption, inside, measureText } from '../../common/utils/helper';
         var range = axis.visibleRange;
-        var lineWidth = axis.minorGridLines.width;
-        var tickWidth = axis.minorTickLines.width;
         var direction = [];
@@ -557,8 +555,8 @@ var tickSize = axis.opposedPosition ? -axis.minorTickLines.height : axis.minorTickLines.height;
                     position = Math.ceil(((value - range.min) / (range.max - range.min)) * rect.width);
-                    coor = (Math.floor(position + rect.x) + lineWidth);
-                    minorGird = minorGird.concat('M' + ' ' + coor + ' ' + (this.seriesClipRect.y + lineWidth)
-                        + 'L ' + coor + ' ' + (this.seriesClipRect.y + this.seriesClipRect.height + lineWidth));
-                    coor = (Math.floor(position + rect.x) + tickWidth);
-                    minorTick = minorTick.concat('M' + ' ' + coor + ' ' + (rect.y + lineWidth)
-                        + 'L ' + coor + ' ' + (rect.y + tickSize + lineWidth));
+                    coor = (Math.floor(position + rect.x));
+                    minorGird = minorGird.concat('M' + ' ' + coor + ' ' + (this.seriesClipRect.y)
+                        + 'L ' + coor + ' ' + (this.seriesClipRect.y + this.seriesClipRect.height));
+                    coor = (Math.floor(position + rect.x));
+                    minorTick = minorTick.concat('M' + ' ' + coor + ' ' + (rect.y)
+                        + 'L ' + coor + ' ' + (rect.y + tickSize));
                 }
@@ -573,6 +571,6 @@ }
                     position = Math.ceil(((value - range.min) / (range.max - range.min)) * rect.height) * -1;
-                    coor = (Math.floor(position + rect.y + rect.height) + lineWidth);
+                    coor = (Math.floor(position + rect.y + rect.height));
                     minorGird = minorGird.concat('M' + ' ' + (this.seriesClipRect.x) + ' ' + coor
                         + 'L ' + (this.seriesClipRect.x + this.seriesClipRect.width) + ' ' + coor);
-                    coor = (Math.floor(position + rect.y + rect.height) + tickWidth);
+                    coor = (Math.floor(position + rect.y + rect.height));
                     minorTick = minorTick.concat('M' + ' ' + rect.x + ' ' + coor + 'L ' + (rect.x + tickSize) + ' ' + coor);
@@ -646,6 +644,7 @@ }
             }
-            if (axis.angle % 360 === 0 && axis.labelIntersectAction === 'Hide' && options.x <= previousEnd) {
+            if (axis.angle % 360 === 0 && axis.labelIntersectAction === 'Hide' && i !== 0 &&
+                (!axis.isInversed ? options.x <= previousEnd : options.x + elementSize.width >= previousEnd)) {
                 continue;
             }
-            previousEnd = options.x + elementSize.width;
+            previousEnd = axis.isInversed ? options.x : options.x + elementSize.width;
             if (axis.angle !== 0) {
@@ -652,0 +651,0 @@ angle = (axis.angle > 360) ? axis.angle % 360 : axis.angle;

dist/es6/chart/chart.js

@@ -23,3 +23,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Event, EventHandler, Complex, Collection } from '@syncfusion/ej2-base';
-import { findClipRect, measureText, TextOption, findPosition } from '../common/utils/helper';
+import { findClipRect, measureText, TextOption, findPosition, textTrim, showTooltip, removeElement } from '../common/utils/helper';
 import { textElement, withInBounds, RectOption, createSvg } from '../common/utils/helper';
@@ -312,3 +312,3 @@ import { getSeriesColor, Theme } from '../common/model/theme';
             this.elementSize = measureText(this.title, this.titleStyle);
-            var options = new TextOption(this.element.id + '_ChartTitle', this.availableSize.width / 2, this.margin.top + 3 * (this.elementSize.height / 4), 'middle', this.title);
+            var options = new TextOption(this.element.id + '_ChartTitle', this.availableSize.width / 2, this.margin.top + 3 * (this.elementSize.height / 4), 'middle', textTrim(this.availableSize.width, this.title, this.titleStyle));
             var element = textElement(options, this.titleStyle, this.titleStyle.color, this.svgObject);
@@ -410,2 +410,3 @@ element.setAttribute('aria-label', this.description || this.title);
         element.style.position = 'relative';
+        element.style.display = 'block';
     };
@@ -416,4 +417,4 @@ Chart.prototype.isOrientation = function () {
     Chart.prototype.longPress = function (e) {
-        this.mouseX = e ? (e.originalEvent.changedTouches[0].clientX - this.offset.x) : 0;
-        this.mouseY = e ? (e.originalEvent.changedTouches[0].clientY - this.offset.y) : 0;
+        this.mouseX = (e && e.originalEvent.changedTouches) ? (e.originalEvent.changedTouches[0].clientX - this.offset.x) : 0;
+        this.mouseY = (e && e.originalEvent.changedTouches) ? (e.originalEvent.changedTouches[0].clientY - this.offset.y) : 0;
         this.startMove = true;
@@ -557,4 +558,7 @@ if (this.crosshairModule && withInBounds(this.mouseX, this.mouseY, this.chartAxisLayoutPanel.seriesClipRect)) {
         }
-        if (this.legendSettings.visible && this.legendModule) {
-            this.legendModule.move(e, this.mouseX, this.mouseY);
+        if (!this.isTouch) {
+            this.titleTooltip(e, this.mouseX, this.mouseY);
+            if (this.legendSettings.visible && this.legendModule) {
+                this.legendModule.move(e, this.mouseX, this.mouseY);
+            }
         }
@@ -564,2 +568,11 @@ this.isTouch = false;
     };
+    Chart.prototype.titleTooltip = function (event, x, y, isTouch) {
+        var targetId = event.target.id;
+        if ((targetId === (this.element.id + '_ChartTitle')) && (event.target.textContent.indexOf('...') > -1)) {
+            showTooltip(this.title, x, y, this.element.offsetWidth, this.element.id + '_EJ2_Title_Tooltip', isTouch);
+        }
+        else {
+            removeElement(this.element.id + '_EJ2_Title_Tooltip');
+        }
+    };
     Chart.prototype.chartOnMouseDown = function (e) {
@@ -653,2 +666,6 @@ var pageX;
         if (this.isTouch) {
+            this.titleTooltip(e, this.mouseX, this.mouseY, this.isTouch);
+            if (this.legendSettings.visible && this.legendModule) {
+                this.legendModule.move(e, this.mouseX, this.mouseY, this.isTouch);
+            }
             this.threshold = new Date().getTime() + 300;
@@ -655,0 +672,0 @@ if (this.isDoubleTap && withInBounds(this.mouseX, this.mouseY, this.chartAxisLayoutPanel.seriesClipRect)

dist/es6/chart/legend/legend.js

@@ -122,3 +122,2 @@ var __extends = (this && this.__extends) || (function () {
             legend.visible = (series.visible);
-            chart.loaded = null;
             if (chart.svgObject.childNodes.length > 0) {
@@ -125,0 +124,0 @@ while (chart.svgObject.lastChild) {

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

@@ -30,3 +30,3 @@ var __extends = (this && this.__extends) || (function () {
                 if (!argsData.cancel) {
-                    this.updateYRegion(point, rect);
+                    this.updateYRegion(point, rect, series);
                     this.drawRectangle(series, point, rect, argsData);
@@ -33,0 +33,0 @@ }

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

@@ -93,9 +93,10 @@ import { Animation } from '@syncfusion/ej2-base';
             x: rect.x + (rect.width) / 2,
-            y: (series.seriesType === 'HighLow') ? rect.y : point.yValue < 0 ? (rect.y + rect.height) : rect.y,
+            y: ((series.seriesType === 'HighLow' && series.yAxis.isInversed) || (point.yValue < 0 !== series.yAxis.isInversed)) ?
+                rect.y + rect.height : rect.y
         };
     };
-    ColumnBase.prototype.updateYRegion = function (point, rect) {
+    ColumnBase.prototype.updateYRegion = function (point, rect, series) {
         point.region = new Rect(rect.x, rect.y, rect.width, rect.height);
         point.symbolLocation = {
-            x: point.yValue < 0 ? rect.x : rect.x + rect.width,
+            x: point.yValue < 0 !== series.yAxis.isInversed ? rect.x : rect.x + rect.width,
             y: rect.y + rect.height / 2
@@ -164,3 +165,4 @@ };
                 y = +point.region.y;
-                centerY = (series.seriesType === 'HighLow') ? y + elementHeight / 2 : isPlot ? y : y + elementHeight;
+                centerY = (series.seriesType === 'HighLow') ? y + elementHeight / 2 :
+                    (isPlot !== series.yAxis.isInversed) ? y : y + elementHeight;
                 centerX = isPlot ? x : x + elementWidth;
@@ -179,3 +181,3 @@ }
                 centerY = isPlot ? y : y + elementHeight;
-                centerX = isPlot ? x + elementWidth : x;
+                centerX = isPlot !== series.yAxis.isInversed ? x + elementWidth : x;
             }
@@ -182,0 +184,0 @@ }

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

@@ -21,2 +21,3 @@ import { ChartLocation, TextOption, RectOption, isCollide, markerAnimate } from '../../common/utils/helper';
         var textSize;
+        this.yAxisInversed = series.yAxis.isInversed;
         series.points.map(function (point, index) {
@@ -65,3 +66,3 @@ _this.margin = dataLabel.margin;
             location.y = !series.isRectSeries ? this.calculatePathPosition(location.y, dataLabel.position, series, point, textSize) :
-                this.calculateRectPosition(location.y, point.region, point.yValue < 0, dataLabel.position, series, textSize, labelIndex);
+                this.calculateRectPosition(location.y, point.region, point.yValue < 0 !== series.yAxis.isInversed, dataLabel.position, series, textSize, labelIndex);
         }
@@ -73,3 +74,3 @@ else {
                 this.calculateAlignment(alignmentValue, location.x, dataLabel.alignment, point.yValue < 0);
-            location.x = this.calculateRectPosition(location.x, point.region, point.yValue < 0, dataLabel.position, series, textSize, labelIndex);
+            location.x = this.calculateRectPosition(location.x, point.region, point.yValue < 0 !== series.yAxis.isInversed, dataLabel.position, series, textSize, labelIndex);
         }
@@ -114,8 +115,9 @@ rect = calculateRect(location, textSize, this.margin);
                     if (labelIndex === 0) {
-                        y = position !== 'Outer' ? y + extraSpace + margin.bottom :
+                        y = position !== 'Outer' !== this.yAxisInversed ? y + extraSpace + margin.bottom :
                             y - extraSpace - margin.top;
                     }
                     else {
-                        y = position !== 'Outer' ? y + rect.height - extraSpace - margin.bottom :
-                            y + rect.height + extraSpace + margin.top;
+                        var height = this.yAxisInversed ? -rect.height : rect.height;
+                        y = position !== 'Outer' !== this.yAxisInversed ? y + height - extraSpace - margin.bottom :
+                            y + height + extraSpace + margin.top;
                     }
@@ -142,2 +144,5 @@ }
         var padding = 5;
+        if ((series.type.indexOf('Area') > -1) && this.yAxisInversed && series.marker.dataLabel.position !== 'Auto') {
+            position = position === 'Top' ? 'Bottom' : position === 'Bottom' ? 'Top' : position;
+        }
         this.fontBackground = this.fontBackground === 'transparent' ? this.chart.chartArea.background : this.fontBackground;
@@ -205,3 +210,3 @@ switch (position) {
             if (index) {
-                position = (!previousPoint || !previousPoint.visible || yValue > previousPoint.yValue
+                position = (!previousPoint || !previousPoint.visible || (yValue > previousPoint.yValue !== this.yAxisInversed)
                     || yValue === previousPoint.yValue) ? 'Top' : 'Bottom';
@@ -212,6 +217,8 @@ }
             if (index === 0) {
-                position = (!nextPoint || !nextPoint.visible || yValue > nextPoint.yValue) ? 'Top' : 'Bottom';
+                position = (!nextPoint || !nextPoint.visible || yValue > nextPoint.yValue ||
+                    (yValue < nextPoint.yValue && this.yAxisInversed)) ? 'Top' : 'Bottom';
             }
-            if (index === points.length - 1) {
-                position = (!previousPoint || !previousPoint.visible || yValue > previousPoint.yValue) ? 'Top' : 'Bottom';
+            else if (index === points.length - 1) {
+                position = (!previousPoint || !previousPoint.visible || yValue > previousPoint.yValue ||
+                    (yValue < previousPoint.yValue && this.yAxisInversed)) ? 'Top' : 'Bottom';
             }
@@ -229,3 +236,4 @@ else {
                     var intersectY = (slope * index) + (nextPoint.yValue - (slope * (index + 1)));
-                    position = intersectY < yValue ? 'Top' : 'Bottom';
+                    position = !this.yAxisInversed ? intersectY < yValue ? 'Top' : 'Bottom' :
+                        intersectY < yValue ? 'Bottom' : 'Top';
                 }
@@ -232,0 +240,0 @@ }

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

@@ -32,3 +32,3 @@ var __extends = (this && this.__extends) || (function () {
                     this.drawRectangle(series, point, rect, argsData);
-                    this.updateYRegion(point, rect);
+                    this.updateYRegion(point, rect, series);
                 }
@@ -35,0 +35,0 @@ }

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

@@ -13,3 +13,3 @@ var __extends = (this && this.__extends) || (function () {
 import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { ChartLocation, Rect, RectOption, CircleOption, withInBounds, getDraggedRectLocation } from '../../common/utils/helper';
+import { ChartLocation, Rect, RectOption, CircleOption, withInBounds, getDraggedRectLocation, removeElement } from '../../common/utils/helper';
 import { Index } from '../../common/model/base';
@@ -90,3 +90,2 @@ import { Theme } from '../../common/model/theme';
         this.isSeriesMode = chart.selectionMode === 'Series';
-        this.legendSelectionMode = false;
         switch (chart.selectionMode) {
@@ -238,3 +237,3 @@ case 'Series':
             if (isBlurEffectNeeded) {
-                this.isSeriesMode = chart.selectionMode === 'Series' || this.legendSelectionMode;
+                this.isSeriesMode = chart.selectionMode === 'Series';
                 this.blurEffect(chart.element.id, chart.visibleSeries);
@@ -250,8 +249,5 @@ }
             this.isSeriesMode = true;
-            this.legendSelectionMode = true;
-            isBlurEffectNeeded = this.selectedDataIndexes.length === 0;
             this.selection(chart, new Index(series, NaN), seriesElements);
-            if (isBlurEffectNeeded) {
-                this.blurEffect(chart.element.id, chart.visibleSeries);
-            }
+            this.isSeriesMode = chart.selectionMode === 'Series';
+            this.blurEffect(chart.element.id, chart.visibleSeries);
         }
@@ -345,5 +341,8 @@ };
         }
+        if (dragRect.width < 5 || dragRect.height < 5) {
+            return null;
+        }
         var element = document.getElementById(this.draggedRect);
         if (this.closeIcon) {
-            this.closeIcon.remove();
+            removeElement(this.closeIconId);
         }
@@ -488,3 +487,3 @@ if (element) {
     Selection.prototype.completeSelection = function (chart, e) {
-        if ((this.dragging || this.resizing) && this.dragRect.width && this.dragRect.height) {
+        if ((this.dragging || this.resizing) && this.dragRect.width > 5 && this.dragRect.height > 5) {
             this.calculateDragSelectedElements(chart, this.dragRect);
@@ -491,0 +490,0 @@ }

dist/es6/common/legend/legend.js

@@ -18,7 +18,6 @@ var __extends = (this && this.__extends) || (function () {
 import { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';
-import { createElement } from '@syncfusion/ej2-base';
 import { Font, Border } from '../model/base';
 import { Theme } from '../model/theme';
 import { Size, Rect, subtractThickness, Thickness, drawSymbol, measureText, ChartLocation, PathOption } from '../utils/helper';
-import { RectOption, TextOption, textElement, stringToNumber, removeElement } from '../utils/helper';
+import { RectOption, TextOption, textElement, stringToNumber, removeElement, showTooltip } from '../utils/helper';
 var Location = (function (_super) {
@@ -343,24 +342,4 @@ __extends(Location, _super);
     };
-    BaseLegend.prototype.showText = function (text, x, y) {
-        var id = 'EJ2_legend_tooltip';
-        var tooltip = document.getElementById(id);
-        if (!tooltip) {
-            tooltip = createElement('div', {
-                innerHTML: text,
-                id: id,
-                styles: 'top:' + (y + 10).toString() + 'px;left:' + (x + 10).toString() + 'px;background-color: rgb(255, 255, 255);' +
-                    'position:fixed;border:1px solid rgb(112, 112, 112); padding-left : 3px; padding-right : 2px;' +
-                    'padding-bottom : 2px; font-size:12px; font-family: "Segoe UI"'
-            });
-            document.body.appendChild(tooltip);
-        }
-    };
-    BaseLegend.prototype.fadeOutTooltip = function () {
-        clearTimeout(this.clearTooltip);
-        this.clearTooltip = setTimeout(this.removeTooltip, 1500);
-    };
-    BaseLegend.prototype.removeTooltip = function () {
-        removeElement('EJ2_legend_tooltip');
-    };
-    BaseLegend.prototype.move = function (event, x, y) {
+    BaseLegend.prototype.move = function (event, x, y, isTouch) {
+        var _this = this;
         if (event.target.textContent.indexOf('...') > -1) {
@@ -370,8 +349,12 @@ var targetId = event.target.id.split(this.legendID + '_text_');
                 var index = parseInt(targetId[1], 10);
+                var element = this.chart.element;
                 if (!isNaN(index)) {
+                    if (isTouch) {
+                        removeElement(this.chart.element.id + '_EJ2_Legend_Tooltip');
+                    }
                     if (this.isChartControl) {
-                        this.showText(this.chart.series[index].name, x, y);
+                        showTooltip(this.chart.series[index].name, x, y, element.offsetWidth, element.id + '_EJ2_Legend_Tooltip');
                     }
                     else {
-                        this.showText(this.chart.visibleSeries[0].points[index].x.toString(), x, y);
+                        showTooltip(this.chart.visibleSeries[0].points[index].x.toString(), x, y, element.offsetWidth, element.id + '_EJ2_Legend_Tooltip');
                     }
@@ -382,4 +365,8 @@ }
         else {
-            removeElement('EJ2_legend_tooltip');
+            removeElement(this.chart.element.id + '_EJ2_Legend_Tooltip');
         }
+        if (isTouch) {
+            clearTimeout(this.clearTooltip);
+            this.clearTooltip = setTimeout(function () { removeElement(_this.chart.element.id + '_EJ2_Legend_Tooltip'); }, 1000);
+        }
     };
@@ -386,0 +373,0 @@ return BaseLegend;

dist/es6/common/utils/helper.js

@@ -62,2 +62,23 @@ var __extends = (this && this.__extends) || (function () {
 }
+export function showTooltip(text, x, y, areaWidth, id, isTouch) {
+    var tooltip = document.getElementById(id);
+    var width = measureText(text, {
+        fontFamily: 'Segoe UI', size: '12px',
+        fontStyle: 'Normal', fontWeight: 'Regular'
+    }).width + 5;
+    x = (x + width > areaWidth) ? x - width : x;
+    if (!tooltip) {
+        tooltip = createElement('div', {
+            innerHTML: text,
+            id: id,
+            styles: 'top:' + (y + 10).toString() + 'px;left:' + (x + 10).toString() + 'px;background-color: rgb(255, 255, 255);' +
+                'position:fixed;border:1px solid rgb(112, 112, 112); padding-left : 3px; padding-right : 2px;' +
+                'padding-bottom : 2px; padding-top : 2px; font-size:12px; font-family: "Segoe UI"'
+        });
+        document.body.appendChild(tooltip);
+    }
+    if (isTouch) {
+        setTimeout(function () { removeElement(id); }, 1500);
+    }
+}
 export function inside(value, range) {
@@ -126,3 +147,4 @@ return (value < range.max) && (value > range.min);
     var range = axis.visibleRange;
-    return (value - range.min) / (range.delta);
+    var result = (value - range.min) / (range.delta);
+    return axis.isInversed ? (1 - result) : result;
 }
@@ -129,0 +151,0 @@ export function createTooltip(id, text, top, left, fontSize) {

package.json

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

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

@@ -1,2 +0,2 @@
-import {Property, Component, Complex, Collection, NotifyPropertyChanges, INotifyPropertyChanged, SvgRenderer} from '@syncfusion/ej2-base';import {ModuleDeclaration, Internationalization, Event, EmitType, Browser, EventHandler, Touch} from '@syncfusion/ej2-base';import { remove } from '@syncfusion/ej2-base';import { 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} from '../common/utils/helper';import { textElement, TextOption, removeElement, createSvg, calculateSize } 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 } 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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

src/accumulation-chart/accumulation.d.ts

@@ -274,2 +274,3 @@ /**
     accumulationMouseMove(e: PointerEvent): boolean;
+    titleTooltip(event: Event, x: number, y: number, isTouch?: boolean): void;
     /**
@@ -332,5 +333,2 @@ * Handles the mouse click on accumulation chart.
     private calculateBounds();
-    /**
-     * Method to calculate legend bounds for accumulation chart
-     */
     private calculateLegendBounds();
@@ -337,0 +335,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", "@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, ej2_base_4, 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"], 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) {
     "use strict";
@@ -92,14 +92,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.trigger(constants_2.chartMouseUp, { target: e.target.id, x: this.mouseX, y: this.mouseY });
-            if (this.accumulationTooltipModule && this.accumulationTooltipModule.tooltip && this.isTouch) {
-                this.pieSeriesModule.getTooltipPoint(e, this, this.mouseX, this.mouseY);
-                this.accumulationTooltipModule.fadeOutTooltip();
+            if (this.isTouch) {
+                this.titleTooltip(e, this.mouseX, this.mouseY, this.isTouch);
+                if (this.accumulationTooltipModule && this.accumulationTooltipModule.tooltip) {
+                    this.pieSeriesModule.getTooltipPoint(e, this, this.mouseX, this.mouseY);
+                    this.accumulationTooltipModule.fadeOutTooltip();
+                }
+                if (this.accumulationDataLabelModule && this.visibleSeries[0].dataLabel.visible) {
+                    this.accumulationDataLabelModule.move(e, this.mouseX, this.mouseY, this.isTouch);
+                }
+                if (this.accumulationLegendModule && this.legendSettings.visible) {
+                    this.accumulationLegendModule.move(e, this.mouseX, this.mouseY, this.isTouch);
+                }
             }
-            if (this.accumulationDataLabelModule && this.visibleSeries[0].dataLabel.visible && this.isTouch) {
-                this.accumulationDataLabelModule.move(e, this.mouseX, this.mouseY);
-                this.accumulationDataLabelModule.fadeOutTooltip();
-            }
-            if (this.accumulationLegendModule && this.legendSettings.visible) {
-                this.accumulationLegendModule.move(e, this.mouseX, this.mouseY);
-                this.accumulationLegendModule.fadeOutTooltip();
-            }
             return false;
@@ -151,4 +152,16 @@ };
             }
+            if (!this.isTouch) {
+                this.titleTooltip(e, this.mouseX, this.mouseY);
+            }
             return false;
         };
+        AccumulationChart.prototype.titleTooltip = function (event, x, y, isTouch) {
+            var targetId = event.target.id;
+            if ((event.target.textContent.indexOf('...') > -1) && (targetId === (this.element.id + '_title'))) {
+                helper_1.showTooltip(this.title, x, y, this.element.offsetWidth, this.element.id + '_EJ2_Title_Tooltip', isTouch);
+            }
+            else {
+                helper_2.removeElement(this.element.id + '_EJ2_Title_Tooltip');
+            }
+        };
         AccumulationChart.prototype.accumulationOnMouseClick = function (e) {
@@ -236,3 +249,3 @@ this.setMouseXY(e);
             var series = this.visibleSeries[0];
-            if (!ej2_base_4.isNullOrUndefined(series.resultData) && ((!ej2_base_4.isNullOrUndefined(series.lastGroupTo) &&
+            if (!ej2_base_3.isNullOrUndefined(series.resultData) && ((!ej2_base_3.isNullOrUndefined(series.lastGroupTo) &&
                 series.lastGroupTo !== series.groupTo))) {
@@ -297,3 +310,3 @@ series.getPoints(series.resultData, this);
             }
-            var selectedDataIndexes = ej2_base_4.extend([], this.accumulationSelectionModule.selectedDataIndexes, null, true);
+            var selectedDataIndexes = ej2_base_3.extend([], this.accumulationSelectionModule.selectedDataIndexes, null, true);
             this.accumulationSelectionModule.invokeSelection(this);
@@ -310,3 +323,3 @@ if (selectedDataIndexes.length > 0) {
             var height = helper_1.measureText(this.title, this.titleStyle).height;
-            helper_2.textElement(new helper_2.TextOption(this.element.id + '_title', this.availableSize.width / 2, this.margin.top + (height * 3 / 4), 'middle', this.title, '', 'auto'), this.titleStyle, this.titleStyle.color, this.svgObject);
+            helper_2.textElement(new helper_2.TextOption(this.element.id + '_title', this.availableSize.width / 2, this.margin.top + (height * 3 / 4), 'middle', helper_1.textTrim(this.availableSize.width, this.title, this.titleStyle), '', 'auto'), this.titleStyle, this.titleStyle.color, this.svgObject);
         };
@@ -313,0 +326,0 @@ AccumulationChart.prototype.getSeriesElement = function () {

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

@@ -34,19 +34,4 @@ import { Size, Rect } from '../../common/utils/helper';
      */
-    move(e: Event, x: number, y: number): void;
+    move(e: Event, x: number, y: number, isTouch?: boolean): void;
     /**
-     * To remove datalabel trimmed tooltip with animation
-     * @private
-     */
-    fadeOutTooltip(): void;
-    /**
-     * To remove datalabel trimmed tooltip element
-     * @private
-     */
-    removeTooltip(): void;
-    /**
-     * To show datalabel trimmed tooltip text.
-     * @private
-     */
-    showText(event: MouseEvent, seriesIndex: number, pointIndex: number, x: number, y: number): void;
-    /**
      * To find previous valid label point
@@ -53,0 +38,0 @@ */

src/accumulation-chart/renderer/dataLabel.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/utils/helper", "../../common/utils/helper", "../../common/utils/helper", "../model/acc-base", "../../common/model/constants", "../renderer/pie-base"], function (require, exports, ej2_base_1, ej2_base_2, 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"], function (require, exports, ej2_base_1, helper_1, helper_2, helper_3, acc_base_1, constants_1, pie_base_1) {
     "use strict";
@@ -90,3 +90,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
         };
-        AccumulationDataLabel.prototype.move = function (e, x, y) {
+        AccumulationDataLabel.prototype.move = function (e, x, y, isTouch) {
+            var _this = this;
             if (e.target.textContent.indexOf('...') > -1) {
@@ -98,3 +99,7 @@ var targetId = e.target.id.split(this.id);
                     if (!isNaN(seriesIndex) && !isNaN(pointIndex)) {
-                        this.showText(e, seriesIndex, pointIndex, x, y);
+                        if (isTouch) {
+                            helper_2.removeElement(this.accumulation.element.id + '_EJ2_Datalabel_Tooltip');
+                        }
+                        var point = acc_base_1.getSeriesFromIndex(seriesIndex, (this.accumulation).visibleSeries).points[pointIndex];
+                        helper_3.showTooltip(point.text || point.y.toString(), x, y, this.areaRect.width, this.accumulation.element.id + '_EJ2_Datalabel_Tooltip');
                     }
@@ -104,30 +109,7 @@ }
             else {
-                helper_2.removeElement('EJ2_datalabel_tooltip');
+                helper_2.removeElement(this.accumulation.element.id + '_EJ2_Datalabel_Tooltip');
             }
-        };
-        AccumulationDataLabel.prototype.fadeOutTooltip = function () {
-            clearTimeout(this.clearTooltip);
-            this.clearTooltip = setTimeout(this.removeTooltip, 1500);
-        };
-        AccumulationDataLabel.prototype.removeTooltip = function () {
-            helper_2.removeElement('EJ2_datalabel_tooltip');
-        };
-        AccumulationDataLabel.prototype.showText = function (event, seriesIndex, pointIndex, x, y) {
-            var point = acc_base_1.getSeriesFromIndex(seriesIndex, this.accumulation.visibleSeries).points[pointIndex];
-            var id = 'EJ2_datalabel_tooltip';
-            var tooltip = document.getElementById(id);
-            var width = helper_2.measureText(point.text || point.y.toString(), {
-                fontFamily: 'Segoe UI', size: '12px',
-                fontStyle: 'Normal', fontWeight: 'Regular'
-            }).width + 5;
-            x = (x + width > this.areaRect.width) ? x - width : x;
-            if (!tooltip) {
-                tooltip = ej2_base_1.createElement('div', {
-                    id: id,
-                    innerHTML: point.text || point.y.toString(),
-                    styles: 'top:' + (y + 10).toString() + 'px;left:' + (x + 10).toString() + 'px;background-color: rgb(255, 255, 255);' +
-                        'position:fixed;border:1px solid rgb(112, 112, 112); padding-left : 3px; padding-right : 2px;' +
-                        'padding-bottom : 2px; padding-top : 2px; font-size:12px; font-family: "Segoe UI"'
-                });
-                document.body.appendChild(tooltip);
+            if (isTouch) {
+                clearTimeout(this.clearTooltip);
+                this.clearTooltip = setTimeout(function () { helper_2.removeElement(_this.accumulation.element.id + '_EJ2_Datalabel_Tooltip'); }, 1000);
             }
@@ -330,3 +312,3 @@ };
                 if (point.labelPosition === 'Outside') {
-                    var path = this.getConnectorPath(ej2_base_2.extend({}, point.labelRegion, null, true), point.midAngle, dataLabel.connectorStyle, null, point.labelAngle);
+                    var path = this.getConnectorPath(ej2_base_1.extend({}, point.labelRegion, null, true), point.midAngle, dataLabel.connectorStyle, null, point.labelAngle);
                     var pathElement = this.accumulation.renderer.drawPath(new helper_3.PathOption(id + 'connector_' + point.index, 'transparent', dataLabel.connectorStyle.width, dataLabel.connectorStyle.color || point.color, 1, '', path));
@@ -333,0 +315,0 @@ datalabelGroup.appendChild(pathElement);

src/accumulation-chart/renderer/legend.js

@@ -244,3 +244,2 @@ var __extends = (this && this.__extends) || (function () {
                         }
-                        this.chart.loaded = null;
                         this.chart.refreshPoints(currentSeries.points);
@@ -247,0 +246,0 @@ this.chart.renderElements();

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

@@ -499,2 +499,8 @@ import { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';import { FontModel, BorderModel } from '../../common/model/base-model';import { Font, Border } from '../../common/model/base';import { Orientation, ChartRangePadding } from '../utils/enum';import { EdgeLabelPlacement, ValueType, IntervalType, LabelPlacement, LabelIntersectAction } from '../utils/enum';import { Size, Rect, measureText, rotateTextSize, firstToLowerCase, valueToCoefficient } from '../../common/utils/helper';import { DoubleRange } from '../utils/double-range';import { Chart } from '../chart';import { Series } from '../series/chart-series';import { Double } from '../axis/double-axis';import { DateTime } from '../axis/date-time-axis';import { Category } from '../axis/category-axis';import { Theme } from '../../common/model/theme';import { IAxisLabelRenderEventArgs } from '../../common/model/interface';import { axisLabelRender } from '../../common/model/constants';
     /**
+     * It specifies whether the axis to be rendered in inversed manner or not.
+     * @default false
+     */
+    isInversed?: boolean;
+
+    /**
      * Description for axis and its element.
@@ -501,0 +507,0 @@ * @default null

src/chart/axis/axis.d.ts

@@ -416,2 +416,7 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     /**
+     * It specifies whether the axis to be rendered in inversed manner or not.
+     * @default false
+     */
+    isInversed: boolean;
+    /**
      * Description for axis and its element.
@@ -418,0 +423,0 @@ * @default null

src/chart/axis/axis.js

@@ -431,2 +431,5 @@ var __extends = (this && this.__extends) || (function () {
     __decorate([
+        ej2_base_1.Property(false)
+    ], Axis.prototype, "isInversed", void 0);
+    __decorate([
         ej2_base_1.Property(null)
@@ -433,0 +436,0 @@ ], Axis.prototype, "description", void 0);

src/chart/axis/cartesian-panel.js

@@ -535,4 +535,2 @@ define(["require", "exports", "../../common/utils/helper", "../../common/utils/helper", "../../common/utils/helper"], function (require, exports, helper_1, helper_2, helper_3) {
             var range = axis.visibleRange;
-            var lineWidth = axis.minorGridLines.width;
-            var tickWidth = axis.minorTickLines.width;
             var direction = [];
@@ -557,8 +555,8 @@ var tickSize = axis.opposedPosition ? -axis.minorTickLines.height : axis.minorTickLines.height;
                         position = Math.ceil(((value - range.min) / (range.max - range.min)) * rect.width);
-                        coor = (Math.floor(position + rect.x) + lineWidth);
-                        minorGird = minorGird.concat('M' + ' ' + coor + ' ' + (this.seriesClipRect.y + lineWidth)
-                            + 'L ' + coor + ' ' + (this.seriesClipRect.y + this.seriesClipRect.height + lineWidth));
-                        coor = (Math.floor(position + rect.x) + tickWidth);
-                        minorTick = minorTick.concat('M' + ' ' + coor + ' ' + (rect.y + lineWidth)
-                            + 'L ' + coor + ' ' + (rect.y + tickSize + lineWidth));
+                        coor = (Math.floor(position + rect.x));
+                        minorGird = minorGird.concat('M' + ' ' + coor + ' ' + (this.seriesClipRect.y)
+                            + 'L ' + coor + ' ' + (this.seriesClipRect.y + this.seriesClipRect.height));
+                        coor = (Math.floor(position + rect.x));
+                        minorTick = minorTick.concat('M' + ' ' + coor + ' ' + (rect.y)
+                            + 'L ' + coor + ' ' + (rect.y + tickSize));
                     }
@@ -573,6 +571,6 @@ }
                         position = Math.ceil(((value - range.min) / (range.max - range.min)) * rect.height) * -1;
-                        coor = (Math.floor(position + rect.y + rect.height) + lineWidth);
+                        coor = (Math.floor(position + rect.y + rect.height));
                         minorGird = minorGird.concat('M' + ' ' + (this.seriesClipRect.x) + ' ' + coor
                             + 'L ' + (this.seriesClipRect.x + this.seriesClipRect.width) + ' ' + coor);
-                        coor = (Math.floor(position + rect.y + rect.height) + tickWidth);
+                        coor = (Math.floor(position + rect.y + rect.height));
                         minorTick = minorTick.concat('M' + ' ' + rect.x + ' ' + coor + 'L ' + (rect.x + tickSize) + ' ' + coor);
@@ -646,6 +644,7 @@ }
                 }
-                if (axis.angle % 360 === 0 && axis.labelIntersectAction === 'Hide' && options.x <= previousEnd) {
+                if (axis.angle % 360 === 0 && axis.labelIntersectAction === 'Hide' && i !== 0 &&
+                    (!axis.isInversed ? options.x <= previousEnd : options.x + elementSize.width >= previousEnd)) {
                     continue;
                 }
-                previousEnd = options.x + elementSize.width;
+                previousEnd = axis.isInversed ? options.x : options.x + elementSize.width;
                 if (axis.angle !== 0) {
@@ -652,0 +651,0 @@ angle = (axis.angle > 360) ? axis.angle % 360 : axis.angle;

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 } 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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

src/chart/chart.d.ts

@@ -686,2 +686,3 @@ import { Component, Internationalization, ModuleDeclaration } from '@syncfusion/ej2-base';
     chartOnMouseMove(e: PointerEvent | TouchEvent, touches: TouchList): boolean;
+    titleTooltip(event: Event, x: number, y: number, isTouch?: boolean): void;
     /**
@@ -688,0 +689,0 @@ * Handles the mouse down on chart.

src/chart/chart.js

@@ -297,3 +297,3 @@ var __extends = (this && this.__extends) || (function () {
                 this.elementSize = helper_1.measureText(this.title, this.titleStyle);
-                var options = new helper_1.TextOption(this.element.id + '_ChartTitle', this.availableSize.width / 2, this.margin.top + 3 * (this.elementSize.height / 4), 'middle', this.title);
+                var options = new helper_1.TextOption(this.element.id + '_ChartTitle', this.availableSize.width / 2, this.margin.top + 3 * (this.elementSize.height / 4), 'middle', helper_1.textTrim(this.availableSize.width, this.title, this.titleStyle));
                 var element = helper_2.textElement(options, this.titleStyle, this.titleStyle.color, this.svgObject);
@@ -395,2 +395,3 @@ element.setAttribute('aria-label', this.description || this.title);
             element.style.position = 'relative';
+            element.style.display = 'block';
         };
@@ -401,4 +402,4 @@ Chart.prototype.isOrientation = function () {
         Chart.prototype.longPress = function (e) {
-            this.mouseX = e ? (e.originalEvent.changedTouches[0].clientX - this.offset.x) : 0;
-            this.mouseY = e ? (e.originalEvent.changedTouches[0].clientY - this.offset.y) : 0;
+            this.mouseX = (e && e.originalEvent.changedTouches) ? (e.originalEvent.changedTouches[0].clientX - this.offset.x) : 0;
+            this.mouseY = (e && e.originalEvent.changedTouches) ? (e.originalEvent.changedTouches[0].clientY - this.offset.y) : 0;
             this.startMove = true;
@@ -542,4 +543,7 @@ if (this.crosshairModule && helper_2.withInBounds(this.mouseX, this.mouseY, this.chartAxisLayoutPanel.seriesClipRect)) {
             }
-            if (this.legendSettings.visible && this.legendModule) {
-                this.legendModule.move(e, this.mouseX, this.mouseY);
+            if (!this.isTouch) {
+                this.titleTooltip(e, this.mouseX, this.mouseY);
+                if (this.legendSettings.visible && this.legendModule) {
+                    this.legendModule.move(e, this.mouseX, this.mouseY);
+                }
             }
@@ -549,2 +553,11 @@ this.isTouch = false;
         };
+        Chart.prototype.titleTooltip = function (event, x, y, isTouch) {
+            var targetId = event.target.id;
+            if ((targetId === (this.element.id + '_ChartTitle')) && (event.target.textContent.indexOf('...') > -1)) {
+                helper_1.showTooltip(this.title, x, y, this.element.offsetWidth, this.element.id + '_EJ2_Title_Tooltip', isTouch);
+            }
+            else {
+                helper_1.removeElement(this.element.id + '_EJ2_Title_Tooltip');
+            }
+        };
         Chart.prototype.chartOnMouseDown = function (e) {
@@ -638,2 +651,6 @@ var pageX;
             if (this.isTouch) {
+                this.titleTooltip(e, this.mouseX, this.mouseY, this.isTouch);
+                if (this.legendSettings.visible && this.legendModule) {
+                    this.legendModule.move(e, this.mouseX, this.mouseY, this.isTouch);
+                }
                 this.threshold = new Date().getTime() + 300;
@@ -640,0 +657,0 @@ if (this.isDoubleTap && helper_2.withInBounds(this.mouseX, this.mouseY, this.chartAxisLayoutPanel.seriesClipRect)

src/chart/legend/legend.js

@@ -120,3 +120,2 @@ var __extends = (this && this.__extends) || (function () {
                 legend.visible = (series.visible);
-                chart.loaded = null;
                 if (chart.svgObject.childNodes.length > 0) {
@@ -123,0 +122,0 @@ while (chart.svgObject.lastChild) {

src/chart/series/bar-series.js

@@ -31,3 +31,3 @@ var __extends = (this && this.__extends) || (function () {
                     if (!argsData.cancel) {
-                        this.updateYRegion(point, rect);
+                        this.updateYRegion(point, rect, series);
                         this.drawRectangle(series, point, rect, argsData);
@@ -34,0 +34,0 @@ }

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

@@ -45,3 +45,3 @@ import { DoubleRange } from '../utils/double-range';
      */
-    protected updateYRegion(point: Points, rect: Rect): void;
+    protected updateYRegion(point: Points, rect: Rect, series: Series): void;
     /**
@@ -48,0 +48,0 @@ * To trigger the point rendering event.

src/chart/series/column-base.js

@@ -91,9 +91,10 @@ define(["require", "exports", "@syncfusion/ej2-base", "../utils/double-range", "../../common/utils/helper", "../../common/utils/helper", "../../common/model/constants"], function (require, exports, ej2_base_1, double_range_1, helper_1, helper_2, constants_1) {
                 x: rect.x + (rect.width) / 2,
-                y: (series.seriesType === 'HighLow') ? rect.y : point.yValue < 0 ? (rect.y + rect.height) : rect.y,
+                y: ((series.seriesType === 'HighLow' && series.yAxis.isInversed) || (point.yValue < 0 !== series.yAxis.isInversed)) ?
+                    rect.y + rect.height : rect.y
             };
         };
-        ColumnBase.prototype.updateYRegion = function (point, rect) {
+        ColumnBase.prototype.updateYRegion = function (point, rect, series) {
             point.region = new helper_1.Rect(rect.x, rect.y, rect.width, rect.height);
             point.symbolLocation = {
-                x: point.yValue < 0 ? rect.x : rect.x + rect.width,
+                x: point.yValue < 0 !== series.yAxis.isInversed ? rect.x : rect.x + rect.width,
                 y: rect.y + rect.height / 2
@@ -162,3 +163,4 @@ };
                     y = +point.region.y;
-                    centerY = (series.seriesType === 'HighLow') ? y + elementHeight / 2 : isPlot ? y : y + elementHeight;
+                    centerY = (series.seriesType === 'HighLow') ? y + elementHeight / 2 :
+                        (isPlot !== series.yAxis.isInversed) ? y : y + elementHeight;
                     centerX = isPlot ? x : x + elementWidth;
@@ -177,3 +179,3 @@ }
                     centerY = isPlot ? y : y + elementHeight;
-                    centerX = isPlot ? x + elementWidth : x;
+                    centerX = isPlot !== series.yAxis.isInversed ? x + elementWidth : x;
                 }
@@ -180,0 +182,0 @@ }

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

@@ -17,2 +17,3 @@ import { Chart } from '../chart';
     private commonId;
+    private yAxisInversed;
     /**
@@ -19,0 +20,0 @@ * Constructor for the data label module.

src/chart/series/data-label.js

@@ -21,2 +21,3 @@ define(["require", "exports", "../../common/utils/helper", "../../common/utils/helper", "../../common/model/constants"], function (require, exports, helper_1, helper_2, constants_1) {
             var textSize;
+            this.yAxisInversed = series.yAxis.isInversed;
             series.points.map(function (point, index) {
@@ -65,3 +66,3 @@ _this.margin = dataLabel.margin;
                 location.y = !series.isRectSeries ? this.calculatePathPosition(location.y, dataLabel.position, series, point, textSize) :
-                    this.calculateRectPosition(location.y, point.region, point.yValue < 0, dataLabel.position, series, textSize, labelIndex);
+                    this.calculateRectPosition(location.y, point.region, point.yValue < 0 !== series.yAxis.isInversed, dataLabel.position, series, textSize, labelIndex);
             }
@@ -73,3 +74,3 @@ else {
                     this.calculateAlignment(alignmentValue, location.x, dataLabel.alignment, point.yValue < 0);
-                location.x = this.calculateRectPosition(location.x, point.region, point.yValue < 0, dataLabel.position, series, textSize, labelIndex);
+                location.x = this.calculateRectPosition(location.x, point.region, point.yValue < 0 !== series.yAxis.isInversed, dataLabel.position, series, textSize, labelIndex);
             }
@@ -114,8 +115,9 @@ rect = helper_2.calculateRect(location, textSize, this.margin);
                         if (labelIndex === 0) {
-                            y = position !== 'Outer' ? y + extraSpace + margin.bottom :
+                            y = position !== 'Outer' !== this.yAxisInversed ? y + extraSpace + margin.bottom :
                                 y - extraSpace - margin.top;
                         }
                         else {
-                            y = position !== 'Outer' ? y + rect.height - extraSpace - margin.bottom :
-                                y + rect.height + extraSpace + margin.top;
+                            var height = this.yAxisInversed ? -rect.height : rect.height;
+                            y = position !== 'Outer' !== this.yAxisInversed ? y + height - extraSpace - margin.bottom :
+                                y + height + extraSpace + margin.top;
                         }
@@ -142,2 +144,5 @@ }
             var padding = 5;
+            if ((series.type.indexOf('Area') > -1) && this.yAxisInversed && series.marker.dataLabel.position !== 'Auto') {
+                position = position === 'Top' ? 'Bottom' : position === 'Bottom' ? 'Top' : position;
+            }
             this.fontBackground = this.fontBackground === 'transparent' ? this.chart.chartArea.background : this.fontBackground;
@@ -205,3 +210,3 @@ switch (position) {
                 if (index) {
-                    position = (!previousPoint || !previousPoint.visible || yValue > previousPoint.yValue
+                    position = (!previousPoint || !previousPoint.visible || (yValue > previousPoint.yValue !== this.yAxisInversed)
                         || yValue === previousPoint.yValue) ? 'Top' : 'Bottom';
@@ -212,6 +217,8 @@ }
                 if (index === 0) {
-                    position = (!nextPoint || !nextPoint.visible || yValue > nextPoint.yValue) ? 'Top' : 'Bottom';
+                    position = (!nextPoint || !nextPoint.visible || yValue > nextPoint.yValue ||
+                        (yValue < nextPoint.yValue && this.yAxisInversed)) ? 'Top' : 'Bottom';
                 }
-                if (index === points.length - 1) {
-                    position = (!previousPoint || !previousPoint.visible || yValue > previousPoint.yValue) ? 'Top' : 'Bottom';
+                else if (index === points.length - 1) {
+                    position = (!previousPoint || !previousPoint.visible || yValue > previousPoint.yValue ||
+                        (yValue < previousPoint.yValue && this.yAxisInversed)) ? 'Top' : 'Bottom';
                 }
@@ -229,3 +236,4 @@ else {
                         var intersectY = (slope * index) + (nextPoint.yValue - (slope * (index + 1)));
-                        position = intersectY < yValue ? 'Top' : 'Bottom';
+                        position = !this.yAxisInversed ? intersectY < yValue ? 'Top' : 'Bottom' :
+                            intersectY < yValue ? 'Bottom' : 'Top';
                     }
@@ -232,0 +240,0 @@ }

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

@@ -33,3 +33,3 @@ var __extends = (this && this.__extends) || (function () {
                         this.drawRectangle(series, point, rect, argsData);
-                        this.updateYRegion(point, rect);
+                        this.updateYRegion(point, rect, series);
                     }
@@ -36,0 +36,0 @@ }

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

@@ -27,3 +27,2 @@ import { ChartLocation, Rect } from '../../common/utils/helper';
     private resizeMode;
-    private legendSelectionMode;
     /**
@@ -30,0 +29,0 @@ * Constructor for selection module.

src/chart/user-interaction/selection.js

@@ -85,3 +85,2 @@ var __extends = (this && this.__extends) || (function () {
             this.isSeriesMode = chart.selectionMode === 'Series';
-            this.legendSelectionMode = false;
             switch (chart.selectionMode) {
@@ -233,3 +232,3 @@ case 'Series':
                 if (isBlurEffectNeeded) {
-                    this.isSeriesMode = chart.selectionMode === 'Series' || this.legendSelectionMode;
+                    this.isSeriesMode = chart.selectionMode === 'Series';
                     this.blurEffect(chart.element.id, chart.visibleSeries);
@@ -245,8 +244,5 @@ }
                 this.isSeriesMode = true;
-                this.legendSelectionMode = true;
-                isBlurEffectNeeded = this.selectedDataIndexes.length === 0;
                 this.selection(chart, new base_1.Index(series, NaN), seriesElements);
-                if (isBlurEffectNeeded) {
-                    this.blurEffect(chart.element.id, chart.visibleSeries);
-                }
+                this.isSeriesMode = chart.selectionMode === 'Series';
+                this.blurEffect(chart.element.id, chart.visibleSeries);
             }
@@ -340,5 +336,8 @@ };
             }
+            if (dragRect.width < 5 || dragRect.height < 5) {
+                return null;
+            }
             var element = document.getElementById(this.draggedRect);
             if (this.closeIcon) {
-                this.closeIcon.remove();
+                helper_1.removeElement(this.closeIconId);
             }
@@ -483,3 +482,3 @@ if (element) {
         Selection.prototype.completeSelection = function (chart, e) {
-            if ((this.dragging || this.resizing) && this.dragRect.width && this.dragRect.height) {
+            if ((this.dragging || this.resizing) && this.dragRect.width > 5 && this.dragRect.height > 5) {
                 this.calculateDragSelectedElements(chart, this.dragRect);
@@ -486,0 +485,0 @@ }

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

@@ -1,2 +0,2 @@
-import { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';import { createElement } 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 } 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, 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';
 
@@ -3,0 +3,0 @@ /**

src/common/legend/legend.d.ts

@@ -237,17 +237,2 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     /**
-     * To show the trimmed text of legend for chart and accumulation chart
-     * @private
-     */
-    showText(text: string, x: number, y: number): void;
-    /**
-     * To hide trimmed text tooltip for legend
-     * @private
-     */
-    fadeOutTooltip(): void;
-    /**
-     * To remove trimmed text tooltip for legend
-     * @private
-     */
-    removeTooltip(): void;
-    /**
      * To show or hide trimmed text tooltip for legend.
@@ -257,3 +242,3 @@ * @return {void}
      */
-    move(event: Event, x: number, y: number): void;
+    move(event: Event, x: number, y: number, isTouch?: boolean): void;
 }
@@ -260,0 +245,0 @@ /**

src/common/legend/legend.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../model/base", "../model/theme", "../utils/helper", "../utils/helper"], function (require, exports, ej2_base_1, ej2_base_2, base_1, theme_1, helper_1, helper_2) {
+define(["require", "exports", "@syncfusion/ej2-base", "../model/base", "../model/theme", "../utils/helper", "../utils/helper"], function (require, exports, ej2_base_1, base_1, theme_1, helper_1, helper_2) {
     "use strict";
@@ -340,24 +340,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
         };
-        BaseLegend.prototype.showText = function (text, x, y) {
-            var id = 'EJ2_legend_tooltip';
-            var tooltip = document.getElementById(id);
-            if (!tooltip) {
-                tooltip = ej2_base_2.createElement('div', {
-                    innerHTML: text,
-                    id: id,
-                    styles: 'top:' + (y + 10).toString() + 'px;left:' + (x + 10).toString() + 'px;background-color: rgb(255, 255, 255);' +
-                        'position:fixed;border:1px solid rgb(112, 112, 112); padding-left : 3px; padding-right : 2px;' +
-                        'padding-bottom : 2px; font-size:12px; font-family: "Segoe UI"'
-                });
-                document.body.appendChild(tooltip);
-            }
-        };
-        BaseLegend.prototype.fadeOutTooltip = function () {
-            clearTimeout(this.clearTooltip);
-            this.clearTooltip = setTimeout(this.removeTooltip, 1500);
-        };
-        BaseLegend.prototype.removeTooltip = function () {
-            helper_2.removeElement('EJ2_legend_tooltip');
-        };
-        BaseLegend.prototype.move = function (event, x, y) {
+        BaseLegend.prototype.move = function (event, x, y, isTouch) {
+            var _this = this;
             if (event.target.textContent.indexOf('...') > -1) {
@@ -367,8 +347,12 @@ var targetId = event.target.id.split(this.legendID + '_text_');
                     var index = parseInt(targetId[1], 10);
+                    var element = this.chart.element;
                     if (!isNaN(index)) {
+                        if (isTouch) {
+                            helper_2.removeElement(this.chart.element.id + '_EJ2_Legend_Tooltip');
+                        }
                         if (this.isChartControl) {
-                            this.showText(this.chart.series[index].name, x, y);
+                            helper_2.showTooltip(this.chart.series[index].name, x, y, element.offsetWidth, element.id + '_EJ2_Legend_Tooltip');
                         }
                         else {
-                            this.showText(this.chart.visibleSeries[0].points[index].x.toString(), x, y);
+                            helper_2.showTooltip(this.chart.visibleSeries[0].points[index].x.toString(), x, y, element.offsetWidth, element.id + '_EJ2_Legend_Tooltip');
                         }
@@ -379,4 +363,8 @@ }
             else {
-                helper_2.removeElement('EJ2_legend_tooltip');
+                helper_2.removeElement(this.chart.element.id + '_EJ2_Legend_Tooltip');
             }
+            if (isTouch) {
+                clearTimeout(this.clearTooltip);
+                this.clearTooltip = setTimeout(function () { helper_2.removeElement(_this.chart.element.id + '_EJ2_Legend_Tooltip'); }, 1000);
+            }
         };
@@ -383,0 +371,0 @@ return BaseLegend;

src/common/utils/helper.d.ts

@@ -28,2 +28,4 @@ import { FontModel, BorderModel, MarginModel } from '../model/base-model';
 /** @private */
+export declare function showTooltip(text: string, x: number, y: number, areaWidth: number, id: string, isTouch?: boolean): void;
+/** @private */
 export declare function inside(value: number, range: VisibleRangeModel): boolean;
@@ -30,0 +32,0 @@ /** @private */

src/common/utils/helper.js

@@ -66,2 +66,24 @@ var __extends = (this && this.__extends) || (function () {
     exports.logBase = logBase;
+    function showTooltip(text, x, y, areaWidth, id, isTouch) {
+        var tooltip = document.getElementById(id);
+        var width = measureText(text, {
+            fontFamily: 'Segoe UI', size: '12px',
+            fontStyle: 'Normal', fontWeight: 'Regular'
+        }).width + 5;
+        x = (x + width > areaWidth) ? x - width : x;
+        if (!tooltip) {
+            tooltip = ej2_base_3.createElement('div', {
+                innerHTML: text,
+                id: id,
+                styles: 'top:' + (y + 10).toString() + 'px;left:' + (x + 10).toString() + 'px;background-color: rgb(255, 255, 255);' +
+                    'position:fixed;border:1px solid rgb(112, 112, 112); padding-left : 3px; padding-right : 2px;' +
+                    'padding-bottom : 2px; padding-top : 2px; font-size:12px; font-family: "Segoe UI"'
+            });
+            document.body.appendChild(tooltip);
+        }
+        if (isTouch) {
+            setTimeout(function () { removeElement(id); }, 1500);
+        }
+    }
+    exports.showTooltip = showTooltip;
     function inside(value, range) {
@@ -139,3 +161,4 @@ return (value < range.max) && (value > range.min);
         var range = axis.visibleRange;
-        return (value - range.min) / (range.delta);
+        var result = (value - range.min) / (range.delta);
+        return axis.isInversed ? (1 - result) : result;
     }
@@ -142,0 +165,0 @@ exports.valueToCoefficient = valueToCoefficient;

No alert changes

Improved metrics

Total package byte prevSize

10479726

increased by1.06%

Lines of code

118665

increased by1.04%

Dependency changes

• Updated@syncfusion/ej2-base@^1.0.18

• Updated@syncfusion/ej2-popups@^1.0.17