scichart 2.0.0-alpha.1930 → 2.0.0-alpha.1991

package/Charting/ChartModifiers/CursorModifier.d.ts

@@ -162,8 +162,10 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
      */
     hitTestRenderableSeries(rs: IRenderableSeries, mousePoint: Point): HitTestInfo;
     toJSON(): {
-        type: string;
-        options: IChartModifierBaseOptions;
+        type: string; /**
+         * Gets or sets the legend Y offset
+         */
+        options: Required<Pick<IChartModifierBaseOptions, "id" | "xAxisId" | "yAxisId" | "executeOn" | "xyDirection" | "modifierGroup">>;
     };
     protected notifyPropertyChanged(propertyName: string): void;
     private getSeriesInfos;

package/Charting/ChartModifiers/CursorModifier.js

@@ -468,7 +468,7 @@ var defaultTooltipTemplate = function (seriesInfos, svgAnnotation) {
     });
     var tooltipFill = svgAnnotation.containerBackground;
     var tooltipStroke = svgAnnotation.textStroke;
-    return "<svg width=\"" + width + "\" height=\"" + height + "\">\n        <defs>\n            <filter id=\"" + id + "\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n                <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"3\" dy=\"3\" />\n                <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"3\" />\n                <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n            </filter>\n        </defs>\n        <rect rx=\"4\" ry=\"4\" width=\"95%\" height=\"90%\" fill=\"" + tooltipFill + "\" filter=\"url(#" + id + ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"" + tooltipStroke + "\">" + valuesBlock + "</text>\n        </svg>\n    </svg>";
+    return "<svg class=\"scichart__cursor-tooltip\" width=\"" + width + "\" height=\"" + height + "\">\n        <defs>\n            <filter id=\"" + id + "\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n                <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"3\" dy=\"3\" />\n                <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"3\" />\n                <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n            </filter>\n        </defs>\n        <rect rx=\"4\" ry=\"4\" width=\"95%\" height=\"90%\" fill=\"" + tooltipFill + "\" filter=\"url(#" + id + ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"" + tooltipStroke + "\">" + valuesBlock + "</text>\n        </svg>\n    </svg>";
 };
 /** @ignore */
 var calcTooltipWidth = function (textLength, fontSize) {

package/Charting/ChartModifiers/DataPointSelectionModifier.d.ts

@@ -106,6 +106,7 @@ export declare class DataPointSelectionModifier extends ChartModifierBase2D impl
     private isClicked;
     private includedSeriesMap;
     private selectedDataPointsMap;
+    private selectionHasChanged;
     /**
      * Creates an instances of DataPointSelectionModifier
      * @param options Optional parameters of type {@link IDataPointSelectionModifierOptions} used to configure the modifier
@@ -198,7 +199,7 @@ export declare class DataPointSelectionModifier extends ChartModifierBase2D impl
     getSelectionMode(modifierKeys: TModifierKeys, isAreaSelection: boolean): ESelectionMode;
     toJSON(): {
         type: string;
-        options: IChartModifierBaseOptions;
+        options: Required<Pick<IChartModifierBaseOptions, "id" | "xAxisId" | "yAxisId" | "executeOn" | "xyDirection" | "modifierGroup">>;
     };
     /**
      * Selects all points inside the {@link Rect}, according to the {@link ESelectionMode} passed in
@@ -224,4 +225,5 @@ export declare class DataPointSelectionModifier extends ChartModifierBase2D impl
     private removeSelectedDataPoint;
     private clearSelectedDataPoints;
     private removeSelectedDataPointsForSeries;
+    private raiseSelectionChanged;
 }

package/Charting/ChartModifiers/DataPointSelectionModifier.js

@@ -22,6 +22,7 @@ var ChartModifierType_1 = require("../../types/ChartModifierType");
 var pointUtil_1 = require("../../utils/pointUtil");
 var translate_1 = require("../../utils/translate");
 var IDataSeries_1 = require("../Model/IDataSeries");
+var IPointMetadata_1 = require("../Model/IPointMetadata");
 var BaseHitTestProvider_1 = require("../Visuals/RenderableSeries/HitTest/BaseHitTestProvider");
 var RubberBandSvgRect_1 = require("../Visuals/RubberBandSvgRect/RubberBandSvgRect");
 var ChartModifierBase2D_1 = require("./ChartModifierBase2D");
@@ -54,7 +55,7 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link IDataPointSelectionModifierOptions} used to configure the modifier
      */
     function DataPointSelectionModifier(options) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         var _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.DataPointSelection;
         /**
@@ -64,30 +65,35 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
         _this.selectionChanged = new EventHandler_1.EventHandler();
         _this.includedSeriesMap = new Map();
         _this.selectedDataPointsMap = new Map();
+        _this.selectionHasChanged = false;
         _this.allowClickSelect = (_a = options === null || options === void 0 ? void 0 : options.allowClickSelect) !== null && _a !== void 0 ? _a : true;
         _this.allowDragSelect = (_b = options === null || options === void 0 ? void 0 : options.allowDragSelect) !== null && _b !== void 0 ? _b : true;
-        _this.selectionStrokeProperty = (_c = options === null || options === void 0 ? void 0 : options.selectionStroke) !== null && _c !== void 0 ? _c : "#FFFFFF";
-        _this.selectionFillProperty = (_d = options === null || options === void 0 ? void 0 : options.selectionFill) !== null && _d !== void 0 ? _d : "#FFFFFF";
-        _this.selectionStrokeThicknessProperty = (_e = options === null || options === void 0 ? void 0 : options.selectionStrokeThickness) !== null && _e !== void 0 ? _e : 1;
+        if (options === null || options === void 0 ? void 0 : options.selectionStroke) {
+            _this.selectionStroke = options.selectionStroke;
+        }
+        if (options === null || options === void 0 ? void 0 : options.selectionFill) {
+            _this.selectionFill = options === null || options === void 0 ? void 0 : options.selectionFill;
+        }
+        _this.selectionStrokeThicknessProperty = (_c = options === null || options === void 0 ? void 0 : options.selectionStrokeThickness) !== null && _c !== void 0 ? _c : 1;
         if (options === null || options === void 0 ? void 0 : options.onSelectionChanged) {
             if (typeof options.onSelectionChanged === "string") {
                 _this.typeMap.set("onSelectionChanged", options.onSelectionChanged);
-                //@ts-ignore
+                // @ts-ignore
                 _this.selectionChanged.subscribe(classFactory_1.getFunction(BaseType_1.EBaseType.OptionFunction, options.onSelectionChanged));
             }
             else {
-                //@ts-ignore
+                // @ts-ignore
                 _this.selectionChanged.subscribe(options.onSelectionChanged);
             }
         }
         if (options === null || options === void 0 ? void 0 : options.getSelectionMode) {
             if (typeof options.getSelectionMode === "string") {
                 _this.typeMap.set("getSelectionMode", options.getSelectionMode);
-                //@ts-ignore
+                // @ts-ignore
                 _this.getSelectionMode = classFactory_1.getFunction(BaseType_1.EBaseType.OptionFunction, options.getSelectionMode);
             }
             else {
-                //@ts-ignore
+                // @ts-ignore
                 _this.getSelectionMode = options.getSelectionMode;
             }
         }
@@ -97,10 +103,10 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
      * @inheritDoc
      */
     DataPointSelectionModifier.prototype.applyTheme = function (themeProvider) {
-        if (!this.testPropertyChanged(constants_1.PROPERTY.FILL)) {
+        if (!this.testPropertyChanged(constants_1.PROPERTY.SELECTION_FILL)) {
             this.selectionFill = themeProvider.rubberBandFillBrush;
         }
-        if (!this.testPropertyChanged(constants_1.PROPERTY.STROKE)) {
+        if (!this.testPropertyChanged(constants_1.PROPERTY.SELECTION_STROKE)) {
             this.selectionStroke = themeProvider.rubberBandStrokeBrush;
         }
     };
@@ -149,6 +155,10 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
         }
         // Build selected points list from attached series
         var baseDataSeries = rs.dataSeries;
+        // Add metadata to series
+        if (!baseDataSeries.hasMetadataGenerator()) {
+            baseDataSeries.setMetadataGenerator(new IPointMetadata_1.TemplateMetadataGenerator({ isSelected: false }));
+        }
         for (var i = 0; i < baseDataSeries.getMetadataLength(); i++) {
             var metadata = baseDataSeries.getMetadataAt(i);
             if (metadata === null || metadata === void 0 ? void 0 : metadata.isSelected) {
@@ -156,7 +166,7 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
                 this.addSelectedDataPoint(rs, i, dataPoint);
             }
         }
-        this.selectionChanged.raiseEvent(new DataPointSelectionChangedArgs_1.DataPointSelectionChangedArgs(this, this.selectedDataPoints));
+        this.raiseSelectionChanged(false);
     };
     /**
      * @inheritDoc
@@ -168,7 +178,7 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
         }
         // Remove selected points from selected points list
         this.removeSelectedDataPointsForSeries(rs);
-        this.selectionChanged.raiseEvent(new DataPointSelectionChangedArgs_1.DataPointSelectionChangedArgs(this, this.selectedDataPoints));
+        this.raiseSelectionChanged(false);
     };
     /**
      * @inheritDoc
@@ -367,7 +377,6 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
      */
     DataPointSelectionModifier.prototype.selectManyPoints = function (rect, selectionMode) {
         var _this = this;
-        var _a;
         if (this.parentSurface) {
             var multiSelect = selectionMode !== ESelectionMode.Replace;
             if (!multiSelect) {
@@ -409,14 +418,25 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
                         var y = baseDataSeries.getNativeYValues().get(i);
                         if (pointUtil_1.testIsInBounds(x, y, leftXData, topYData, rightXData, bottomYData)) {
                             var metadata = baseDataSeries.getMetadataAt(i);
-                            metadata.isSelected = true;
-                            _this.addSelectedDataPoint(rs, i, new DataPointInfo_1.DataPointInfo(rs, metadata, i));
+                            if (selectionMode !== ESelectionMode.Inverse) {
+                                metadata.isSelected = true;
+                                _this.addSelectedDataPoint(rs, i, new DataPointInfo_1.DataPointInfo(rs, metadata, i));
+                            }
+                            else {
+                                if (metadata.isSelected) {
+                                    metadata.isSelected = false;
+                                    _this.removeSelectedDataPoint(rs, i);
+                                }
+                                else {
+                                    metadata.isSelected = true;
+                                    _this.addSelectedDataPoint(rs, i, new DataPointInfo_1.DataPointInfo(rs, metadata, i));
+                                }
+                            }
                         }
                     }
                 }
             });
-            this.selectionChanged.raiseEvent(new DataPointSelectionChangedArgs_1.DataPointSelectionChangedArgs(this, this.selectedDataPoints));
-            (_a = this.parentSurface) === null || _a === void 0 ? void 0 : _a.invalidateElement();
+            this.raiseSelectionChanged(true);
         }
     };
     /**
@@ -427,14 +447,13 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
      */
     DataPointSelectionModifier.prototype.selectSinglePoint = function (point, selectionMode) {
         var _this = this;
-        var _a;
         if (this.parentSurface) {
             // Perform hit-test at the x-y point
             var hitTestResults = this.getIncludedRenderableSeries()
                 .filter(function (rs) { return rs.isVisible && rs.dataSeries; }) // todo && included series
                 .map(function (rs) { return ({
                 renderableSeries: rs,
-                hitTestInfo: rs.hitTestProvider.hitTestDataPoint(point.x, point.y, BaseHitTestProvider_1.BaseHitTestProvider.DEFAULT_HIT_TEST_RADIUS)
+                hitTestInfo: rs.hitTestProvider.hitTestForDataPointSelectionModifier(point.x, point.y, BaseHitTestProvider_1.BaseHitTestProvider.DEFAULT_HIT_TEST_RADIUS)
             }); });
             var multiSelect = selectionMode !== ESelectionMode.Replace;
             if (!multiSelect) {
@@ -443,9 +462,12 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
             hitTestResults.forEach(function (htResult) {
                 var ht = htResult.hitTestInfo;
                 var rs = htResult.renderableSeries;
-                // TODO: Is this correct? If no metadata just return? Do we require
-                // TODO user to set metadata on every point before we can select?
-                if (!ht.metadata || !ht.isHit) {
+                if (!ht.isHit) {
+                    return;
+                }
+                // Metadata can't be auto-created if the renderableSeries is added to the surface without a dataSeries
+                if (!ht.metadata) {
+                    console.warn("Cannot select datapoint for series " + ht.dataSeriesName + " as it does not have metadata. To solve this either:\nConfigure metadata when you create the series or when you add data eg renderableSeries.dataSeries = new XyDataSeries(wasmContext, { metadata: { isSelected: false }}), or:\nAdd the DataPointSelectionModifier after all series have had their dataSeries set.");
                     return;
                 }
                 if (selectionMode === ESelectionMode.Union) {
@@ -465,8 +487,7 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
                     }
                 }
             });
-            this.selectionChanged.raiseEvent(new DataPointSelectionChangedArgs_1.DataPointSelectionChangedArgs(this, this.selectedDataPoints));
-            (_a = this.parentSurface) === null || _a === void 0 ? void 0 : _a.invalidateElement();
+            this.raiseSelectionChanged(true);
         }
     };
     /**
@@ -475,7 +496,6 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
      * @protected
      */
     DataPointSelectionModifier.prototype.deselectAllPoints = function (invalidate) {
-        var _a;
         if (invalidate === void 0) { invalidate = true; }
         // Deselect all datapoints
         this.selectedDataPoints.forEach(function (dp) {
@@ -485,17 +505,21 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
         });
         this.clearSelectedDataPoints();
         if (invalidate) {
-            this.selectionChanged.raiseEvent(new DataPointSelectionChangedArgs_1.DataPointSelectionChangedArgs(this, this.selectedDataPoints));
-            (_a = this.parentSurface) === null || _a === void 0 ? void 0 : _a.invalidateElement();
+            this.raiseSelectionChanged(true);
         }
     };
     DataPointSelectionModifier.prototype.addSelectedDataPoint = function (rs, index, value) {
         this.selectedDataPointsMap.set(getKey(rs, index), value);
+        this.selectionHasChanged = true;
     };
     DataPointSelectionModifier.prototype.removeSelectedDataPoint = function (rs, index) {
         this.selectedDataPointsMap.delete(getKey(rs, index));
+        this.selectionHasChanged = true;
     };
     DataPointSelectionModifier.prototype.clearSelectedDataPoints = function () {
+        if (this.selectedDataPointsMap.size > 0) {
+            this.selectionHasChanged = true;
+        }
         this.selectedDataPointsMap.clear();
     };
     DataPointSelectionModifier.prototype.removeSelectedDataPointsForSeries = function (rs) {
@@ -503,9 +527,20 @@ var DataPointSelectionModifier = /** @class */ (function (_super) {
         this.selectedDataPointsMap.forEach(function (dp, key) {
             if (dp.renderableSeries === rs) {
                 _this.selectedDataPointsMap.delete(key);
+                _this.selectionHasChanged = true;
             }
         });
     };
+    DataPointSelectionModifier.prototype.raiseSelectionChanged = function (invalidate) {
+        var _a;
+        if (this.selectionHasChanged) {
+            this.selectionChanged.raiseEvent(new DataPointSelectionChangedArgs_1.DataPointSelectionChangedArgs(this, this.selectedDataPoints));
+            this.selectionHasChanged = false;
+            if (invalidate) {
+                (_a = this.parentSurface) === null || _a === void 0 ? void 0 : _a.invalidateElement();
+            }
+        }
+    };
     return DataPointSelectionModifier;
 }(ChartModifierBase2D_1.ChartModifierBase2D));
 exports.DataPointSelectionModifier = DataPointSelectionModifier;

package/Charting/ChartModifiers/LegendModifier.d.ts

@@ -33,6 +33,10 @@ export interface ILegendModifierOptions extends IChartModifierBaseOptions {
      * Sets the margin for the legend control
      */
     margin?: number;
+    /**
+     * The parent div element Id, the Legend will be appended to this element
+     */
+    placementDivId?: string;
 }
 /**
  * The LegendModifier provides interactive legend behavior on a 2D {@link SciChartSurface}
@@ -93,7 +97,7 @@ export declare class LegendModifier extends ChartModifierBase2D implements IIncl
     getIncludedRenderableSeries(): IRenderableSeries[];
     toJSON(): {
         type: string;
-        options: IChartModifierBaseOptions;
+        options: Required<Pick<IChartModifierBaseOptions, "id" | "xAxisId" | "yAxisId" | "executeOn" | "xyDirection" | "modifierGroup">>;
     };
     /**
      * Test if the series is included or excluded, by default it is included

package/Charting/ChartModifiers/LegendModifier.js

@@ -37,7 +37,7 @@ var LegendModifier = /** @class */ (function (_super) {
      * @param options Optional parameters {@link ILegendModifierOptions} used to configure the modifier
      */
     function LegendModifier(options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         var _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Legend;
         _this.includedSeriesMap = new Map();
@@ -48,6 +48,7 @@ var LegendModifier = /** @class */ (function (_super) {
         _this.sciChartLegend.showSeriesMarkers = (_d = options === null || options === void 0 ? void 0 : options.showSeriesMarkers) !== null && _d !== void 0 ? _d : _this.sciChartLegend.showSeriesMarkers;
         _this.sciChartLegend.placement = (_e = options === null || options === void 0 ? void 0 : options.placement) !== null && _e !== void 0 ? _e : _this.sciChartLegend.placement;
         _this.sciChartLegend.margin = (_f = options === null || options === void 0 ? void 0 : options.margin) !== null && _f !== void 0 ? _f : _this.sciChartLegend.margin;
+        _this.sciChartLegend.placementDivId = (_g = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _g !== void 0 ? _g : _this.sciChartLegend.placementDivId;
         return _this;
     }
     /**

package/Charting/ChartModifiers/MouseWheelZoomModifier.d.ts

@@ -78,7 +78,7 @@ export declare class MouseWheelZoomModifier extends ChartModifierBase2D {
     performPan(wheelDelta: number): void;
     toJSON(): {
         type: string;
-        options: IChartModifierBaseOptions;
+        options: Required<Pick<IChartModifierBaseOptions, "id" | "xAxisId" | "yAxisId" | "executeOn" | "xyDirection" | "modifierGroup">>;
     };
     /**
      * Gets the axis size for scroll calculations

package/Charting/ChartModifiers/PinchZoomModifier.d.ts

@@ -75,7 +75,7 @@ export declare class PinchZoomModifier extends ChartModifierBase2D {
     modifierPointerCancel(args: ModifierMouseArgs): void;
     toJSON(): {
         type: string;
-        options: IChartModifierBaseOptions;
+        options: Required<Pick<IChartModifierBaseOptions, "id" | "xAxisId" | "yAxisId" | "executeOn" | "xyDirection" | "modifierGroup">>;
     };
     /**
      * Performs the zoom operation around the mouse point

package/Charting/ChartModifiers/RolloverModifier.d.ts

@@ -128,7 +128,7 @@ export declare class RolloverModifier extends ChartModifierBase2D implements IIn
     hitTestRenderableSeries(rs: IRenderableSeries, mousePoint: Point): HitTestInfo;
     toJSON(): {
         type: string;
-        options: IChartModifierBaseOptions;
+        options: Required<Pick<IChartModifierBaseOptions, "id" | "xAxisId" | "yAxisId" | "executeOn" | "xyDirection" | "modifierGroup">>;
     };
     protected notifyPropertyChanged(propertyName: string): void;
     private isVerticalChart;

package/Charting/ChartModifiers/RolloverModifier.js

@@ -36,6 +36,7 @@ var RolloverLegendSvgAnnotation_1 = require("../Visuals/Annotations/RolloverLege
 var RolloverMarkerSvgAnnotation_1 = require("../Visuals/Annotations/RolloverMarkerSvgAnnotation");
 var RolloverTooltipSvgAnnotation_1 = require("../Visuals/Annotations/RolloverTooltipSvgAnnotation");
 var SciChartSurfaceBase_1 = require("../Visuals/SciChartSurfaceBase");
+var DpiHelper_1 = require("../Visuals/TextureManager/DpiHelper");
 var ChartModifierBase2D_1 = require("./ChartModifierBase2D");
 var constants_1 = require("./constants");
 /**
@@ -439,16 +440,16 @@ var RolloverModifier = /** @class */ (function (_super) {
             var x = translate_1.translateToNotScaled(translatedMousePoint.x);
             var y = translate_1.translateToNotScaled(translatedMousePoint.y);
             if (this.isVerticalChart()) {
-                this.rolloverLineAnnotation.y1 = y;
-                this.rolloverLineAnnotation.y2 = y;
-                this.rolloverLineAnnotation.x1 = 0;
-                this.rolloverLineAnnotation.x2 = translate_1.translateToNotScaled(this.parentSurface.seriesViewRect.right);
+                this.rolloverLineAnnotation.x1 = y;
+                this.rolloverLineAnnotation.x2 = y;
+                this.rolloverLineAnnotation.y1 = 0;
+                this.rolloverLineAnnotation.y2 = translate_1.translateToNotScaled(this.parentSurface.seriesViewRect.right);
             }
             else {
-                this.rolloverLineAnnotation.y1 = 0;
-                this.rolloverLineAnnotation.y2 = translate_1.translateToNotScaled(this.parentSurface.seriesViewRect.bottom);
                 this.rolloverLineAnnotation.x1 = x;
                 this.rolloverLineAnnotation.x2 = x;
+                this.rolloverLineAnnotation.y1 = 0;
+                this.rolloverLineAnnotation.y2 = translate_1.translateToNotScaled(this.parentSurface.seriesViewRect.bottom);
             }
         }
     };
@@ -473,17 +474,10 @@ var RolloverModifier = /** @class */ (function (_super) {
         if (this.mousePosition !== EMousePosition.SeriesArea) {
             return;
         }
-        var tooltipPositions = calcTooltipPositions(this.mousePoint, rsList, this.parentSurface.seriesViewRect, TOOLTIP_PADDING_TOP, this.hitTestRenderableSeries, this.allowTooltipOverlapping);
+        var tooltipPositions = calcTooltipPositions(this.mousePoint, rsList, this.parentSurface.seriesViewRect, TOOLTIP_PADDING_TOP * DpiHelper_1.DpiHelper.PIXEL_RATIO, this.hitTestRenderableSeries, this.allowTooltipOverlapping, DpiHelper_1.DpiHelper.PIXEL_RATIO);
         tooltipPositions.forEach(function (el) {
             var rs = rsList[el.index];
-            // const isOutOfDataRange =
-            //     !el.hitTestPointValues || rs.checkIsOutOfDataRange(el.hitTestPointValues.x, el.hitTestPointValues.y);
-            // if mouse value is out of [xMin, xMax] hide tooltips
-            // for StackedColumnSeries because of the specific we always show the tooltips
-            // const showTooltip =
-            //     this.showTooltip && (rs.type === ESeriesType.StackedColumnSeries ? true : !isOutOfDataRange);
             var showTooltip = _this.showTooltip && el.seriesInfo.isHit;
-            // const showMarker = rs.type === ESeriesType.StackedColumnSeries ? true : !isOutOfDataRange;
             var showMarker = el.seriesInfo.isHit;
             if (el.isY1) {
                 updateRolloverModifierProps(rs.rolloverModifierProps1, rs, el, showTooltip, showMarker);
@@ -518,15 +512,17 @@ var RolloverModifier = /** @class */ (function (_super) {
 exports.RolloverModifier = RolloverModifier;
 // TODO: write tests
 /** @ignore */
-var calcTooltipPositions = function (mousePoint, rsList, seriesViewRect, paddingTop, hitTestRenderableSeries, allowTooltipOverlapping) {
+var calcTooltipPositions = function (mousePoint, rsList, seriesViewRect, paddingTop, hitTestRenderableSeries, allowTooltipOverlapping, pixelRatio) {
     var res = [];
     rsList.forEach(function (rs, index) {
         var hitTestInfo = hitTestRenderableSeries(rs, mousePoint);
         if (hitTestInfo) {
             var seriesInfo = rs.getSeriesInfo(hitTestInfo);
             var width = rs.rolloverModifierProps.tooltip.width;
+            var scaledWidth = width * pixelRatio;
             var height = rs.rolloverModifierProps.tooltip.height;
-            var xDeltaCoord = seriesViewRect.width - hitTestInfo.xCoord < width ? -width : 5;
+            var scaledHeight = height * pixelRatio;
+            var xDeltaCoord = seriesViewRect.width - hitTestInfo.xCoord < scaledWidth ? -width : 5;
             var newRecord = {
                 index: index,
                 xValue: hitTestInfo.xValue,
@@ -535,10 +531,10 @@ var calcTooltipPositions = function (mousePoint, rsList, seriesViewRect, padding
                 yCoord: hitTestInfo.yCoord,
                 hitTestPointValues: hitTestInfo.hitTestPointValues,
                 isCategoryAxis: hitTestInfo.isCategoryAxis,
-                xDeltaCoord: xDeltaCoord,
-                yDeltaCoord: -height / 2,
+                xCoordShift: xDeltaCoord,
+                yCoordShift: -height / 2,
                 isY1: false,
-                height: height,
+                height: scaledHeight,
                 seriesInfo: seriesInfo
             };
             if (rs.type !== SeriesType_1.ESeriesType.StackedColumnSeries || hitTestInfo.isHit) {
@@ -546,54 +542,44 @@ var calcTooltipPositions = function (mousePoint, rsList, seriesViewRect, padding
             }
             if (rs.type === SeriesType_1.ESeriesType.BandSeries) {
                 var width1 = rs.rolloverModifierProps1.tooltip.width;
+                var scaledWidth1 = width1 * pixelRatio;
                 var height1 = rs.rolloverModifierProps1.tooltip.height;
+                var scaledHeight1 = height1 * pixelRatio;
                 var seriesInfo1 = rs.getSeriesInfo(hitTestInfo);
                 seriesInfo1.isFirstSeries = false;
-                res.push(__assign(__assign({}, newRecord), { isY1: true, yValue: hitTestInfo.y1Value, yCoord: hitTestInfo.y1Coord, xDeltaCoord: seriesViewRect.width - hitTestInfo.xCoord < width1 ? -width1 : 5, yDeltaCoord: -height1 / 2, height: height1, seriesInfo: seriesInfo1 }));
+                res.push(__assign(__assign({}, newRecord), { isY1: true, yValue: hitTestInfo.y1Value, yCoord: hitTestInfo.y1Coord, xCoordShift: seriesViewRect.width - hitTestInfo.xCoord < scaledWidth1 ? -width1 : 5, yCoordShift: -height1 / 2, height: scaledHeight1, seriesInfo: seriesInfo1 }));
             }
         }
     });
     var orderedRes = res.sort(function (a, b) { return (a.yCoord > b.yCoord ? 1 : b.yCoord > a.yCoord ? -1 : 0); });
     var length = res.length;
     if (!allowTooltipOverlapping && length >= 2) {
-        var deltaYCoord = res[length - 1].yCoord - res[0].yCoord;
-        var centerY = res[0].yCoord + deltaYCoord / 2;
-        var hasOverlap = false;
-        for (var i = 0; i < length - 1; i++) {
-            var orderedRes0 = orderedRes[i];
-            var orderedResRS0 = rsList[orderedRes0.index];
-            var orderedRes1 = orderedRes[i + 1];
-            var orderedResRS1 = rsList[orderedRes1.index];
-            var minDist = paddingTop +
-                orderedResRS0.rolloverModifierProps.tooltip.height / 2 +
-                orderedResRS1.rolloverModifierProps.tooltip.height / 2;
-            if (orderedRes[i + 1].yCoord - orderedRes[i].yCoord < minDist) {
-                hasOverlap = true;
-                break;
-            }
-        }
-        if (hasOverlap) {
-            var totalHeight = orderedRes.reduce(function (prev, cur) {
-                var res2 = prev + cur.height;
-                if (prev !== 0) {
-                    res2 += paddingTop;
+        var checkHasOverlap = function () {
+            for (var i = 0; i < length - 1; i++) {
+                var orderedRes0 = orderedRes[i];
+                var orderedResRS0 = rsList[orderedRes0.index];
+                var orderedRes1 = orderedRes[i + 1];
+                var orderedResRS1 = rsList[orderedRes1.index];
+                var scaledHeightTooltip0 = orderedResRS0.rolloverModifierProps.tooltip.height * pixelRatio;
+                var scaledHeightTooltip1 = orderedResRS1.rolloverModifierProps.tooltip.height * pixelRatio;
+                var minDist = paddingTop + scaledHeightTooltip0 / 2 + scaledHeightTooltip1 / 2;
+                if (orderedRes1.yCoord - orderedRes0.yCoord < minDist) {
+                    return true;
                 }
-                return res2;
-            }, 0);
+            }
+            return false;
+        };
+        if (checkHasOverlap()) {
+            var totalHeight = orderedRes.reduce(function (prev, cur) { return (prev !== 0 ? prev + paddingTop + cur.height : prev + cur.height); }, 0);
+            var deltaYCoord = res[length - 1].yCoord - res[0].yCoord;
+            var centerY = res[0].yCoord + deltaYCoord / 2;
             var initialY_1 = centerY - totalHeight / 2;
-            var prevEl_1;
-            var prevSum_1 = 0;
-            orderedRes.forEach(function (el, index) {
-                if (index === 0) {
-                    prevSum_1 = initialY_1;
-                    el.yDeltaCoord = prevSum_1 - el.yCoord;
-                }
-                else {
-                    prevSum_1 += prevEl_1.height + paddingTop;
-                    el.yDeltaCoord = prevSum_1 - el.yCoord;
-                }
-                prevEl_1 = el;
-            });
+            orderedRes.reduce(function (prevSum, cur, index, arr) {
+                var sum = index === 0 ? initialY_1 : prevSum + arr[index - 1].height + paddingTop;
+                // need to get not scaled value
+                cur.yCoordShift = (sum - cur.yCoord) / pixelRatio;
+                return sum;
+            }, 0);
         }
     }
     return orderedRes;
@@ -654,7 +640,7 @@ var updateRolloverModifierProps = function (rolloverRSProps, rs, tooltipProps, s
         rolloverRSProps.tooltip.isHidden = false;
         rolloverRSProps.tooltip.x1 = tooltipProps.xValue;
         rolloverRSProps.tooltip.y1 = tooltipProps.yValue;
-        rolloverRSProps.tooltip.xCoordShift = tooltipProps.xDeltaCoord;
-        rolloverRSProps.tooltip.yCoordShift = tooltipProps.yDeltaCoord;
+        rolloverRSProps.tooltip.xCoordShift = tooltipProps.xCoordShift;
+        rolloverRSProps.tooltip.yCoordShift = tooltipProps.yCoordShift;
     }
 };