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

package/Charting/Visuals/Axis/AxisRenderer.js

@@ -361,7 +361,7 @@ var AxisRenderer = /** @class */ (function () {
         return this.textureManager.createAxisMarkerTexture(axisAlignment, text, fontStyle, fontWeight, fontSize, fontFamily, color, 2 * DpiHelper_1.DpiHelper.PIXEL_RATIO, backgroundColor, opacity);
     };
     AxisRenderer.prototype.createAxisMarkerFromImage = function (image, imageWidth, imageHeight) {
-        return this.textureManager.createAxisMarkerTextureFromImage(image, imageWidth, imageHeight);
+        return this.textureManager.createTextureFromImage(image, imageWidth, imageHeight);
     };
     AxisRenderer.prototype.createAnnotationLabelTexture = function (text, textStyle, backgroundColor, displayVertically, displayMirrored, opacity) {
         return this.textureManager.createSimpleTextTexture(text, __assign(__assign({}, textStyle), { padding: new Thickness_1.Thickness(2, 2, 2, 2) }), backgroundColor, displayVertically, displayMirrored, opacity);

package/Charting/Visuals/Axis/IAxisCoreOptions.d.ts

@@ -71,11 +71,24 @@ export interface IAxisCoreOptions {
      * The number of ticks on the axis will never exceed this number, but may be smaller than this number when zooming or panning.
      */
     maxAutoTicks?: number;
+    /**
+     * When {@link AxisCore.autoTicks} is true, minorsPerMajor is a hint of how many minor
+     * gridlines should be drawn between each major gridline
+     */
+    minorsPerMajor?: number;
     /**
      * When true, the {@link AxisCore.majorDelta} and {@link AxisCore.minorDelta} values will be computed automatically.
      * Else, the user may specify these values by setting the properties.
      */
     autoTicks?: boolean;
+    /**
+     * The MajorDelta is the spacing between major gridlines and axis labels. Available when {@link AxisCore.autoTicks} is false
+     */
+    majorDelta?: number;
+    /**
+     * The MinorDelta is the spacing between major gridlines and axis labels. Available when {@link AxisCore.autoTicks} is false
+     */
+    minorDelta?: number;
     /**
      * When true, draw labels on the chart, else labels are hidden
      * @remarks Default value when undefined is true

package/Charting/Visuals/Axis/LabelProvider/LabelProvider.d.ts

@@ -84,7 +84,7 @@ export declare abstract class LabelProvider {
     applyFormat(value: string): string;
     toJSON(): {
         type: string;
-        options: ILabelOptions;
+        options: Required<Pick<ILabelOptions, "labelFormat" | "labelPrecision" | "cursorLabelFormat" | "cursorLabelPrecision" | "labelPrefix" | "labelPostfix">>;
     };
     protected invalidateParent(): void;
 }

package/Charting/Visuals/Axis/LabelProvider/LabelProviderBase2D.d.ts

@@ -1,6 +1,6 @@
 import { IDeletable } from "../../../../Core/IDeletable";
 import { TSRTexture } from "../../../../types/TSciChart";
-import { TextureManager } from "../../TextureManager/TextureManager";
+import { TextureManager, TTextureObject } from "../../TextureManager/TextureManager";
 import { TTextStyle } from "../AxisCore";
 import { LabelProvider } from "./LabelProvider";
 export declare type TLabelInfo = {
@@ -28,8 +28,9 @@ export declare abstract class LabelProviderBase2D extends LabelProvider implemen
     getLabelWidth(ctx: CanvasRenderingContext2D, labelText: string, labelStyle?: TTextStyle): number;
     getMaxLabelHeightForHorizontalAxis(majorTickLabels: string[], ctx: CanvasRenderingContext2D, labelStyle: TTextStyle): number;
     getMaxLabelWidthForVerticalAxis(majorTickLabels: string[], ctx: CanvasRenderingContext2D, labelStyle: TTextStyle): number;
-    getLabelTexture(labelText: string, textureManager: TextureManager, labelStyle: TTextStyle, width?: number, height?: number): import("../../TextureManager/TextureManager").TTextureObject;
+    getLabelTexture(labelText: string, textureManager: TextureManager, labelStyle: TTextStyle, width?: number, height?: number): TTextureObject;
     delete(): void;
     checkTextStyleEqual(style1: TTextStyle, style2: TTextStyle): boolean;
+    protected invalidateParent(): void;
     protected pruneCache(maxSize: number): void;
 }

package/Charting/Visuals/Axis/LabelProvider/LabelProviderBase2D.js

@@ -157,6 +157,19 @@ var LabelProviderBase2D = /** @class */ (function (_super) {
             style1.fontWeight === style2.fontWeight &&
             style1.padding.equals(style2.padding));
     };
+    LabelProviderBase2D.prototype.invalidateParent = function () {
+        if (this.useCache) {
+            // Clear cache if property changed
+            var labels = Array.from(this.labelCacheByText.values());
+            for (var index = 0; index < this.labelCacheByText.size; index++) {
+                var element = labels[index];
+                element.bitmapTexture = Deleter_1.deleteSafe(element.bitmapTexture);
+                this.labelCacheByText.delete(element.text);
+            }
+            this.tickToText.clear();
+        }
+        _super.prototype.invalidateParent.call(this);
+    };
     LabelProviderBase2D.prototype.pruneCache = function (maxSize) {
         if (this.labelCacheByText.size > maxSize) {
             // remove more than we need so we do this less.

package/Charting/Visuals/Axis/LabelProvider/TextLabelProvider.d.ts

@@ -32,6 +32,6 @@ export declare class TextLabelProvider extends LabelProviderBase2D {
     wrapText(text: string): string[];
     toJSON(): {
         type: string;
-        options: import("./LabelProvider").ILabelOptions;
+        options: Required<Pick<import("./LabelProvider").ILabelOptions, "labelFormat" | "labelPrecision" | "cursorLabelFormat" | "cursorLabelPrecision" | "labelPrefix" | "labelPostfix">>;
     };
 }

package/Charting/Visuals/Axis/LogarithmicAxis.d.ts

@@ -1,8 +1,11 @@
+import { TEasing } from "../../../Core/Animations/EasingFunctions";
+import { AnimationToken } from "../../../Core/AnimationToken";
 import { Dictionary } from "../../../Core/Dictionary";
 import { NumberRange } from "../../../Core/NumberRange";
 import { EAxisType } from "../../../types/AxisType";
 import { TSciChart } from "../../../types/TSciChart";
 import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
+import { ELogarithmicMajorTickMode, ELogarithmicMinorTickMode } from "../../Numerics/TickProviders/LogarithmicTickProvider";
 import { TickProvider } from "../../Numerics/TickProviders/TickProvider";
 import { AxisBase2D } from "./AxisBase2D";
 import { DeltaCalculator } from "./DeltaCalculator/DeltaCalculator";
@@ -17,6 +20,20 @@ export interface ILogarithmicAxisOptions extends INumericAxisOptions {
      * False if this axis only shows positive values, true if it only shows negative.  A log axis cannot show both
      */
     isNegative?: boolean;
+    /**
+     * The mode for Major ticks using {@link ELogarithmicMajorTickMode}
+     * Equally spaced (default, best for large ranges) or
+     * Round numbers (better for small ranges)
+     */
+    majorTickMode?: ELogarithmicMajorTickMode;
+    /**
+     * The mode for minor ticks using {@link ELogarithmicMinorTickMode},
+     * Linear (default, best for smaller ranges),
+     * Logarithmic (better for very large ranges) or
+     * Auto (switches from linear to Logarithmic when the visible range is such that
+     *  the first linear minor tick would be more than 70% of the major tick)
+     */
+    minorTickMode?: ELogarithmicMinorTickMode;
 }
 /**
  * Creates an instance of a {@link LogarithmicAxis}
@@ -40,14 +57,50 @@ export declare class LogarithmicAxis extends AxisBase2D {
     get isNegative(): boolean;
     set isNegative(isNegative: boolean);
     getDefaultNonZeroRange(): NumberRange;
+    hasValidVisibleRange(): boolean;
     get tickProvider(): TickProvider;
     set tickProvider(tickProvider: TickProvider);
     get deltaCalculator(): DeltaCalculator;
     set deltaCalculator(deltaCalculator: DeltaCalculator);
     get labelProvider(): LabelProviderBase2D;
     set labelProvider(labelProvider: LabelProviderBase2D);
+    /**
+     * Gets or sets the mode for Major ticks using {@link ELogarithmicMajorTickMode}
+     * Equally spaced (best for large ranges) or
+     * Round numbers (better for small ranges)
+     */
+    get majorTickMode(): ELogarithmicMajorTickMode;
+    /**
+     * Gets or sets the mode for Major ticks using {@link ELogarithmicMajorTickMode}
+     * Equally spaced (best for large ranges) or
+     * Round numbers (better for small ranges)
+     */
+    set majorTickMode(mode: ELogarithmicMajorTickMode);
+    /**
+     * Gets or sets the mode for minor ticks using {@link ELogarithmicMinorTickMode},
+     * Linear (default, best for smaller ranges),
+     * Logarithmic (better for very large ranges) or
+     * Auto (switches from linear to Logarithmic when the visible range is such that
+     *  the first linear minor tick would be more than 70% of the major tick)
+     */
+    get minorTickMode(): ELogarithmicMinorTickMode;
+    /**
+     * Gets or sets the mode for minor ticks using {@link ELogarithmicMinorTickMode},
+     * Linear (default, best for smaller ranges),
+     * Logarithmic (better for very large ranges) or
+     * Auto (switches from linear to Logarithmic when the visible range is such that
+     *  the first linear minor tick would be more than 70% of the major tick)
+     */
+    set minorTickMode(mode: ELogarithmicMinorTickMode);
     getWindowedYRange(xRanges: Dictionary<NumberRange>): NumberRange;
+    /**
+     * @inheritdoc
+     */
+    animateVisibleRange(visibleRange: NumberRange, durationMs: number, easingFunction?: TEasing, onCompleted?: () => void): AnimationToken;
+    scale(initialRange: NumberRange, delta: number, isMoreThanHalf: boolean): void;
     toJSON(): import("../../../Builder/buildAxis").TAxisDefinition;
     protected getCurrentCoordinateCalculatorInternal(): CoordinateCalculatorBase;
+    private get logTickProvider();
     private updateLogarithmicBase;
+    private interpolateLog;
 }

package/Charting/Visuals/Axis/LogarithmicAxis.js

@@ -14,6 +14,8 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LogarithmicAxis = void 0;
+var Animator_1 = require("../../../Core/Animations/Animator");
+var EasingFunctions_1 = require("../../../Core/Animations/EasingFunctions");
 var NumberRange_1 = require("../../../Core/NumberRange");
 var AxisType_1 = require("../../../types/AxisType");
 var XyDirection_1 = require("../../../types/XyDirection");
@@ -35,11 +37,14 @@ var LogarithmicAxis = /** @class */ (function (_super) {
         var _a, _b;
         var _this = _super.call(this, wasmContext, options) || this;
         _this.type = AxisType_1.EAxisType.LogarithmicAxis;
+        _this.interpolateLog = _this.interpolateLog.bind(_this);
         _this.tickProvider = new LogarithmicTickProvider_1.LogarithmicTickProvider(wasmContext);
         _this.deltaCalculator = new LogarithmicDeltaCalculator_1.LogarithmicDeltaCalculator(wasmContext);
         _this.labelProvider = new LogarithmicLabelProvider_1.LogarithmicLabelProvider(options);
         _this.logBase = (_a = options === null || options === void 0 ? void 0 : options.logBase) !== null && _a !== void 0 ? _a : 10;
         _this.isNegativeProperty = (_b = options === null || options === void 0 ? void 0 : options.isNegative) !== null && _b !== void 0 ? _b : false;
+        _this.majorTickMode = (options === null || options === void 0 ? void 0 : options.majorTickMode) || _this.majorTickMode;
+        _this.minorTickMode = (options === null || options === void 0 ? void 0 : options.minorTickMode) || _this.minorTickMode;
         // Log axis can be positive or negative, but not both.
         if (_this.isNegativeProperty) {
             _this.visibleRangeLimit = new NumberRange_1.NumberRange(-Infinity, -0.0000000001);
@@ -88,6 +93,9 @@ var LogarithmicAxis = /** @class */ (function (_super) {
         var adj = this.isNegativeProperty ? -1 : 1;
         return new NumberRange_1.NumberRange(adj * Math.pow(this.logBase, -1), adj * Math.pow(this.logBase, 2));
     };
+    LogarithmicAxis.prototype.hasValidVisibleRange = function () {
+        return _super.prototype.hasValidVisibleRange.call(this) && this.visibleRange.min * this.visibleRange.max > 0;
+    };
     Object.defineProperty(LogarithmicAxis.prototype, "tickProvider", {
         get: function () {
             return this.tickProviderProperty;
@@ -124,7 +132,50 @@ var LogarithmicAxis = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    // TODO here: add tests for when delta/tick calculator or logbase is changed, the log base is propagated
+    Object.defineProperty(LogarithmicAxis.prototype, "majorTickMode", {
+        /**
+         * Gets or sets the mode for Major ticks using {@link ELogarithmicMajorTickMode}
+         * Equally spaced (best for large ranges) or
+         * Round numbers (better for small ranges)
+         */
+        get: function () {
+            return this.logTickProvider.majorTickMode;
+        },
+        /**
+         * Gets or sets the mode for Major ticks using {@link ELogarithmicMajorTickMode}
+         * Equally spaced (best for large ranges) or
+         * Round numbers (better for small ranges)
+         */
+        set: function (mode) {
+            this.logTickProvider.majorTickMode = mode;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(LogarithmicAxis.prototype, "minorTickMode", {
+        /**
+         * Gets or sets the mode for minor ticks using {@link ELogarithmicMinorTickMode},
+         * Linear (default, best for smaller ranges),
+         * Logarithmic (better for very large ranges) or
+         * Auto (switches from linear to Logarithmic when the visible range is such that
+         *  the first linear minor tick would be more than 70% of the major tick)
+         */
+        get: function () {
+            return this.logTickProvider.minorTickMode;
+        },
+        /**
+         * Gets or sets the mode for minor ticks using {@link ELogarithmicMinorTickMode},
+         * Linear (default, best for smaller ranges),
+         * Logarithmic (better for very large ranges) or
+         * Auto (switches from linear to Logarithmic when the visible range is such that
+         *  the first linear minor tick would be more than 70% of the major tick)
+         */
+        set: function (mode) {
+            this.logTickProvider.minorTickMode = mode;
+        },
+        enumerable: false,
+        configurable: true
+    });
     LogarithmicAxis.prototype.getWindowedYRange = function (xRanges) {
         var _this = this;
         var maxRange;
@@ -154,12 +205,52 @@ var LogarithmicAxis = /** @class */ (function (_super) {
         if (this.visibleRangeLimit && maxRange) {
             maxRange = maxRange.clip(this.visibleRangeLimit);
         }
-        return maxRange || new NumberRange_1.NumberRange();
+        return maxRange;
+    };
+    /**
+     * @inheritdoc
+     */
+    LogarithmicAxis.prototype.animateVisibleRange = function (visibleRange, durationMs, easingFunction, onCompleted) {
+        var _this = this;
+        var _a;
+        if (easingFunction === void 0) { easingFunction = EasingFunctions_1.easing.outCubic; }
+        if (onCompleted === void 0) { onCompleted = function () { }; }
+        if (durationMs <= 0) {
+            this.visibleRange = visibleRange;
+            onCompleted();
+            return undefined;
+        }
+        (_a = this.visibleRangeAnimationToken) === null || _a === void 0 ? void 0 : _a.cancelAnimation();
+        this.visibleRangeAnimationToken = Animator_1.animateAny(durationMs, this.visibleRange, visibleRange, function (range) {
+            _this.visibleRange = range;
+        }, this.interpolateLog, onCompleted, easingFunction);
+        return this.visibleRangeAnimationToken;
+    };
+    LogarithmicAxis.prototype.scale = function (initialRange, delta, isMoreThanHalf) {
+        var deltaRange = initialRange.max / initialRange.min;
+        var newMin, newMax;
+        // Respect flippedCoordinates
+        var isMoreThanHalf2 = this.flippedCoordinates ? !isMoreThanHalf : isMoreThanHalf;
+        var delta2 = this.flippedCoordinates ? -delta : delta;
+        if (isMoreThanHalf2) {
+            newMin = initialRange.min;
+            var mult = delta2 > 0 ? Math.pow(deltaRange, 1 - delta2) : Math.pow(deltaRange, 1 + Math.abs(delta2));
+            newMax = mult * newMin;
+        }
+        else {
+            newMax = initialRange.max;
+            var mult = delta2 > 0 ? Math.pow(deltaRange, 1 + delta2) : Math.pow(deltaRange, 1 + delta2);
+            newMin = newMax / mult;
+        }
+        this.visibleRange = new NumberRange_1.NumberRange(newMin, newMax);
     };
     LogarithmicAxis.prototype.toJSON = function () {
         var json = _super.prototype.toJSON.call(this);
         var options = {
-            logBase: this.logBase
+            logBase: this.logBase,
+            isNegative: this.isNegative,
+            majorTickMode: this.majorTickMode,
+            minorTickMode: this.minorTickMode
         };
         Object.assign(json.options, options);
         return json;
@@ -172,6 +263,13 @@ var LogarithmicAxis = /** @class */ (function (_super) {
         var direction = this.isXAxis ? XyDirection_1.EXyDirection.XDirection : XyDirection_1.EXyDirection.YDirection;
         return new LogarithmicCoordinateCalculator_1.LogarithmicCoordinateCalculator(this.webAssemblyContext2D, size, min, max, direction, this.logBase, shouldFlip, this.offset);
     };
+    Object.defineProperty(LogarithmicAxis.prototype, "logTickProvider", {
+        get: function () {
+            return this.tickProvider;
+        },
+        enumerable: false,
+        configurable: true
+    });
     LogarithmicAxis.prototype.updateLogarithmicBase = function (logBase) {
         var logTickProvider = this.tickProvider;
         if (logTickProvider) {
@@ -186,6 +284,12 @@ var LogarithmicAxis = /** @class */ (function (_super) {
             logLabelProvider.logarithmicBase = logBase;
         }
     };
+    LogarithmicAxis.prototype.interpolateLog = function (from, to, interpolationFactor) {
+        var newMin = Math.pow(to.min / from.min, interpolationFactor) * from.min;
+        var newMax = Math.pow(to.max / from.max, interpolationFactor) * from.max;
+        var result = new NumberRange_1.NumberRange(newMin, newMax);
+        return result;
+    };
     return LogarithmicAxis;
 }(AxisBase2D_1.AxisBase2D));
 exports.LogarithmicAxis = LogarithmicAxis;

package/Charting/Visuals/Axis/constants.d.ts

@@ -42,5 +42,6 @@ export declare enum PROPERTY {
     VISIBLE_RANGE = "VISIBLE_RANGE",
     VISIBLE_RANGE_LIMIT = "VISIBLE_RANGE_LIMIT",
     TICK_PROVIDER = "TICK_PROVIDER",
-    VIEW_RECT = "VIEW_RECT"
+    VIEW_RECT = "VIEW_RECT",
+    ZOOMEXTENTS_RANGE = "ZOOMEXTENTS_RANGE"
 }

package/Charting/Visuals/Axis/constants.js

@@ -47,4 +47,5 @@ var PROPERTY;
     PROPERTY["VISIBLE_RANGE_LIMIT"] = "VISIBLE_RANGE_LIMIT";
     PROPERTY["TICK_PROVIDER"] = "TICK_PROVIDER";
     PROPERTY["VIEW_RECT"] = "VIEW_RECT";
+    PROPERTY["ZOOMEXTENTS_RANGE"] = "ZOOMEXTENTS_RANGE";
 })(PROPERTY = exports.PROPERTY || (exports.PROPERTY = {}));

package/Charting/Visuals/Legend/SciChartLegend.js

@@ -91,7 +91,7 @@ var SciChartLegend = /** @class */ (function (_super) {
             // TODO: Stocked charts
             var name = rs.getDataSeriesName() || "Series " + (index + 1);
             var id = rs.id;
-            var str = "<div style=\"display: flex; margin-right: 4px;\">";
+            var str = "<div class=\"scichart__legend-item\" style=\"display: flex; margin-right: 4px;\">";
             if (_this.showCheckboxes) {
                 str += "<input " + (rs.isVisible ? "checked" : "") + " type=\"checkbox\" id=\"" + id + "\" name=\"" + name + "\" value=\"" + name + "\">";
             }

package/Charting/Visuals/Legend/SciChartLegendBase.d.ts

@@ -31,6 +31,7 @@ export declare abstract class SciChartLegendBase implements IDeletable {
     protected marginProperty: number;
     protected isDirty: boolean;
     protected parentSurfaceProperty: ISciChartSurfaceBase;
+    protected placementDivIdProperty: string;
     /**
      * @inheritDoc
      */
@@ -90,6 +91,14 @@ export declare abstract class SciChartLegendBase implements IDeletable {
      * Gets or sets the margin in pixels
      */
     set margin(value: number);
+    /**
+     * Gets or sets the parent div element for the Legend
+     */
+    get placementDivId(): string;
+    /**
+     * Gets or sets the parent div element for the Legend
+     */
+    set placementDivId(value: string);
     /**
      * @inheritDoc
      */
@@ -110,6 +119,8 @@ export declare abstract class SciChartLegendBase implements IDeletable {
      * When overridden in a derived class, will be called when its time to add event listeners to series
      */
     protected abstract addEventListeners(): void;
+    private getParentDiv;
+    private isLocatedOutside;
 }
 export declare const calcLegendPosition: (seriesViewRect: Rect, div: Rect, margin: number, placement: ELegendPlacement) => {
     left: number;

package/Charting/Visuals/Legend/SciChartLegendBase.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.calcLegendPosition = exports.SciChartLegendBase = exports.ELegendPlacement = exports.ELegendOrientation = void 0;
 var app_1 = require("../../../constants/app");
 var Rect_1 = require("../../../Core/Rect");
+var DpiHelper_1 = require("../TextureManager/DpiHelper");
 /**
  * Enumeration constants to define legend orientation
  */
@@ -148,12 +149,29 @@ var SciChartLegendBase = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartLegendBase.prototype, "placementDivId", {
+        /**
+         * Gets or sets the parent div element for the Legend
+         */
+        get: function () {
+            return this.placementDivIdProperty;
+        },
+        /**
+         * Gets or sets the parent div element for the Legend
+         */
+        set: function (value) {
+            this.placementDivIdProperty = value;
+            this.notifyPropertyChanged();
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @inheritDoc
      */
     SciChartLegendBase.prototype.delete = function () {
         // TODO: remove listeners from renderable series to prevent memory leaks in older browsers
-        this.rootDiv.removeChild(this.div);
+        this.getParentDiv().removeChild(this.div);
         this.div = undefined;
     };
     /**
@@ -170,7 +188,10 @@ var SciChartLegendBase = /** @class */ (function () {
      */
     SciChartLegendBase.prototype.create = function () {
         var div = document.createElement("div");
-        div.style.position = "absolute";
+        div.setAttribute("class", "scichart__legend");
+        if (!this.isLocatedOutside()) {
+            div.style.position = "absolute";
+        }
         div.style.pointerEvents = "auto";
         div.style.padding = "5px";
         div.style.borderRadius = "3px";
@@ -178,40 +199,48 @@ var SciChartLegendBase = /** @class */ (function () {
         div.style.color = this.parentSurfaceProperty.themeProvider.labelForegroundBrush;
         div.style.display = this.orientationProperty === ELegendOrientation.Vertical ? "block" : "flex";
         div.innerHTML = this.getLegendHtml();
-        this.rootDiv.appendChild(div);
-        var divWidth = div.offsetWidth;
-        var divHeight = div.offsetHeight;
-        var position = exports.calcLegendPosition(this.seriesViewRect, Rect_1.Rect.create(0, 0, divWidth, divHeight), this.margin, this.placement);
-        div.style.left = position.left + "px";
-        div.style.top = position.top + "px";
+        this.getParentDiv().appendChild(div);
+        if (!this.isLocatedOutside()) {
+            var divWidth = div.offsetWidth;
+            var divHeight = div.offsetHeight;
+            var position = exports.calcLegendPosition(this.seriesViewRect, Rect_1.Rect.create(0, 0, divWidth, divHeight), this.margin, this.placement);
+            div.style.left = position.left + "px";
+            div.style.top = position.top + "px";
+        }
         this.div = div;
         if (!app_1.IS_TEST_ENV) {
             this.addEventListeners();
         }
     };
+    SciChartLegendBase.prototype.getParentDiv = function () {
+        return this.placementDivId ? document.getElementById(this.placementDivId) : this.rootDiv;
+    };
+    SciChartLegendBase.prototype.isLocatedOutside = function () {
+        return !!this.placementDivId;
+    };
     return SciChartLegendBase;
 }());
 exports.SciChartLegendBase = SciChartLegendBase;
 exports.calcLegendPosition = function (seriesViewRect, div, margin, placement) {
     switch (placement) {
         case ELegendPlacement.TopLeft: {
-            var left = seriesViewRect.left + margin;
-            var top_1 = seriesViewRect.top + margin;
+            var left = seriesViewRect.left / DpiHelper_1.DpiHelper.PIXEL_RATIO + margin;
+            var top_1 = seriesViewRect.top / DpiHelper_1.DpiHelper.PIXEL_RATIO + margin;
             return { left: left, top: top_1 };
         }
         case ELegendPlacement.TopRight: {
-            var left = seriesViewRect.right - (margin + div.width);
-            var top_2 = seriesViewRect.top + margin;
+            var left = seriesViewRect.right / DpiHelper_1.DpiHelper.PIXEL_RATIO - (margin + div.width);
+            var top_2 = seriesViewRect.top / DpiHelper_1.DpiHelper.PIXEL_RATIO + margin;
             return { left: left, top: top_2 };
         }
         case ELegendPlacement.BottomLeft: {
-            var left = seriesViewRect.left + margin;
-            var top_3 = seriesViewRect.bottom - (margin + div.height);
+            var left = seriesViewRect.left / DpiHelper_1.DpiHelper.PIXEL_RATIO + margin;
+            var top_3 = seriesViewRect.bottom / DpiHelper_1.DpiHelper.PIXEL_RATIO - (margin + div.height);
             return { left: left, top: top_3 };
         }
         case ELegendPlacement.BottomRight: {
-            var left = seriesViewRect.right - (margin + div.width);
-            var top_4 = seriesViewRect.bottom - (margin + div.height);
+            var left = seriesViewRect.right / DpiHelper_1.DpiHelper.PIXEL_RATIO - (margin + div.width);
+            var top_4 = seriesViewRect.bottom / DpiHelper_1.DpiHelper.PIXEL_RATIO - (margin + div.height);
             return { left: left, top: top_4 };
         }
     }