@syncfusion/ej2-charts - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

dist/es6/chart/axis/axis.js

@@ -206,2 +206,3 @@ var __extends = (this && this.__extends) || (function () {
         _this.isStack100 = false;
+        _this.paddingInterval = 0;
         return _this;
@@ -208,0 +209,0 @@ }

dist/es6/chart/axis/double-axis.js

@@ -58,3 +58,2 @@ import { getMinPointsDelta } from '../utils/helper';
         var series;
-        var paddingInterval = 0;
         this.min = null;
@@ -68,6 +67,6 @@ this.max = null;
                 }
-                paddingInterval = 0;
+                axis.paddingInterval = 0;
                 if (series_1.type.indexOf('Column') > -1 || series_1.type.indexOf('Bar') > -1) {
                     if (series_1.xAxis.valueType === 'Double') {
-                        paddingInterval = getMinPointsDelta(series_1.xAxis, axis.series) / 2;
+                        axis.paddingInterval = getMinPointsDelta(series_1.xAxis, axis.series) / 2;
                     }
@@ -80,3 +79,3 @@ }
                     else {
-                        this.findMinMax(series_1.xMin - paddingInterval, series_1.xMax + paddingInterval);
+                        this.findMinMax(series_1.xMin - axis.paddingInterval, series_1.xMax + axis.paddingInterval);
                     }
@@ -86,3 +85,3 @@ }
                     if (this.chart.requireInvertedAxis) {
-                        this.findMinMax(series_1.xMin - paddingInterval, series_1.xMax + paddingInterval);
+                        this.findMinMax(series_1.xMin - axis.paddingInterval, series_1.xMax + axis.paddingInterval);
                     }
@@ -125,4 +124,4 @@ else {
     Double.prototype.updateActualRange = function (axis, minimum, maximum, interval) {
-        axis.actualRange.min = minimum;
-        axis.actualRange.max = maximum;
+        axis.actualRange.min = axis.minimum || minimum;
+        axis.actualRange.max = axis.maximum || maximum;
         axis.actualRange.interval = interval;
@@ -190,3 +189,3 @@ };
         var tempInterval = axis.visibleRange.min;
-        if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {
+        if (axis.zoomFactor < 1 || axis.zoomPosition > 0 || axis.paddingInterval) {
             tempInterval = axis.visibleRange.min - (axis.visibleRange.min % axis.visibleRange.interval);
@@ -193,0 +192,0 @@ }

dist/es6/chart/chart.js

@@ -138,3 +138,2 @@ var __extends = (this && this.__extends) || (function () {
         }
-        this.trigger('loaded', { chart: this });
     };
@@ -158,2 +157,3 @@ Chart.prototype.processData = function () {
             this.refreshBound();
+            this.trigger('loaded', { chart: this });
         }
@@ -340,3 +340,3 @@ };
         this.longPress = this.longPress.bind(this);
-        new Touch(this.element, { taphold: this.longPress, tapholdThreshold: 500 });
+        new Touch(this.element, { tapHold: this.longPress, tapHoldThreshold: 500 });
         this.setStyle(this.element);
@@ -388,2 +388,3 @@ };
             _this.refreshBound();
+            _this.trigger('loaded', { chart: _this });
         }, 500);
@@ -885,2 +886,3 @@ return false;
                 this.renderElements();
+                this.trigger('loaded', { chart: this });
             }
@@ -891,2 +893,3 @@ if (refreshBounds) {
                 this.refreshBound();
+                this.trigger('loaded', { chart: this });
             }
@@ -893,0 +896,0 @@ }

dist/es6/chart/index.js

@@ -17,2 +17,3 @@ export * from './chart';
 export * from './series/range-column-series';
+export * from './series/bubble-series';
 export * from './series/spline-series';
@@ -19,0 +20,0 @@ export * from './series/marker';

dist/es6/chart/legend/legend.js

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

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

@@ -145,2 +145,3 @@ var __extends = (this && this.__extends) || (function () {
         this.yMax = -Infinity;
+        this.sizeMax = -Infinity;
         this.seriesType = (this.type === 'RangeColumn') ? 'HighLow' : 'XY';
@@ -214,2 +215,3 @@ if (this.xAxis.valueType === 'Category') {
         point.low = this.currentViewData[i][this.low];
+        point.size = this.currentViewData[i][this.size];
         point.text = this.currentViewData[i][textMappingName];
@@ -224,2 +226,5 @@ return point;
                 this.yData.push(point.yValue);
+                if (this.type === 'Bubble') {
+                    this.sizeMax = Math.max(this.sizeMax, point.size);
+                }
                 return isNullOrUndefined(point.x) || isNullOrUndefined(point.y);
@@ -393,2 +398,3 @@ case 'HighLow':
             chart.refreshBound();
+            chart.trigger('loaded', { chart: chart });
         }
@@ -508,2 +514,5 @@ };
 __decorate([
+    Property('')
+], Series.prototype, "size", void 0);
+__decorate([
     Property(null)
@@ -553,1 +562,7 @@ ], Series.prototype, "xAxisName", void 0);
 ], Series.prototype, "selectionStyle", void 0);
+__decorate([
+    Property(1)
+], Series.prototype, "minRadius", void 0);
+__decorate([
+    Property(3)
+], Series.prototype, "maxRadius", void 0);

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

@@ -36,2 +36,3 @@ import { ChartLocation, TextOption, RectOption, isCollide } from '../utils/helper';
                         _this.isDataLabelShape(argsData);
+                        _this.markerHeight = series.type === 'Bubble' ? (point.region.height / 2) : _this.markerHeight;
                         rect = _this.calculateTextPosition(point, series, textSize, dataLabel, i);
@@ -194,4 +195,7 @@ if (!isCollide(rect, chart.dataLabelCollections)) {
         var collection = this.chart.dataLabelCollections;
-        if (series.type.indexOf('Step') > -1) {
+        if (series.type === 'Bubble') {
             position = 'Top';
+        }
+        else if (series.type.indexOf('Step') > -1) {
+            position = 'Top';
             if (index) {
@@ -198,0 +202,0 @@ position = (!previousPoint || !previousPoint.visible || yValue > previousPoint.yValue

dist/es6/chart/series/marker.js

@@ -39,3 +39,4 @@ import { drawSymbol, PathOption, Size, markerAnimate } from '../utils/helper';
     Marker.prototype.doMarkerAnimation = function (series) {
-        if (!(series.type.indexOf('Column') > -1 || series.type.indexOf('Bar') > -1 || series.type === 'Scatter')) {
+        if (!(series.type.indexOf('Column') > -1 || series.type.indexOf('Bar') > -1 || series.type === 'Scatter'
+            || series.type === 'Bubble')) {
             var markerElements = series.symbolElement.childNodes;
@@ -42,0 +43,0 @@ var delay = series.animation.delay + series.animation.duration;

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

@@ -93,2 +93,3 @@ var __extends = (this && this.__extends) || (function () {
         elementId = (!chart.series[index.series].isRectSeries && chart.series[index.series].type !== 'Scatter' &&
+            chart.series[index.series].type !== 'Bubble' &&
             chart.series[index.series].marker.visible) ? (elementId + '_Symbol') : elementId;
@@ -148,3 +149,4 @@ return document.getElementById(elementId);
         }
-        if (selectedElements[0] && selectedElements[0].classList.contains(this.getSelectionClass(selectedElements[0].id))) {
+        var className = selectedElements[0] && (selectedElements[0].getAttribute('class') || '');
+        if (selectedElements[0] && className.indexOf(this.getSelectionClass(selectedElements[0].id)) > -1) {
             this.removeStyles(selectedElements);
@@ -188,11 +190,29 @@ this.addOrRemoveIndex(this.selectedDataIndexes, index);
         var children = (this.isSeriesMode ? [element] : element.childNodes);
+        var elementClassName;
+        var parentClassName;
         for (var i = 0; i < children.length; i++) {
-            if (!children[i].classList.contains(className) && !children[i].parentElement.classList.contains(className) && visibility) {
-                children[i].classList.add(this.unselected);
+            elementClassName = children[i].getAttribute('class') || '';
+            parentClassName = children[i].parentNode.getAttribute('class') || '';
+            if (elementClassName.indexOf(className) === -1 &&
+                parentClassName.indexOf(className) === -1 && visibility) {
+                this.addSVGClass(children[i], this.unselected);
             }
             else {
-                children[i].classList.remove(this.unselected);
+                this.removeSVGClass(children[i], this.unselected);
             }
         }
     };
+    Selection.prototype.addSVGClass = function (element, classname) {
+        var elementClassName = element.getAttribute('class') || '';
+        elementClassName += ((elementClassName !== '') ? ' ' : '');
+        if (elementClassName.indexOf(classname) === -1) {
+            element.setAttribute('class', elementClassName + classname);
+        }
+    };
+    Selection.prototype.removeSVGClass = function (element, classname) {
+        var elementClassName = element.getAttribute('class') || '';
+        if (elementClassName.indexOf(classname) > -1) {
+            element.setAttribute('class', elementClassName.replace(classname, ''));
+        }
+    };
     Selection.prototype.checkVibility = function (selectedIndexes, seriesCollection) {
@@ -220,5 +240,5 @@ var visible = false;
             if (element) {
-                element.parentElement.classList.remove(this.unselected);
-                element.classList.remove(this.unselected);
-                element.classList.add(this.getSelectionClass(element.id));
+                this.removeSVGClass(element.parentNode, this.unselected);
+                this.removeSVGClass(element, this.unselected);
+                this.addSVGClass(element, this.getSelectionClass(element.id));
             }
@@ -234,3 +254,3 @@ }
             if (element) {
-                element.classList.remove(this.getSelectionClass(element.id));
+                this.removeSVGClass(element, this.getSelectionClass(element.id));
             }
@@ -393,4 +413,4 @@ }
         var element = document.getElementById(this.draggedRect);
-        if (this.closeIcon) {
-            this.closeIcon.remove();
+        if (this.closeIcon && this.closeIcon.parentNode) {
+            remove(this.closeIcon);
         }
@@ -397,0 +417,0 @@ if (element) {

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

@@ -415,4 +415,6 @@ import { createElement } from '@syncfusion/ej2-base/dom';
         var series = pointData.series;
-        var element = (series.type === 'Scatter') ? series.seriesElement : series.symbolElement;
-        if (!series.marker.visible && series.type !== 'Scatter' && pointData.point.symbolLocation) {
+        var height;
+        var width = 0;
+        var element = (series.type === 'Scatter' || series.type === 'Bubble') ? series.seriesElement : series.symbolElement;
+        if (!series.marker.visible && series.type !== 'Scatter' && series.type !== 'Bubble' && pointData.point.symbolLocation) {
             return null;
@@ -422,5 +424,7 @@ }
         var marker = series.marker;
-        var shape = marker.shape;
+        var shape = series.type === 'Bubble' ? 'Circle' : marker.shape;
         var symbolId = this.element.id + '_Series_' + series.index + '_Point_' + point.index + '_Trackball';
-        var size = new Size(marker.width + 5, marker.height + 5);
+        width = (series.type !== 'Bubble') ? marker.width : (point.region.width);
+        height = (series.type !== 'Bubble') ? marker.height : (point.region.height);
+        var size = new Size(width + 5, height + 5);
         var options = new PathOption(symbolId, marker.fill ? marker.fill : point.color, marker.border.width, marker.border.color, marker.opacity / 4, null, null);
@@ -517,3 +521,3 @@ var symbol = drawSymbol(point.symbolLocation, shape, size, null, options, '');
                 case 'XY':
-                    return '${point.x} : ${point.y}';
+                    return (series.type === 'Bubble') ? '${point.x} : ${point.y} : ${point.size}' : '${point.x} : ${point.y}';
                 case 'HighLow':
@@ -520,0 +524,0 @@ return '${point.x} : ${point.high} : ${point.low}';

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

@@ -19,3 +19,3 @@ import { EventHandler } from '@syncfusion/ej2-base';
         childElement.setAttribute('aria-label', 'Pan');
-        this.panElements = childElement;
+        this.panElement = childElement;
         childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Pan_1', 'transparent', {}, 1, new Rect(0, 0, 16, 16))));
@@ -34,3 +34,3 @@ childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_Pan_2', fillColor, null, null, 1, null, direction)));
         childElement.setAttribute('aria-label', 'Zoom');
-        this.zoomElements = childElement;
+        this.zoomElement = childElement;
         childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Zoom_1', 'transparent', {}, 1, new Rect(0, 0, 16, 16))));
@@ -53,3 +53,3 @@ childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_Zoom_3', fillColor, null, null, 1, null, direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z')));
         childElement.appendChild(render.drawPolygon(new PolygonOption(this.elementId + '_Zooming_ZoomIn_3', polygonDirection + ' 9.749,6.466 9.749,8.466 10.749,8.466 10.749,6.466 12.749,6.466', fillColor)));
-        this.zoomInElements = childElement;
+        this.zoomInElement = childElement;
         this.elementOpacity = chart.zoomModule.isPanning ? '0.2' : '1';
@@ -70,3 +70,3 @@ childElement.setAttribute('opacity', this.elementOpacity);
         childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_ZoomOut_2', fillColor, null, null, 1, null, direction + '4.133s-1.866,4.133-4.133,4.133S5.911,8.222,5.911,5.911z M12.567,6.466h-5v-1h5V6.466z')));
-        this.zoomOutElements = childElement;
+        this.zoomOutElement = childElement;
         this.elementOpacity = chart.zoomModule.isPanning ? '0.2' : '1';
@@ -147,6 +147,6 @@ childElement.setAttribute('opacity', this.elementOpacity);
         this.chart.svgObject.setAttribute('cursor', 'auto');
-        this.zoomInElements.setAttribute('opacity', this.elementOpacity);
-        this.zoomOutElements.setAttribute('opacity', this.elementOpacity);
-        this.applySelection(this.zoomElements.childNodes, this.selectionColor);
-        this.applySelection(this.panElements.childNodes, '#737373');
+        this.zoomInElement.setAttribute('opacity', this.elementOpacity);
+        this.zoomOutElement.setAttribute('opacity', this.elementOpacity);
+        this.applySelection(this.zoomElement.childNodes, this.selectionColor);
+        this.applySelection(this.panElement.childNodes, '#737373');
         return false;
@@ -159,6 +159,6 @@ };
         this.elementOpacity = '0.2';
-        this.zoomInElements.setAttribute('opacity', this.elementOpacity);
-        this.zoomOutElements.setAttribute('opacity', this.elementOpacity);
-        this.applySelection(this.panElements.childNodes, this.selectionColor);
-        this.applySelection(this.zoomElements.childNodes, '#737373');
+        this.zoomInElement.setAttribute('opacity', this.elementOpacity);
+        this.zoomOutElement.setAttribute('opacity', this.elementOpacity);
+        this.applySelection(this.panElement.childNodes, this.selectionColor);
+        this.applySelection(this.zoomElement.childNodes, '#737373');
         return false;
@@ -165,0 +165,0 @@ };

dist/es6/chart/utils/helper.js

@@ -266,3 +266,3 @@ var __extends = (this && this.__extends) || (function () {
             element.removeAttribute('transform');
-            if ((series.type === 'Scatter') && !isLabel && (pointIndex === series.points.length - 1)) {
+            if ((series.type === 'Scatter' || series.type === 'Bubble') && !isLabel && (pointIndex === series.points.length - 1)) {
                 series.chart.trigger('animationComplete', { series: series });
@@ -292,2 +292,3 @@ }
         case 'Circle':
+        case 'Bubble':
             functionName = 'Ellipse';
@@ -294,0 +295,0 @@ merge(options, { 'rx': width / 2, 'ry': height / 2, 'cx': locX, 'cy': locY });

package.json

 {
-  "_args": [
-    [
-      {
-        "raw": "@syncfusion/ej2-charts@*",
-        "scope": "@syncfusion",
-        "escapedName": "@syncfusion%2fej2-charts",
-        "name": "@syncfusion/ej2-charts",
-        "rawSpec": "*",
-        "spec": "*",
-        "type": "range"
-      },
-      "C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2"
-    ]
-  ],
-  "_from": "@syncfusion/ej2-charts@*",
-  "_id": "@syncfusion/ej2-charts@1.0.10",
-  "_inCache": true,
-  "_location": "/@syncfusion/ej2-charts",
-  "_nodeVersion": "6.11.0",
-  "_npmUser": {
-    "name": "ej2",
-    "email": "[e-mail]"
-  },
-  "_npmVersion": "3.10.10",
-  "_phantomChildren": {},
-  "_requested": {
-    "raw": "@syncfusion/ej2-charts@*",
-    "scope": "@syncfusion",
-    "escapedName": "@syncfusion%2fej2-charts",
-    "name": "@syncfusion/ej2-charts",
-    "rawSpec": "*",
-    "spec": "*",
-    "type": "range"
-  },
-  "_requiredBy": [
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-ng-charts"
-  ],
-  "_resolved": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-charts/-/ej2-charts-1.0.10.tgz",
-  "_shasum": "25c5709b998b730ceb50101769e6e33bd28e07e1",
-  "_shrinkwrap": null,
-  "_spec": "@syncfusion/ej2-charts@*",
-  "_where": "C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bugs": {
-    "url": "https://github.com/syncfusion/ej2-charts/issues"
-  },
+  "name": "@syncfusion/ej2-charts",
+  "version": "1.0.11",
+  "description": "Essential JS 2 Chart Components",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
   "dependencies": {
-    "@syncfusion/ej2-base": "^1.0.10",
-    "@syncfusion/ej2-data": "^1.0.10"
+    "@syncfusion/ej2-base": "^1.0.11",
+    "@syncfusion/ej2-data": "^1.0.11"
   },
-  "description": "Essential JS 2 Chart Component",
   "devDependencies": {
@@ -63,8 +18,2 @@ "@types/chai": "^3.4.28",
   },
-  "dist": {
-    "shasum": "25c5709b998b730ceb50101769e6e33bd28e07e1",
-    "tarball": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-charts/-/ej2-charts-1.0.10.tgz"
-  },
-  "gitHead": "16c91ad556f37fe2d002623cf25fdd06caf8cf28",
-  "homepage": "https://github.com/syncfusion/ej2-charts#readme",
   "keywords": [
@@ -75,23 +24,6 @@ "ej2",
   ],
-  "license": "SEE LICENSE IN license",
-  "maintainers": [
-    {
-      "name": "ej2",
-      "email": "[e-mail]"
-    }
-  ],
-  "name": "@syncfusion/ej2-charts",
-  "optionalDependencies": {},
-  "readme": "# Overview\n\nHigh performance charting library with over chart types. Its rich feature set includes functionalities like data binding, multiple axes, trackball, crosshair, and zooming. It comes with full documentation and support and is available under commercial and community licenses – please visit www.syncfusion.com to get started.\n\n## Resources\n\n[Demos](http://ej2.syncfusion.com/demos/#/chart/line.html)\n\n# 1.0.10\n## Chart\n### New Features\n-\tProvided support to render StackingColumn100 percent series.\n-\tProvided support to render StackingBar100 percent series.\n-\tProvided support to render StackingArea100 percent series.\n-\tProvided support to render RangeColumn series.",
-  "readmeFilename": "ReadMe.md",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/syncfusion/ej2-charts.git"
-  },
-  "scripts": {
-    "ci-publish": "gulp ci-publish",
-    "compile": "gulp ci-compile",
-    "test": "gulp ci-test"
-  },
-  "version": "1.0.10"
+    "url": "https://github.com/syncfusion/ej2-charts.git"
+  }
 }

ReadMe.md

@@ -0,15 +1,23 @@
+
 # Overview
 
-High performance charting library with over chart types. Its rich feature set includes functionalities like data binding, multiple axes, trackball, crosshair, and zooming. It comes with full documentation and support and is available under commercial and community licenses – please visit www.syncfusion.com to get started.
+The Chart control is used to visualize the data with user interactivity and provides customizing options to configure the data visually.
+It can bind data from  datasource such as array of JSON objects , OData web services or
+[`DataManager`](http://ej2.syncfusion.com/documentation/data/api-dataManager.html). All chart elements are
+rendered using Scalable Vector Graphics (SVG).
 
+## Key Features
+
+* Supports 14 interactive chart types starting from line series to stacking series.
+* Support to bind local and remote datasource.
+* Supports multiple axes, and able to plot data with different data types such as numbers, datetime, logarithmic and string.
+* Supports interactive features like zooming, crosshair, trackball, tooltip and selection.
+
 ## Resources
 
 [Demos](http://ej2.syncfusion.com/demos/#/chart/line.html)
+[Documentation](http://ej2.syncfusion.com/documentation/chart/)
 
-# 1.0.10
-## Chart
-### New Features
--	Provided support to render StackingColumn100 percent series.
--	Provided support to render StackingBar100 percent series.
--	Provided support to render StackingArea100 percent series.
--	Provided support to render RangeColumn series.
+## Changelog
+
+Check the changelog [here](https://github.com/syncfusion/ej2-charts/blob/master/CHANGELOG.md)

src/chart/axis/axis.d.ts

@@ -465,2 +465,4 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     isStack100: boolean;
+    /** @private */
+    paddingInterval: number;
     /**
@@ -467,0 +469,0 @@ * The function used to find whether the range is set.

src/chart/axis/axis.js

@@ -202,2 +202,3 @@ var __extends = (this && this.__extends) || (function () {
             _this.isStack100 = false;
+            _this.paddingInterval = 0;
             return _this;
@@ -204,0 +205,0 @@ }

src/chart/axis/double-axis.js

@@ -58,3 +58,2 @@ define(["require", "exports", "../utils/helper", "../utils/double-range", "../utils/helper"], function (require, exports, helper_1, double_range_1, helper_2) {
             var series;
-            var paddingInterval = 0;
             this.min = null;
@@ -68,6 +67,6 @@ this.max = null;
                     }
-                    paddingInterval = 0;
+                    axis.paddingInterval = 0;
                     if (series_1.type.indexOf('Column') > -1 || series_1.type.indexOf('Bar') > -1) {
                         if (series_1.xAxis.valueType === 'Double') {
-                            paddingInterval = helper_1.getMinPointsDelta(series_1.xAxis, axis.series) / 2;
+                            axis.paddingInterval = helper_1.getMinPointsDelta(series_1.xAxis, axis.series) / 2;
                         }
@@ -80,3 +79,3 @@ }
                         else {
-                            this.findMinMax(series_1.xMin - paddingInterval, series_1.xMax + paddingInterval);
+                            this.findMinMax(series_1.xMin - axis.paddingInterval, series_1.xMax + axis.paddingInterval);
                         }
@@ -86,3 +85,3 @@ }
                         if (this.chart.requireInvertedAxis) {
-                            this.findMinMax(series_1.xMin - paddingInterval, series_1.xMax + paddingInterval);
+                            this.findMinMax(series_1.xMin - axis.paddingInterval, series_1.xMax + axis.paddingInterval);
                         }
@@ -125,4 +124,4 @@ else {
         Double.prototype.updateActualRange = function (axis, minimum, maximum, interval) {
-            axis.actualRange.min = minimum;
-            axis.actualRange.max = maximum;
+            axis.actualRange.min = axis.minimum || minimum;
+            axis.actualRange.max = axis.maximum || maximum;
             axis.actualRange.interval = interval;
@@ -190,3 +189,3 @@ };
             var tempInterval = axis.visibleRange.min;
-            if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {
+            if (axis.zoomFactor < 1 || axis.zoomPosition > 0 || axis.paddingInterval) {
                 tempInterval = axis.visibleRange.min - (axis.visibleRange.min % axis.visibleRange.interval);
@@ -193,0 +192,0 @@ }

src/chart/chart-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, NotifyPropertyChanges, Internationalization, ModuleDeclaration } from '@syncfusion/ej2-base';import { TapEventArgs, EmitType } from '@syncfusion/ej2-base';import { remove } from '@syncfusion/ej2-base/dom';import { extend } from '@syncfusion/ej2-base/util';import { INotifyPropertyChanged, SvgRenderer, setCulture, Browser, Touch } from '@syncfusion/ej2-base';import { Event, EventHandler, Complex, Collection } from '@syncfusion/ej2-base';import { findClipRect, measureText, TextOption } from './utils/helper';import { textElement, withInBounds, RectOption, ChartLocation, stringToNumber, PointData } from './utils/helper';import { MarginModel, BorderModel, ChartAreaModel, FontModel } from './model/base-model';import { getSeriesColor, Theme } from './model/theme';import { CrosshairSettingsModel, TooltipSettingsModel, ZoomSettingsModel } from './model/base-model';import { Margin, Border, ChartArea, Font, CrosshairSettings, TooltipSettings, ZoomSettings } from './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 './utils/helper';import { SelectionMode } from './utils/enum';import { Series } from './series/chart-series';import { SeriesModel } from './series/chart-series-model';import { Data } from './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 { 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 { Tooltip } from './user-interaction/tooltip';import { Crosshair } from './user-interaction/crosshair';import { Marker } from './series/marker';import { Legend, LegendSettings } from './legend/legend';import { LegendSettingsModel } from './legend/legend-model';import { Zoom } from './user-interaction/zooming';import { Selection, Indexes } from './user-interaction/selection';import { IndexesModel } from './user-interaction/selection-model';import { DataLabel } from './series/data-label';import { ITouches, ILegendRenderEventArgs, IMouseEventArgs, IAxisLabelRenderEventArgs, ITextRenderEventArgs } from './model/interface';import { IPointRenderEventArgs, ISeriesRenderEventArgs, IDragCompleteEventArgs, ITooltipRenderEventArgs } from './model/interface';import { IZoomCompleteEventArgs, ILoadedEventArgs, IAnimationCompleteEventArgs } from './model/interface';import { loaded, chartMouseClick, chartMouseLeave, chartMouseDown, chartMouseMove, chartMouseUp, load } from './model/constants';
+import { Component, Property, NotifyPropertyChanges, Internationalization, ModuleDeclaration } from '@syncfusion/ej2-base';import { TapEventArgs, EmitType } from '@syncfusion/ej2-base';import { remove } from '@syncfusion/ej2-base/dom';import { extend } from '@syncfusion/ej2-base/util';import { INotifyPropertyChanged, SvgRenderer, setCulture, Browser, Touch } from '@syncfusion/ej2-base';import { Event, EventHandler, Complex, Collection } from '@syncfusion/ej2-base';import { findClipRect, measureText, TextOption } from './utils/helper';import { textElement, withInBounds, RectOption, ChartLocation, stringToNumber, PointData } from './utils/helper';import { MarginModel, BorderModel, ChartAreaModel, FontModel } from './model/base-model';import { getSeriesColor, Theme } from './model/theme';import { CrosshairSettingsModel, TooltipSettingsModel, ZoomSettingsModel } from './model/base-model';import { Margin, Border, ChartArea, Font, CrosshairSettings, TooltipSettings, ZoomSettings } from './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 './utils/helper';import { SelectionMode } from './utils/enum';import { Series } from './series/chart-series';import { SeriesModel } from './series/chart-series-model';import { Data } from './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 { 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 { Legend, LegendSettings } from './legend/legend';import { LegendSettingsModel } from './legend/legend-model';import { Zoom } from './user-interaction/zooming';import { Selection, Indexes } from './user-interaction/selection';import { IndexesModel } from './user-interaction/selection-model';import { DataLabel } from './series/data-label';import { ITouches, ILegendRenderEventArgs, IMouseEventArgs, IAxisLabelRenderEventArgs, ITextRenderEventArgs } from './model/interface';import { IPointRenderEventArgs, ISeriesRenderEventArgs, IDragCompleteEventArgs, ITooltipRenderEventArgs } from './model/interface';import { IZoomCompleteEventArgs, ILoadedEventArgs, IAnimationCompleteEventArgs } from './model/interface';import { loaded, chartMouseClick, chartMouseLeave, chartMouseDown, chartMouseMove, chartMouseUp, load } from './model/constants';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

src/chart/chart.d.ts

@@ -29,2 +29,3 @@ import { Component, Internationalization, ModuleDeclaration } from '@syncfusion/ej2-base';
 import { RangeColumnSeries } from './series/range-column-series';
+import { BubbleSeries } from './series/bubble-series';
 import { Tooltip } from './user-interaction/tooltip';
@@ -98,2 +99,6 @@ import { Crosshair } from './user-interaction/crosshair';
     /**
+     * `bubbleSeries` is used to add bubble series in chart.
+     */
+    bubbleSeriesModule: BubbleSeries;
+    /**
      * `tooltipModule` is used to manipulate and add tooltip for series.
@@ -100,0 +105,0 @@ */

src/chart/chart.js

@@ -124,3 +124,2 @@ var __extends = (this && this.__extends) || (function () {
             }
-            this.trigger('loaded', { chart: this });
         };
@@ -144,2 +143,3 @@ Chart.prototype.processData = function () {
                 this.refreshBound();
+                this.trigger('loaded', { chart: this });
             }
@@ -326,3 +326,3 @@ };
             this.longPress = this.longPress.bind(this);
-            new ej2_base_2.Touch(this.element, { taphold: this.longPress, tapholdThreshold: 500 });
+            new ej2_base_2.Touch(this.element, { tapHold: this.longPress, tapHoldThreshold: 500 });
             this.setStyle(this.element);
@@ -374,2 +374,3 @@ };
                 _this.refreshBound();
+                _this.trigger('loaded', { chart: _this });
             }, 500);
@@ -871,2 +872,3 @@ return false;
                     this.renderElements();
+                    this.trigger('loaded', { chart: this });
                 }
@@ -877,2 +879,3 @@ if (refreshBounds) {
                     this.refreshBound();
+                    this.trigger('loaded', { chart: this });
                 }
@@ -879,0 +882,0 @@ }

src/chart/index.d.ts

@@ -5,2 +5,3 @@ /**
 export * from './chart';
+export * from './chart-model';
 export * from './axis/axis';
@@ -21,2 +22,3 @@ export * from './axis/date-time-axis';
 export * from './series/range-column-series';
+export * from './series/bubble-series';
 export * from './series/spline-series';
@@ -34,1 +36,3 @@ export * from './series/marker';
 export * from './model/interface';
+export * from './axis/axis-model';
+export * from './series/chart-series-model';

src/chart/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./chart", "./axis/axis", "./axis/date-time-axis", "./axis/category-axis", "./axis/logarithmic-axis", "./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/stacking-area-series", "./series/scatter-series", "./series/range-column-series", "./series/spline-series", "./series/marker", "./utils/helper", "./user-interaction/crosshair", "./user-interaction/tooltip", "./legend/legend", "./user-interaction/zooming", "./user-interaction/selection", "./series/data-label", "./series/chart-series"], 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, stacking_area_series_1, scatter_series_1, range_column_series_1, spline_series_1, marker_1, helper_1, crosshair_1, tooltip_1, legend_1, zooming_1, selection_1, data_label_1, chart_series_1) {
+define(["require", "exports", "./chart", "./axis/axis", "./axis/date-time-axis", "./axis/category-axis", "./axis/logarithmic-axis", "./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/stacking-area-series", "./series/scatter-series", "./series/range-column-series", "./series/bubble-series", "./series/spline-series", "./series/marker", "./utils/helper", "./user-interaction/crosshair", "./user-interaction/tooltip", "./legend/legend", "./user-interaction/zooming", "./user-interaction/selection", "./series/data-label", "./series/chart-series"], 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, 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, legend_1, zooming_1, selection_1, data_label_1, chart_series_1) {
     "use strict";
@@ -23,2 +23,3 @@ function __export(m) {
     __export(range_column_series_1);
+    __export(bubble_series_1);
     __export(spline_series_1);
@@ -25,0 +26,0 @@ __export(marker_1);

src/chart/legend/legend.js

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

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

@@ -128,2 +128,5 @@ import { Property, ChildProperty, Complex, SvgRenderer, DateFormatOptions } from '@syncfusion/ej2-base';import { isNullOrUndefined } from '@syncfusion/ej2-base/util';import { firstToLowerCase, ChartLocation, Rect, logBase, StackValues, RectOption, ControlPoints } from '../utils/helper';import { ChartSeriesType, ChartShape, LegendShape, LabelAlignment, LabelPosition, SeriesValueType } from '../utils/enum';import { BorderModel, FontModel, MarginModel } from '../model/base-model';import { Border, Font, Margin } from '../model/base';import { DataManager, Query } from '@syncfusion/ej2-data';import { Chart } from '../chart';import { Axis, Column, Row } from '../axis/axis';import { Data } from '../model/data';import { ISeriesRenderEventArgs } from '../model/interface';import { seriesRender } from '../model/constants';
     /**
+     * The DataSource field which contains the size value for bubble series     * @default ''     */    size?: string;
+
+    /**
      * The name of horizontal axis associated with the series. It requires `axes` of chart.     * ```html     * <div id='Chart'></div>     * ```     * ```typescript     * let chart: Chart = new Chart({     * ...     *     columns: [{ width: '50%' },     *               { width: '50%' }],     *     axes: [{     *                name: 'xAxis 1',     *                columnIndex: 1,     *            }],     *     series: [{     *                dataSource: data,     *                xName: 'x', yName: 'y',     *                xAxisName: 'xAxis 1',     *     }],     * });     * chart.appendTo('#Chart');     * ```     * @default null     */    xAxisName?: string;
@@ -173,2 +176,8 @@
 
+    /**
+     * minimum radius     */    minRadius?: number;
+
+    /**
+     * maximum radius     */    maxRadius?: number;
+
 }

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

@@ -28,2 +28,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     low: Object;
+    size: Object;
 }
@@ -233,2 +234,7 @@ /**
     /**
+     * The DataSource field which contains the size value for bubble series
+     * @default ''
+     */
+    size: string;
+    /**
      * The name of horizontal axis associated with the series. It requires `axes` of chart.
@@ -369,2 +375,10 @@ * ```html
     selectionStyle: string;
+    /**
+     * minimum radius
+     */
+    minRadius: number;
+    /**
+     * maximum radius
+     */
+    maxRadius: number;
     /** @private */
@@ -428,2 +442,4 @@ xMin: number;
     seriesType: SeriesValueType;
+    /** @private */
+    sizeMax: number;
     /**
@@ -430,0 +446,0 @@ * Process data for the series.

src/chart/series/chart-series.js

@@ -143,2 +143,3 @@ var __extends = (this && this.__extends) || (function () {
             this.yMax = -Infinity;
+            this.sizeMax = -Infinity;
             this.seriesType = (this.type === 'RangeColumn') ? 'HighLow' : 'XY';
@@ -212,2 +213,3 @@ if (this.xAxis.valueType === 'Category') {
             point.low = this.currentViewData[i][this.low];
+            point.size = this.currentViewData[i][this.size];
             point.text = this.currentViewData[i][textMappingName];
@@ -222,2 +224,5 @@ return point;
                     this.yData.push(point.yValue);
+                    if (this.type === 'Bubble') {
+                        this.sizeMax = Math.max(this.sizeMax, point.size);
+                    }
                     return util_1.isNullOrUndefined(point.x) || util_1.isNullOrUndefined(point.y);
@@ -391,2 +396,3 @@ case 'HighLow':
                 chart.refreshBound();
+                chart.trigger('loaded', { chart: chart });
             }
@@ -505,2 +511,5 @@ };
     __decorate([
+        ej2_base_1.Property('')
+    ], Series.prototype, "size", void 0);
+    __decorate([
         ej2_base_1.Property(null)
@@ -550,3 +559,9 @@ ], Series.prototype, "xAxisName", void 0);
     ], Series.prototype, "selectionStyle", void 0);
+    __decorate([
+        ej2_base_1.Property(1)
+    ], Series.prototype, "minRadius", void 0);
+    __decorate([
+        ej2_base_1.Property(3)
+    ], Series.prototype, "maxRadius", void 0);
     exports.Series = Series;
 });

src/chart/series/data-label.js

@@ -36,2 +36,3 @@ define(["require", "exports", "../utils/helper", "../utils/helper", "../model/constants"], function (require, exports, helper_1, helper_2, constants_1) {
                             _this.isDataLabelShape(argsData);
+                            _this.markerHeight = series.type === 'Bubble' ? (point.region.height / 2) : _this.markerHeight;
                             rect = _this.calculateTextPosition(point, series, textSize, dataLabel, i);
@@ -194,4 +195,7 @@ if (!helper_1.isCollide(rect, chart.dataLabelCollections)) {
             var collection = this.chart.dataLabelCollections;
-            if (series.type.indexOf('Step') > -1) {
+            if (series.type === 'Bubble') {
                 position = 'Top';
+            }
+            else if (series.type.indexOf('Step') > -1) {
+                position = 'Top';
                 if (index) {
@@ -198,0 +202,0 @@ position = (!previousPoint || !previousPoint.visible || yValue > previousPoint.yValue

src/chart/series/marker.js

@@ -40,3 +40,4 @@ define(["require", "exports", "../utils/helper", "../model/constants"], function (require, exports, helper_1, constants_1) {
         Marker.prototype.doMarkerAnimation = function (series) {
-            if (!(series.type.indexOf('Column') > -1 || series.type.indexOf('Bar') > -1 || series.type === 'Scatter')) {
+            if (!(series.type.indexOf('Column') > -1 || series.type.indexOf('Bar') > -1 || series.type === 'Scatter'
+                || series.type === 'Bubble')) {
                 var markerElements = series.symbolElement.childNodes;
@@ -43,0 +44,0 @@ var delay = series.animation.delay + series.animation.duration;

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

@@ -75,2 +75,4 @@ /**
     private checkSelectionElements(element, className, visibility);
+    private addSVGClass(element, classname);
+    private removeSVGClass(element, classname);
     /**
@@ -77,0 +79,0 @@ * Selected points series visibility checking on legend click

src/chart/user-interaction/selection.js

@@ -90,2 +90,3 @@ var __extends = (this && this.__extends) || (function () {
             elementId = (!chart.series[index.series].isRectSeries && chart.series[index.series].type !== 'Scatter' &&
+                chart.series[index.series].type !== 'Bubble' &&
                 chart.series[index.series].marker.visible) ? (elementId + '_Symbol') : elementId;
@@ -145,3 +146,4 @@ return document.getElementById(elementId);
             }
-            if (selectedElements[0] && selectedElements[0].classList.contains(this.getSelectionClass(selectedElements[0].id))) {
+            var className = selectedElements[0] && (selectedElements[0].getAttribute('class') || '');
+            if (selectedElements[0] && className.indexOf(this.getSelectionClass(selectedElements[0].id)) > -1) {
                 this.removeStyles(selectedElements);
@@ -185,11 +187,29 @@ this.addOrRemoveIndex(this.selectedDataIndexes, index);
             var children = (this.isSeriesMode ? [element] : element.childNodes);
+            var elementClassName;
+            var parentClassName;
             for (var i = 0; i < children.length; i++) {
-                if (!children[i].classList.contains(className) && !children[i].parentElement.classList.contains(className) && visibility) {
-                    children[i].classList.add(this.unselected);
+                elementClassName = children[i].getAttribute('class') || '';
+                parentClassName = children[i].parentNode.getAttribute('class') || '';
+                if (elementClassName.indexOf(className) === -1 &&
+                    parentClassName.indexOf(className) === -1 && visibility) {
+                    this.addSVGClass(children[i], this.unselected);
                 }
                 else {
-                    children[i].classList.remove(this.unselected);
+                    this.removeSVGClass(children[i], this.unselected);
                 }
             }
         };
+        Selection.prototype.addSVGClass = function (element, classname) {
+            var elementClassName = element.getAttribute('class') || '';
+            elementClassName += ((elementClassName !== '') ? ' ' : '');
+            if (elementClassName.indexOf(classname) === -1) {
+                element.setAttribute('class', elementClassName + classname);
+            }
+        };
+        Selection.prototype.removeSVGClass = function (element, classname) {
+            var elementClassName = element.getAttribute('class') || '';
+            if (elementClassName.indexOf(classname) > -1) {
+                element.setAttribute('class', elementClassName.replace(classname, ''));
+            }
+        };
         Selection.prototype.checkVibility = function (selectedIndexes, seriesCollection) {
@@ -217,5 +237,5 @@ var visible = false;
                 if (element) {
-                    element.parentElement.classList.remove(this.unselected);
-                    element.classList.remove(this.unselected);
-                    element.classList.add(this.getSelectionClass(element.id));
+                    this.removeSVGClass(element.parentNode, this.unselected);
+                    this.removeSVGClass(element, this.unselected);
+                    this.addSVGClass(element, this.getSelectionClass(element.id));
                 }
@@ -231,3 +251,3 @@ }
                 if (element) {
-                    element.classList.remove(this.getSelectionClass(element.id));
+                    this.removeSVGClass(element, this.getSelectionClass(element.id));
                 }
@@ -390,4 +410,4 @@ }
             var element = document.getElementById(this.draggedRect);
-            if (this.closeIcon) {
-                this.closeIcon.remove();
+            if (this.closeIcon && this.closeIcon.parentNode) {
+                dom_1.remove(this.closeIcon);
             }
@@ -394,0 +414,0 @@ if (element) {

src/chart/user-interaction/tooltip.js

@@ -412,4 +412,6 @@ define(["require", "exports", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base", "../utils/helper", "../utils/helper", "../model/constants"], function (require, exports, dom_1, util_1, ej2_base_1, helper_1, helper_2, constants_1) {
             var series = pointData.series;
-            var element = (series.type === 'Scatter') ? series.seriesElement : series.symbolElement;
-            if (!series.marker.visible && series.type !== 'Scatter' && pointData.point.symbolLocation) {
+            var height;
+            var width = 0;
+            var element = (series.type === 'Scatter' || series.type === 'Bubble') ? series.seriesElement : series.symbolElement;
+            if (!series.marker.visible && series.type !== 'Scatter' && series.type !== 'Bubble' && pointData.point.symbolLocation) {
                 return null;
@@ -419,5 +421,7 @@ }
             var marker = series.marker;
-            var shape = marker.shape;
+            var shape = series.type === 'Bubble' ? 'Circle' : marker.shape;
             var symbolId = this.element.id + '_Series_' + series.index + '_Point_' + point.index + '_Trackball';
-            var size = new helper_1.Size(marker.width + 5, marker.height + 5);
+            width = (series.type !== 'Bubble') ? marker.width : (point.region.width);
+            height = (series.type !== 'Bubble') ? marker.height : (point.region.height);
+            var size = new helper_1.Size(width + 5, height + 5);
             var options = new helper_2.PathOption(symbolId, marker.fill ? marker.fill : point.color, marker.border.width, marker.border.color, marker.opacity / 4, null, null);
@@ -514,3 +518,3 @@ var symbol = helper_2.drawSymbol(point.symbolLocation, shape, size, null, options, '');
                     case 'XY':
-                        return '${point.x} : ${point.y}';
+                        return (series.type === 'Bubble') ? '${point.x} : ${point.y} : ${point.size}' : '${point.x} : ${point.y}';
                     case 'HighLow':
@@ -517,0 +521,0 @@ return '${point.x} : ${point.high} : ${point.low}';

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

@@ -12,6 +12,6 @@ import { Chart } from '../chart';
     private elementId;
-    private zoomInElements;
-    private zoomOutElements;
-    private zoomElements;
-    private panElements;
+    private zoomInElement;
+    private zoomOutElement;
+    private zoomElement;
+    private panElement;
     /** @private */
@@ -18,0 +18,0 @@ constructor(chart: Chart);

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

@@ -18,3 +18,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom", "../utils/helper", "../utils/helper"], function (require, exports, ej2_base_1, dom_1, helper_1, helper_2) {
             childElement.setAttribute('aria-label', 'Pan');
-            this.panElements = childElement;
+            this.panElement = childElement;
             childElement.appendChild(render.drawRectangle(new helper_1.RectOption(this.elementId + '_Zooming_Pan_1', 'transparent', {}, 1, new helper_1.Rect(0, 0, 16, 16))));
@@ -33,3 +33,3 @@ childElement.appendChild(render.drawPath(new helper_1.PathOption(this.elementId + '_Zooming_Pan_2', fillColor, null, null, 1, null, direction)));
             childElement.setAttribute('aria-label', 'Zoom');
-            this.zoomElements = childElement;
+            this.zoomElement = childElement;
             childElement.appendChild(render.drawRectangle(new helper_1.RectOption(this.elementId + '_Zooming_Zoom_1', 'transparent', {}, 1, new helper_1.Rect(0, 0, 16, 16))));
@@ -52,3 +52,3 @@ childElement.appendChild(render.drawPath(new helper_1.PathOption(this.elementId + '_Zooming_Zoom_3', fillColor, null, null, 1, null, direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z')));
             childElement.appendChild(render.drawPolygon(new helper_1.PolygonOption(this.elementId + '_Zooming_ZoomIn_3', polygonDirection + ' 9.749,6.466 9.749,8.466 10.749,8.466 10.749,6.466 12.749,6.466', fillColor)));
-            this.zoomInElements = childElement;
+            this.zoomInElement = childElement;
             this.elementOpacity = chart.zoomModule.isPanning ? '0.2' : '1';
@@ -69,3 +69,3 @@ childElement.setAttribute('opacity', this.elementOpacity);
             childElement.appendChild(render.drawPath(new helper_1.PathOption(this.elementId + '_Zooming_ZoomOut_2', fillColor, null, null, 1, null, direction + '4.133s-1.866,4.133-4.133,4.133S5.911,8.222,5.911,5.911z M12.567,6.466h-5v-1h5V6.466z')));
-            this.zoomOutElements = childElement;
+            this.zoomOutElement = childElement;
             this.elementOpacity = chart.zoomModule.isPanning ? '0.2' : '1';
@@ -146,6 +146,6 @@ childElement.setAttribute('opacity', this.elementOpacity);
             this.chart.svgObject.setAttribute('cursor', 'auto');
-            this.zoomInElements.setAttribute('opacity', this.elementOpacity);
-            this.zoomOutElements.setAttribute('opacity', this.elementOpacity);
-            this.applySelection(this.zoomElements.childNodes, this.selectionColor);
-            this.applySelection(this.panElements.childNodes, '#737373');
+            this.zoomInElement.setAttribute('opacity', this.elementOpacity);
+            this.zoomOutElement.setAttribute('opacity', this.elementOpacity);
+            this.applySelection(this.zoomElement.childNodes, this.selectionColor);
+            this.applySelection(this.panElement.childNodes, '#737373');
             return false;
@@ -158,6 +158,6 @@ };
             this.elementOpacity = '0.2';
-            this.zoomInElements.setAttribute('opacity', this.elementOpacity);
-            this.zoomOutElements.setAttribute('opacity', this.elementOpacity);
-            this.applySelection(this.panElements.childNodes, this.selectionColor);
-            this.applySelection(this.zoomElements.childNodes, '#737373');
+            this.zoomInElement.setAttribute('opacity', this.elementOpacity);
+            this.zoomOutElement.setAttribute('opacity', this.elementOpacity);
+            this.applySelection(this.panElement.childNodes, this.selectionColor);
+            this.applySelection(this.zoomElement.childNodes, '#737373');
             return false;
@@ -164,0 +164,0 @@ };

src/chart/utils/enum.d.ts

@@ -50,3 +50,3 @@ /**
  */
-export declare type ChartSeriesType = 'Line' | 'Column' | 'Area' | 'Bar' | 'StackingColumn' | 'StackingArea' | 'StackingBar' | 'StepLine' | 'Scatter' | 'Spline' | 'StackingColumn100' | 'StackingBar100' | 'StackingArea100' | 'RangeColumn';
+export declare type ChartSeriesType = 'Line' | 'Column' | 'Area' | 'Bar' | 'StackingColumn' | 'StackingArea' | 'StackingBar' | 'StepLine' | 'Scatter' | 'Spline' | 'StackingColumn100' | 'StackingBar100' | 'StackingArea100' | 'RangeColumn' | 'Bubble';
 /**
@@ -53,0 +53,0 @@ * Defines the Edge Label Placement for an axis. They are

src/chart/utils/helper.js

@@ -288,3 +288,3 @@ var __extends = (this && this.__extends) || (function () {
                 element.removeAttribute('transform');
-                if ((series.type === 'Scatter') && !isLabel && (pointIndex === series.points.length - 1)) {
+                if ((series.type === 'Scatter' || series.type === 'Bubble') && !isLabel && (pointIndex === series.points.length - 1)) {
                     series.chart.trigger('animationComplete', { series: series });
@@ -316,2 +316,3 @@ }
             case 'Circle':
+            case 'Bubble':
                 functionName = 'Ellipse';
@@ -318,0 +319,0 @@ util_1.merge(options, { 'rx': width / 2, 'ry': height / 2, 'cx': locX, 'cy': locY });

New alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4736471

increased by1.3%

Number of package files

138

increased by2.22%

Lines of code

60127

increased by1.27%

Number of lines in readme file

23

increased by53.33%

Dependency changes

• Updated@syncfusion/ej2-base@^1.0.11

• Updated@syncfusion/ej2-data@^1.0.11