@progress/kendo-charts 2.7.2-dev.202502101310 → 2.7.2-develop.1

package/dist/es/chart/box-plot-chart/box-plot-chart.js

@@ -8,29 +8,16 @@ import areNumbers from '../utils/are-numbers';
 import { MIN_VALUE, MAX_VALUE } from '../../common/constants';
 import { defined } from '../../common';
 
-var BoxPlotChart = (function (CandlestickChart) {
-    function BoxPlotChart () {
-        CandlestickChart.apply(this, arguments);
-    }
-
-    if ( CandlestickChart ) BoxPlotChart.__proto__ = CandlestickChart;
-    BoxPlotChart.prototype = Object.create( CandlestickChart && CandlestickChart.prototype );
-    BoxPlotChart.prototype.constructor = BoxPlotChart;
-
-    BoxPlotChart.prototype.addValue = function addValue (data, fields) {
-        var categoryIx = fields.categoryIx;
-        var category = fields.category;
-        var series = fields.series;
-        var seriesIx = fields.seriesIx;
-        var ref = this;
-        var children = ref.children;
-        var options = ref.options;
-        var value = data.valueFields;
-        var valueParts = this.splitValue(value);
-        var hasValue = areNumbers(valueParts);
-        var dataItem = series.data[categoryIx];
-        var categoryPoints = this.categoryPoints[categoryIx];
-        var point;
+class BoxPlotChart extends CandlestickChart {
+    addValue(data, fields) {
+        const { categoryIx, category, series, seriesIx } = fields;
+        const { children, options } = this;
+        const value = data.valueFields;
+        const valueParts = this.splitValue(value);
+        const hasValue = areNumbers(valueParts);
+        const dataItem = series.data[categoryIx];
+        let categoryPoints = this.categoryPoints[categoryIx];
+        let point;
 
         if (!categoryPoints) {
             this.categoryPoints[categoryIx] = categoryPoints = [];
@@ -40,7 +27,7 @@ var BoxPlotChart = (function (CandlestickChart) {
             point = this.createPoint(data, fields);
         }
 
-        var cluster = children[categoryIx];
+        let cluster = children[categoryIx];
         if (!cluster) {
             cluster = new ClusterLayout({
                 vertical: options.invertAxes,
@@ -66,67 +53,65 @@ var BoxPlotChart = (function (CandlestickChart) {
 
         this.points.push(point);
         categoryPoints.push(point);
-    };
+    }
 
-    BoxPlotChart.prototype.pointType = function pointType () {
+    pointType() {
         if (this.options.invertAxes) {
             return VerticalBoxPlot;
         }
 
         return BoxPlot;
-    };
+    }
 
-    BoxPlotChart.prototype.splitValue = function splitValue (value) {
+    splitValue(value) {
         return [
             value.lower, value.q1, value.median,
             value.q3, value.upper
         ];
-    };
+    }
 
-    BoxPlotChart.prototype.updateRange = function updateRange (value, fields) {
-        var axisName = fields.series.axis;
-        var parts = this.splitValue(value).concat(this.filterOutliers(value.outliers));
+    updateRange(value, fields) {
+        const axisName = fields.series.axis;
+        let parts = this.splitValue(value).concat(this.filterOutliers(value.outliers));
 
         if (defined(value.mean)) {
             parts = parts.concat(value.mean);
         }
 
-        var axisRange = this.valueAxisRanges[axisName] || { min: MAX_VALUE, max: MIN_VALUE };
+        let axisRange = this.valueAxisRanges[axisName] || { min: MAX_VALUE, max: MIN_VALUE };
 
         this.valueAxisRanges[axisName] = {
             min: Math.min.apply(Math, parts.concat([ axisRange.min ])),
             max: Math.max.apply(Math, parts.concat([ axisRange.max ]))
         };
-    };
+    }
 
-    BoxPlotChart.prototype.formatPointValue = function formatPointValue (point, format) {
-        var value = point.value;
+    formatPointValue(point, format) {
+        const value = point.value;
 
         return this.chartService.format.auto(format,
             value.lower, value.q1, value.median,
             value.q3, value.upper, value.mean, point.category
         );
-    };
+    }
 
-    BoxPlotChart.prototype.filterOutliers = function filterOutliers (items) {
-        var length = (items || []).length;
-        var result = [];
+    filterOutliers(items) {
+        const length = (items || []).length;
+        const result = [];
 
-        for (var i = 0; i < length; i++) {
-            var item = items[i];
+        for (let i = 0; i < length; i++) {
+            const item = items[i];
             if (defined(item) && item !== null) {
                 result.push(item);
             }
         }
 
         return result;
-    };
+    }
 
-    BoxPlotChart.prototype.supportsPointInactiveOpacity = function supportsPointInactiveOpacity () {
+    supportsPointInactiveOpacity() {
         return false;
-    };
-
-    return BoxPlotChart;
-}(CandlestickChart));
+    }
+}
 
 export default BoxPlotChart;

package/dist/es/chart/box-plot-chart/box-plot.js

@@ -9,24 +9,17 @@ import { LINE_MARKER_SIZE, BORDER_BRIGHTNESS } from '../constants';
 import { CROSS, CIRCLE, WHITE } from '../../common/constants';
 import { deepExtend, defined, setDefaultOptions } from '../../common';
 
-var BoxPlot = (function (Candlestick) {
-    function BoxPlot(value, options) {
-        Candlestick.call(this, value, options);
+class BoxPlot extends Candlestick {
+    constructor(value, options) {
+        super(value, options);
 
         this.createNote();
     }
 
-    if ( Candlestick ) BoxPlot.__proto__ = Candlestick;
-    BoxPlot.prototype = Object.create( Candlestick && Candlestick.prototype );
-    BoxPlot.prototype.constructor = BoxPlot;
-
-    BoxPlot.prototype.reflow = function reflow (box) {
-        var ref = this;
-        var options = ref.options;
-        var value = ref.value;
-        var chart = ref.owner;
-        var valueAxis = chart.seriesValueAxis(options);
-        var whiskerSlot, boxSlot;
+    reflow(box) {
+        const { options, value, owner: chart } = this;
+        const valueAxis = chart.seriesValueAxis(options);
+        let whiskerSlot, boxSlot;
 
         this.boxSlot = boxSlot = valueAxis.getSlot(value.q1, value.q3);
         this.realBody = boxSlot;
@@ -35,10 +28,10 @@ var BoxPlot = (function (Candlestick) {
         this.whiskerSlot = whiskerSlot = valueAxis.getSlot(value.lower, value.upper);
         this.reflowWhiskerSlot(box);
 
-        var medianSlot = valueAxis.getSlot(value.median);
+        const medianSlot = valueAxis.getSlot(value.median);
 
         if (value.mean) {
-            var meanSlot = valueAxis.getSlot(value.mean);
+            const meanSlot = valueAxis.getSlot(value.mean);
             this.meanPoints = this.calcMeanPoints(box, meanSlot);
         }
 
@@ -47,26 +40,26 @@ var BoxPlot = (function (Candlestick) {
 
         this.box = whiskerSlot.clone().wrap(boxSlot);
         this.reflowNote();
-    };
+    }
 
-    BoxPlot.prototype.reflowBoxSlot = function reflowBoxSlot (box) {
+    reflowBoxSlot(box) {
         this.boxSlot.x1 = box.x1;
         this.boxSlot.x2 = box.x2;
-    };
+    }
 
-    BoxPlot.prototype.reflowWhiskerSlot = function reflowWhiskerSlot (box) {
+    reflowWhiskerSlot(box) {
         this.whiskerSlot.x1 = box.x1;
         this.whiskerSlot.x2 = box.x2;
-    };
+    }
 
-    BoxPlot.prototype.calcMeanPoints = function calcMeanPoints (box, meanSlot) {
+    calcMeanPoints(box, meanSlot) {
         return [
             [ [ box.x1, meanSlot.y1 ], [ box.x2, meanSlot.y1 ] ]
         ];
-    };
+    }
 
-    BoxPlot.prototype.calcWhiskerPoints = function calcWhiskerPoints (boxSlot, whiskerSlot) {
-        var mid = whiskerSlot.center().x;
+    calcWhiskerPoints(boxSlot, whiskerSlot) {
+        const mid = whiskerSlot.center().x;
         return [ [
             [ mid - 5, whiskerSlot.y1 ], [ mid + 5, whiskerSlot.y1 ],
             [ mid, whiskerSlot.y1 ], [ mid, boxSlot.y1 ]
@@ -74,42 +67,40 @@ var BoxPlot = (function (Candlestick) {
             [ mid - 5, whiskerSlot.y2 ], [ mid + 5, whiskerSlot.y2 ],
             [ mid, whiskerSlot.y2 ], [ mid, boxSlot.y2 ]
         ] ];
-    };
+    }
 
-    BoxPlot.prototype.calcMedianPoints = function calcMedianPoints (box, medianSlot) {
+    calcMedianPoints(box, medianSlot) {
         return [
             [ [ box.x1, medianSlot.y1 ], [ box.x2, medianSlot.y1 ] ]
         ];
-    };
-
-    BoxPlot.prototype.renderOutliers = function renderOutliers (options) {
-        var this$1 = this;
+    }
 
-        var value = this.value;
-        var outliers = value.outliers || [];
-        var outerFence = Math.abs(value.q3 - value.q1) * 3;
-        var elements = [];
-        var markers = options.markers || {};
+    renderOutliers(options) {
+        const value = this.value;
+        const outliers = value.outliers || [];
+        const outerFence = Math.abs(value.q3 - value.q1) * 3;
+        const elements = [];
+        let markers = options.markers || {};
 
-        for (var i = 0; i < outliers.length; i++) {
-            var outlierValue = outliers[i];
+        for (let i = 0; i < outliers.length; i++) {
+            const outlierValue = outliers[i];
             if (outlierValue < value.q3 + outerFence && outlierValue > value.q1 - outerFence) {
                 markers = options.outliers;
             } else {
                 markers = options.extremes;
             }
-            var markersBorder = deepExtend({}, markers.border);
+            let markersBorder = deepExtend({}, markers.border);
 
             if (!defined(markersBorder.color)) {
-                if (defined(this$1.color)) {
-                    markersBorder.color = this$1.color;
+                if (defined(this.color)) {
+                    markersBorder.color = this.color;
                 } else {
                     markersBorder.color =
                         new Color(markers.background).brightness(BORDER_BRIGHTNESS).toHex();
                 }
             }
 
-            var shape = new ShapeElement({
+            const shape = new ShapeElement({
                 type: markers.type,
                 width: markers.size,
                 height: markers.size,
@@ -126,50 +117,48 @@ var BoxPlot = (function (Candlestick) {
 
         this.reflowOutliers(elements);
         return elements;
-    };
-
-    BoxPlot.prototype.reflowOutliers = function reflowOutliers (outliers) {
-        var this$1 = this;
+    }
 
-        var valueAxis = this.owner.seriesValueAxis(this.options);
-        var center = this.box.center();
+    reflowOutliers(outliers) {
+        const valueAxis = this.owner.seriesValueAxis(this.options);
+        const center = this.box.center();
 
-        for (var i = 0; i < outliers.length; i++) {
-            var outlierValue = outliers[i].value;
-            var markerBox = valueAxis.getSlot(outlierValue);
+        for (let i = 0; i < outliers.length; i++) {
+            const outlierValue = outliers[i].value;
+            const markerBox = valueAxis.getSlot(outlierValue);
 
-            if (this$1.options.vertical) {
+            if (this.options.vertical) {
                 markerBox.move(center.x);
             } else {
                 markerBox.move(undefined, center.y);
             }
 
-            this$1.box = this$1.box.wrap(markerBox);
+            this.box = this.box.wrap(markerBox);
             outliers[i].reflow(markerBox);
         }
-    };
+    }
 
-    BoxPlot.prototype.mainVisual = function mainVisual (options) {
-        var group = Candlestick.prototype.mainVisual.call(this, options);
-        var outliers = this.renderOutliers(options);
+    mainVisual(options) {
+        const group = super.mainVisual(options);
+        const outliers = this.renderOutliers(options);
 
-        for (var i = 0; i < outliers.length; i++) {
-            var element = outliers[i].getElement();
+        for (let i = 0; i < outliers.length; i++) {
+            const element = outliers[i].getElement();
             if (element) {
                 group.append(element);
             }
         }
 
         return group;
-    };
+    }
 
-    BoxPlot.prototype.createLines = function createLines (container, options) {
+    createLines(container, options) {
         this.drawLines(container, options, this.whiskerPoints, options.whiskers);
         this.drawLines(container, options, this.medianPoints, options.median);
         this.drawLines(container, options, this.meanPoints, options.mean);
-    };
+    }
 
-    BoxPlot.prototype.getBorderColor = function getBorderColor () {
+    getBorderColor() {
         if ((this.options.border || {}).color) {
             return this.options.border.color;
         }
@@ -178,11 +167,9 @@ var BoxPlot = (function (Candlestick) {
             return this.color;
         }
 
-        return Candlestick.prototype.getBorderColor.call(this);
-    };
-
-    return BoxPlot;
-}(Candlestick));
+        return super.getBorderColor();
+    }
+}
 
 setDefaultOptions(BoxPlot, {
     border: {

package/dist/es/chart/box-plot-chart/vertical-box-plot.js

@@ -1,32 +1,24 @@
 import BoxPlot from './box-plot';
 
-var VerticalBoxPlot = (function (BoxPlot) {
-    function VerticalBoxPlot () {
-        BoxPlot.apply(this, arguments);
-    }
-
-    if ( BoxPlot ) VerticalBoxPlot.__proto__ = BoxPlot;
-    VerticalBoxPlot.prototype = Object.create( BoxPlot && BoxPlot.prototype );
-    VerticalBoxPlot.prototype.constructor = VerticalBoxPlot;
-
-    VerticalBoxPlot.prototype.reflowBoxSlot = function reflowBoxSlot (box) {
+class VerticalBoxPlot extends BoxPlot {
+    reflowBoxSlot(box) {
         this.boxSlot.y1 = box.y1;
         this.boxSlot.y2 = box.y2;
-    };
+    }
 
-    VerticalBoxPlot.prototype.reflowWhiskerSlot = function reflowWhiskerSlot (box) {
+    reflowWhiskerSlot(box) {
         this.whiskerSlot.y1 = box.y1;
         this.whiskerSlot.y2 = box.y2;
-    };
+    }
 
-    VerticalBoxPlot.prototype.calcMeanPoints = function calcMeanPoints (box, meanSlot) {
+    calcMeanPoints(box, meanSlot) {
         return [
             [ [ meanSlot.x1, box.y1 ], [ meanSlot.x1, box.y2 ] ]
         ];
-    };
+    }
 
-    VerticalBoxPlot.prototype.calcWhiskerPoints = function calcWhiskerPoints (boxSlot, whiskerSlot) {
-        var mid = whiskerSlot.center().y;
+    calcWhiskerPoints(boxSlot, whiskerSlot) {
+        const mid = whiskerSlot.center().y;
         return [ [
             [ whiskerSlot.x1, mid - 5 ], [ whiskerSlot.x1, mid + 5 ],
             [ whiskerSlot.x1, mid ], [ boxSlot.x1, mid ]
@@ -34,15 +26,13 @@ var VerticalBoxPlot = (function (BoxPlot) {
             [ whiskerSlot.x2, mid - 5 ], [ whiskerSlot.x2, mid + 5 ],
             [ whiskerSlot.x2, mid ], [ boxSlot.x2, mid ]
         ] ];
-    };
+    }
 
-    VerticalBoxPlot.prototype.calcMedianPoints = function calcMedianPoints (box, medianSlot) {
+    calcMedianPoints(box, medianSlot) {
         return [
             [ [ medianSlot.x1, box.y1 ], [ medianSlot.x1, box.y2 ] ]
         ];
-    };
-
-    return VerticalBoxPlot;
-}(BoxPlot));
+    }
+}
 
 export default VerticalBoxPlot;

package/dist/es/chart/bubble-chart/bubble-chart.js

@@ -6,57 +6,49 @@ import { INITIAL_ANIMATION_DURATION, BUBBLE } from '../constants';
 import { MIN_VALUE, CIRCLE } from '../../common/constants';
 import { deepExtend, isFunction, setDefaultOptions, valueOrDefault } from '../../common';
 
-var BubbleChart = (function (ScatterChart) {
-    function BubbleChart () {
-        ScatterChart.apply(this, arguments);
-    }
-
-    if ( ScatterChart ) BubbleChart.__proto__ = ScatterChart;
-    BubbleChart.prototype = Object.create( ScatterChart && ScatterChart.prototype );
-    BubbleChart.prototype.constructor = BubbleChart;
-
-    BubbleChart.prototype._initFields = function _initFields () {
+class BubbleChart extends ScatterChart {
+    _initFields() {
         this._maxSize = MIN_VALUE;
-        ScatterChart.prototype._initFields.call(this);
-    };
+        super._initFields();
+    }
 
-    BubbleChart.prototype.addValue = function addValue (value, fields) {
+    addValue(value, fields) {
         if (value.size !== null && (value.size > 0 || (value.size < 0 && fields.series.negativeValues.visible))) {
             this._maxSize = Math.max(this._maxSize, Math.abs(value.size));
-            ScatterChart.prototype.addValue.call(this, value, fields);
+            super.addValue(value, fields);
         } else {
             this.points.push(null);
             this.seriesPoints[fields.seriesIx].push(null);
         }
-    };
+    }
 
-    BubbleChart.prototype.reflow = function reflow (box) {
+    reflow(box) {
         this.updateBubblesSize(box);
-        ScatterChart.prototype.reflow.call(this, box);
-    };
+        super.reflow(box);
+    }
 
-    BubbleChart.prototype.pointType = function pointType () {
+    pointType() {
         return Bubble;
-    };
+    }
 
-    BubbleChart.prototype.createPoint = function createPoint (value, fields) {
-        var series = fields.series;
-        var pointsCount = series.data.length;
-        var delay = fields.pointIx * (INITIAL_ANIMATION_DURATION / pointsCount);
-        var animationOptions = {
+    createPoint(value, fields) {
+        const series = fields.series;
+        const pointsCount = series.data.length;
+        const delay = fields.pointIx * (INITIAL_ANIMATION_DURATION / pointsCount);
+        const animationOptions = {
             delay: delay,
             duration: INITIAL_ANIMATION_DURATION - delay,
             type: BUBBLE
         };
 
-        var color = fields.color || series.color;
+        let color = fields.color || series.color;
         if (value.size < 0 && series.negativeValues.visible) {
             color = valueOrDefault(
                 series.negativeValues.color, color
             );
         }
 
-        var pointOptions = deepExtend({
+        let pointOptions = deepExtend({
             labels: {
                 animation: {
                     delay: delay,
@@ -79,40 +71,37 @@ var BubbleChart = (function (ScatterChart) {
 
         pointOptions.markers.background = color;
 
-        var point = new Bubble(value, pointOptions);
+        const point = new Bubble(value, pointOptions);
         point.color = color;
 
         this.append(point);
 
         return point;
-    };
-
-    BubbleChart.prototype.updateBubblesSize = function updateBubblesSize (box) {
-        var this$1 = this;
-
-        var ref = this;
-        var series = ref.options.series;
-        var boxSize = Math.min(box.width(), box.height());
-
-        for (var seriesIx = 0; seriesIx < series.length; seriesIx++) {
-            var currentSeries = series[seriesIx];
-            var seriesPoints = this$1.seriesPoints[seriesIx];
-            var minSize = currentSeries.minSize || Math.max(boxSize * 0.02, 10);
-            var maxSize = currentSeries.maxSize || boxSize * 0.2;
-            var minR = minSize / 2;
-            var maxR = maxSize / 2;
-            var minArea = Math.PI * minR * minR;
-            var maxArea = Math.PI * maxR * maxR;
-            var areaRange = maxArea - minArea;
-            var areaRatio = areaRange / this$1._maxSize;
-
-            for (var pointIx = 0; pointIx < seriesPoints.length; pointIx++) {
-                var point = seriesPoints[pointIx];
+    }
+
+    updateBubblesSize(box) {
+        const { options: { series } } = this;
+        const boxSize = Math.min(box.width(), box.height());
+
+        for (let seriesIx = 0; seriesIx < series.length; seriesIx++) {
+            const currentSeries = series[seriesIx];
+            const seriesPoints = this.seriesPoints[seriesIx];
+            const minSize = currentSeries.minSize || Math.max(boxSize * 0.02, 10);
+            const maxSize = currentSeries.maxSize || boxSize * 0.2;
+            const minR = minSize / 2;
+            const maxR = maxSize / 2;
+            const minArea = Math.PI * minR * minR;
+            const maxArea = Math.PI * maxR * maxR;
+            const areaRange = maxArea - minArea;
+            const areaRatio = areaRange / this._maxSize;
+
+            for (let pointIx = 0; pointIx < seriesPoints.length; pointIx++) {
+                const point = seriesPoints[pointIx];
                 if (point) {
-                    var area = Math.abs(point.value.size) * areaRatio;
-                    var radius = Math.sqrt((minArea + area) / Math.PI);
-                    var baseZIndex = valueOrDefault(point.options.zIndex, 0);
-                    var zIndex = baseZIndex + (1 - radius / maxR);
+                    const area = Math.abs(point.value.size) * areaRatio;
+                    const radius = Math.sqrt((minArea + area) / Math.PI);
+                    const baseZIndex = valueOrDefault(point.options.zIndex, 0);
+                    const zIndex = baseZIndex + (1 - radius / maxR);
 
                     deepExtend(point.options, {
                         zIndex: zIndex,
@@ -127,18 +116,16 @@ var BubbleChart = (function (ScatterChart) {
                 }
             }
         }
-    };
+    }
 
-    BubbleChart.prototype.formatPointValue = function formatPointValue (point, format) {
-        var value = point.value;
+    formatPointValue(point, format) {
+        const value = point.value;
         return this.chartService.format.auto(format, value.x, value.y, value.size, point.category);
-    };
-
-    BubbleChart.prototype.createAnimation = function createAnimation () {};
-    BubbleChart.prototype.createVisual = function createVisual () {};
+    }
 
-    return BubbleChart;
-}(ScatterChart));
+    createAnimation() {}
+    createVisual() {}
+}
 
 setDefaultOptions(BubbleChart, {
     tooltip: {

package/dist/es/chart/bubble-chart/bubble.js

@@ -7,25 +7,21 @@ import { CENTER } from '../../common/constants';
 import { deepExtend } from '../../common';
 import { createPatternFill } from '../../core/pattern';
 
-var Bubble = (function (LinePoint) {
-    function Bubble(value, options) {
-        LinePoint.call(this, value, options);
+class Bubble extends LinePoint {
+    constructor(value, options) {
+        super(value, options);
 
         this.category = value.category;
     }
 
-    if ( LinePoint ) Bubble.__proto__ = LinePoint;
-    Bubble.prototype = Object.create( LinePoint && LinePoint.prototype );
-    Bubble.prototype.constructor = Bubble;
-
-    Bubble.prototype.createHighlight = function createHighlight () {
-        var highlight = this.options.highlight;
-        var border = highlight.border;
-        var markers = this.options.markers;
-        var center = this.box.center();
-        var radius = (markers.size + markers.border.width + border.width) / 2;
-        var highlightGroup = new draw.Group();
-        var shadow = new draw.Circle(new geom.Circle([ center.x, center.y + radius / 5 + border.width / 2 ], radius + border.width / 2), {
+    createHighlight() {
+        const highlight = this.options.highlight;
+        const border = highlight.border;
+        const markers = this.options.markers;
+        const center = this.box.center();
+        const radius = (markers.size + markers.border.width + border.width) / 2;
+        const highlightGroup = new draw.Group();
+        const shadow = new draw.Circle(new geom.Circle([ center.x, center.y + radius / 5 + border.width / 2 ], radius + border.width / 2), {
             stroke: {
                 color: 'none'
             },
@@ -43,7 +39,7 @@ var Bubble = (function (LinePoint) {
                 } ]
             })
         });
-        var overlay = new draw.Circle(new geom.Circle([ center.x, center.y ], radius), {
+        const overlay = new draw.Circle(new geom.Circle([ center.x, center.y ], radius), {
             stroke: {
                 color: border.color ||
                     new Color(markers.background).brightness(BORDER_BRIGHTNESS).toHex(),
@@ -59,20 +55,18 @@ var Bubble = (function (LinePoint) {
         highlightGroup.append(shadow, overlay);
 
         return highlightGroup;
-    };
+    }
 
-    Bubble.prototype.createFocusHighlight = function createFocusHighlight (style) {
-        var highlightOptions = this.options.focusHighlight;
-        var markers = this.options.markers;
-        var center = this.box.center();
-        var radius = (markers.size + markers.border.width) / 2 + highlightOptions.border.width / 2;
-        var highlight = new draw.Circle(new geom.Circle([ center.x, center.y ], radius), style);
+    createFocusHighlight(style) {
+        const highlightOptions = this.options.focusHighlight;
+        const markers = this.options.markers;
+        const center = this.box.center();
+        const radius = (markers.size + markers.border.width) / 2 + highlightOptions.border.width / 2;
+        const highlight = new draw.Circle(new geom.Circle([ center.x, center.y ], radius), style);
 
         return highlight;
-    };
-
-    return Bubble;
-}(LinePoint));
+    }
+}
 
 Bubble.prototype.defaults = deepExtend({}, Bubble.prototype.defaults, {
     labels: {