scichart 3.2.509 → 3.2.525

package/Charting/Visuals/Annotations/RolloverMarkerSvgAnnotation.js

@@ -45,13 +45,17 @@ var RolloverMarkerSvgAnnotation = /** @class */ (function (_super) {
     };
     /** @inheritDoc */
     RolloverMarkerSvgAnnotation.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
-        if (this.svg) {
+        var _a = this.tooltipProps, tooltipColor = _a.tooltipColor, markerColor = _a.markerColor;
+        var color = markerColor !== null && markerColor !== void 0 ? markerColor : tooltipColor;
+        if (this.svg && this.currentColor !== color) {
             this.clear();
         }
-        var _a = this.tooltipProps, tooltipColor = _a.tooltipColor, markerColor = _a.markerColor;
-        var svgString = tooltipSvgTemplate(markerColor !== null && markerColor !== void 0 ? markerColor : tooltipColor);
-        var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
-        this.setSvg(svgNode);
+        if (!this.svg) {
+            this.currentColor === color;
+            var svgString = tooltipSvgTemplate(color);
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+            this.setSvg(svgNode);
+        }
     };
     return RolloverMarkerSvgAnnotation;
 }(SvgAnnotationBase_1.SvgAnnotationBase));

package/Charting/Visuals/Annotations/RolloverTooltipSvgAnnotation.js

@@ -23,6 +23,7 @@ var annotationHelpers_1 = require("./annotationHelpers");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
+var parseColor_1 = require("../../../utils/parseColor");
 // TODO: Rename to RolloverTooltipSvgAnnotation
 /**
  * A Tooltip Annotation which provides an SVG tooltip over the chart. Used by the {@link RolloverModifier}
@@ -238,7 +239,7 @@ var defaultTooltipTemplate = function (id, seriesInfo, rolloverTooltip) {
     var _a, _b, _c, _d, _e;
     var valuesBlock = "";
     var tooltipProps = rolloverTooltip.tooltipProps;
-    var tooltipTitle = tooltipProps.tooltipTitle, tooltipColor = tooltipProps.tooltipColor, tooltipTextColor = tooltipProps.tooltipTextColor, tooltipLabelX = tooltipProps.tooltipLabelX, tooltipLabelY = tooltipProps.tooltipLabelY;
+    var tooltipTitle = tooltipProps.tooltipTitle, tooltipColor = tooltipProps.tooltipColor, tooltipTextColor = tooltipProps.tooltipTextColor, tooltipLabelX = tooltipProps.tooltipLabelX, tooltipLabelY = tooltipProps.tooltipLabelY, shadowColor = tooltipProps.shadowColor;
     var tooltipDataTemplate = (_c = (_a = rolloverTooltip.tooltipProps.tooltipDataTemplate) !== null && _a !== void 0 ? _a : (_b = rolloverTooltip.tooltipProps.rolloverModifier) === null || _b === void 0 ? void 0 : _b.tooltipDataTemplate) !== null && _c !== void 0 ? _c : defaultTooltipDataTemplate;
     var valuesWithLabels = tooltipDataTemplate(seriesInfo, tooltipTitle, tooltipLabelX, tooltipLabelY);
     // tooltip width
@@ -249,7 +250,12 @@ var defaultTooltipTemplate = function (id, seriesInfo, rolloverTooltip) {
     valuesWithLabels.forEach(function (val, index) {
         valuesBlock += "<tspan x=\"8\" dy=\"1.2em\">".concat(val, "</tspan>");
     });
-    return "<svg class=\"scichart__rollover-tooltip\" width=\"".concat(width, "\" height=\"").concat(height, "\">\n        <defs>\n            <filter id=\"").concat(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=\"").concat(tooltipColor, "\" filter=\"url(#").concat(id, ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"").concat(tooltipTextColor, "\">").concat(valuesBlock, "</text>\n        </svg>\n    </svg>");
+    var blur = "<feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"3\" />";
+    if (shadowColor !== undefined) {
+        var shadowRGBA = (0, parseColor_1.parseColorToTArgb)(shadowColor);
+        blur = "<feColorMatrix result=\"matrixOut\" in=\"offOut\" type=\"matrix\"\n        values=\"0 0 0 0 ".concat(shadowRGBA.red / 255, "\n                0 0 0 0 ").concat(shadowRGBA.green / 255, "\n                0 0 0 0 ").concat(shadowRGBA.blue / 255, "\n                0 0 0 ").concat(shadowRGBA.opacity / 255, " 0\" />\n        <feGaussianBlur result=\"blurOut\" in=\"matrixOut\" stdDeviation=\"3\" />");
+    }
+    return "<svg class=\"scichart__rollover-tooltip\" width=\"".concat(width, "\" height=\"").concat(height, "\">\n        <defs>\n            <filter id=\"").concat(id, "\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n                <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"3\" dy=\"3\" />\n                ").concat(blur, "\n                <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n            </filter>\n        </defs>\n        <rect rx=\"4\" ry=\"4\" width=\"90%\" height=\"90%\" fill=\"").concat(tooltipColor, "\" filter=\"url(#").concat(id, ")\" />\n        <svg width=\"100%\">\n            <text x=\"8\" y=\"3\" font-size=\"13\" font-family=\"Verdana\" dy=\"0\" fill=\"").concat(tooltipTextColor, "\">").concat(valuesBlock, "</text>\n        </svg>\n    </svg>");
 };
 /** @ignore */
 var calcTooltipWidth = function (textLength, fontSize) {

package/Charting/Visuals/Annotations/SvgAnnotationBase.js

@@ -289,12 +289,11 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         return (0, pointUtil_1.testIsInBounds)(notScaledX, notScaledY, x1, y2, x2, y1);
     };
     SvgAnnotationBase.prototype.updateAdornerInner = function () {
-        var _a = this.getAdornerAnnotationBorders(true, true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
-        var adornerSvgRoot = this.parentSurface.domSvgAdornerLayer;
         this.deleteAdorner();
         if (this.isSelected) {
+            var _a = this.getAdornerAnnotationBorders(true, true), x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2;
             var svgString = this.svgStringAdornerTemplate(x1, y1, x2, y2);
-            this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, adornerSvgRoot);
+            this.svgAdorner = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgAdornerRoot);
         }
     };
     Object.defineProperty(SvgAnnotationBase.prototype, "svgRoot", {

package/Charting/Visuals/Annotations/TextAnnotation.d.ts

@@ -1,3 +1,4 @@
+import { Thickness } from "../../../Core/Thickness";
 import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 import { EAnnotationType } from "./IAnnotation";
 import { ISvgAnnotationBaseOptions, SvgAnnotationBase } from "./SvgAnnotationBase";
@@ -25,6 +26,18 @@ export interface ITextAnnotationOptions extends ISvgAnnotationBaseOptions {
      * Font weight provided by the user
      */
     fontWeight?: string;
+    /**
+     * Text background color provided by the user
+     */
+    background?: string;
+    /**
+     * Text padding provided by the user
+     */
+    padding?: Thickness;
+    /**
+     * Text SVG class provided by the user
+     */
+    className?: string;
 }
 /**
  * A TextAnnotation presents text information over the chart at specific {@link X1}, {@link Y1} coordinates
@@ -37,6 +50,9 @@ export declare class TextAnnotation extends SvgAnnotationBase {
     protected fontSizeProperty?: number;
     protected fontFamilyProperty?: string;
     protected fontWeightProperty?: string;
+    protected backgroundProperty?: string;
+    protected paddingProperty?: Thickness;
+    protected classNameProperty: string;
     protected isDirty: boolean;
     /**
      * Creates an instance of the {@link CustomAnnotation}
@@ -48,6 +64,30 @@ export declare class TextAnnotation extends SvgAnnotationBase {
      */
     get text(): string;
     set text(text: string);
+    /**
+     * Gets or sets the background of {@link TextAnnotation}
+     */
+    get background(): string;
+    /**
+     * Gets or sets the background of {@link TextAnnotation}
+     */
+    set background(value: string);
+    /**
+     * Gets or sets the padding of {@link TextAnnotation}
+     */
+    get padding(): Thickness;
+    /**
+     * Gets or sets the padding of {@link TextAnnotation}
+     */
+    set padding(value: Thickness);
+    /**
+     * Gets or sets the class on underlying SVG element of {@link TextAnnotation}
+     */
+    get className(): string;
+    /**
+     * Gets or sets the class on underlying SVG element of {@link TextAnnotation}
+     */
+    set className(value: string);
     /**
      * text color provided by the user
      */
@@ -80,4 +120,6 @@ export declare class TextAnnotation extends SvgAnnotationBase {
      * @inheritDoc
      */
     protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
+    protected createSvg(): SVGElement;
+    protected attachSvgBackgroundRect(svgRoot: SVGSVGElement, background: string, padding: Thickness): void;
 }

package/Charting/Visuals/Annotations/TextAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextAnnotation = void 0;
+var Thickness_1 = require("../../../Core/Thickness");
 var annotationHelpers_1 = require("./annotationHelpers");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
@@ -31,7 +32,7 @@ var TextAnnotation = /** @class */ (function (_super) {
      */
     function TextAnnotation(options) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVGTextAnnotation;
@@ -40,12 +41,17 @@ var TextAnnotation = /** @class */ (function (_super) {
         _this.fontSizeProperty = 14;
         _this.fontFamilyProperty = "Arial";
         _this.fontWeightProperty = "Normal";
+        _this.paddingProperty = Thickness_1.Thickness.fromNumber(0);
+        _this.classNameProperty = "scichart__text-annotation";
         _this.isDirty = true;
         _this.textProperty = (_a = options === null || options === void 0 ? void 0 : options.text) !== null && _a !== void 0 ? _a : _this.textProperty;
         _this.textColorProperty = (_b = options === null || options === void 0 ? void 0 : options.textColor) !== null && _b !== void 0 ? _b : _this.textColorProperty;
         _this.fontSizeProperty = (_c = options === null || options === void 0 ? void 0 : options.fontSize) !== null && _c !== void 0 ? _c : _this.fontSizeProperty;
         _this.fontFamilyProperty = (_d = options === null || options === void 0 ? void 0 : options.fontFamily) !== null && _d !== void 0 ? _d : _this.fontFamilyProperty;
-        _this.fontWeight = (_e = options === null || options === void 0 ? void 0 : options.fontWeight) !== null && _e !== void 0 ? _e : _this.fontWeight;
+        _this.backgroundProperty = (_e = options === null || options === void 0 ? void 0 : options.background) !== null && _e !== void 0 ? _e : _this.backgroundProperty;
+        _this.paddingProperty = (_f = options === null || options === void 0 ? void 0 : options.padding) !== null && _f !== void 0 ? _f : _this.paddingProperty;
+        _this.classNameProperty = (_g = options === null || options === void 0 ? void 0 : options.className) !== null && _g !== void 0 ? _g : _this.classNameProperty;
+        _this.fontWeight = (_h = options === null || options === void 0 ? void 0 : options.fontWeight) !== null && _h !== void 0 ? _h : _this.fontWeight;
         return _this;
     }
     Object.defineProperty(TextAnnotation.prototype, "text", {
@@ -64,6 +70,63 @@ var TextAnnotation = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TextAnnotation.prototype, "background", {
+        /**
+         * Gets or sets the background of {@link TextAnnotation}
+         */
+        get: function () {
+            return this.backgroundProperty;
+        },
+        /**
+         * Gets or sets the background of {@link TextAnnotation}
+         */
+        set: function (value) {
+            if (this.backgroundProperty !== value) {
+                this.backgroundProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.BACKGROUND_COLOR);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAnnotation.prototype, "padding", {
+        /**
+         * Gets or sets the padding of {@link TextAnnotation}
+         */
+        get: function () {
+            return this.paddingProperty;
+        },
+        /**
+         * Gets or sets the padding of {@link TextAnnotation}
+         */
+        set: function (value) {
+            if (this.paddingProperty !== value) {
+                this.paddingProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.PADDING);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAnnotation.prototype, "className", {
+        /**
+         * Gets or sets the class on underlying SVG element of {@link TextAnnotation}
+         */
+        get: function () {
+            return this.classNameProperty;
+        },
+        /**
+         * Gets or sets the class on underlying SVG element of {@link TextAnnotation}
+         */
+        set: function (value) {
+            if (this.classNameProperty !== value) {
+                this.classNameProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.CLASS_NAME);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TextAnnotation.prototype, "textColor", {
         /**
          * text color provided by the user
@@ -149,7 +212,6 @@ var TextAnnotation = /** @class */ (function (_super) {
             p !== constants_1.PROPERTY.Y_COORD_SHIFT &&
             p !== constants_1.PROPERTY.HORIZONTAL_ANCHOR_POINT &&
             p !== constants_1.PROPERTY.VERTICAL_ANCHOR_POINT &&
-            p !== constants_1.PROPERTY.IS_HIDDEN &&
             p !== constants_1.PROPERTY.X1 &&
             p !== constants_1.PROPERTY.X2 &&
             p !== constants_1.PROPERTY.Y1 &&
@@ -169,20 +231,37 @@ var TextAnnotation = /** @class */ (function (_super) {
             return;
         }
         if (this.svg) {
-            this.delete();
+            this.clear();
         }
-        this.setSvg(createSvg(this.svgRoot, this.textProperty, this.textColorProperty, this.fontSizeProperty, this.fontFamilyProperty, this.fontWeight));
+        this.setSvg(this.createSvg());
         this.calcAndSetAnnotationBorders(xCalc, yCalc);
         this.updateAdornerInner();
         this.isDirty = false;
     };
+    TextAnnotation.prototype.createSvg = function () {
+        var x = this.padding.left;
+        var y = this.fontSize + this.padding.top;
+        //dominant-baseline="text-after-edge"
+        var svgString = "<svg id=\"scichart__text-annotation-".concat(this.id, "\" class=\"").concat(this.className, "\">\n            <text x=\"").concat(x, "\" y=\"").concat(y, "\" fill=\"").concat(this.textColor, "\"  font-size=\"").concat(this.fontSize, "\" font-family=\"").concat(this.fontFamily, "\" font-weight=\"").concat(this.fontWeight, "\">").concat(this.text, "</text>\n        </svg>");
+        var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+        if (this.background) {
+            this.attachSvgBackgroundRect(svgNode, this.background, this.padding);
+        }
+        return svgNode;
+    };
+    TextAnnotation.prototype.attachSvgBackgroundRect = function (svgRoot, background, padding) {
+        var textAnnotationRect = svgRoot.getBoundingClientRect();
+        var rectWidth = textAnnotationRect.width + padding.left + padding.right;
+        var rectHeight = textAnnotationRect.height + padding.top + padding.bottom;
+        var namespace = "http://www.w3.org/2000/svg";
+        var newRect = document.createElementNS(namespace, "rect");
+        newRect.setAttribute("x", "0");
+        newRect.setAttribute("y", "0");
+        newRect.setAttribute("width", "".concat(rectWidth));
+        newRect.setAttribute("height", "".concat(rectHeight));
+        newRect.setAttribute("fill", "".concat(background));
+        svgRoot.insertBefore(newRect, svgRoot.firstChild);
+    };
     return TextAnnotation;
 }(SvgAnnotationBase_1.SvgAnnotationBase));
 exports.TextAnnotation = TextAnnotation;
-/** @ignore */
-/** @ignore */
-var createSvg = function (svgRoot, text, color, fontSize, fontFamily, fontWeight) {
-    var svgString = "<svg class=\"scichart__text-annotation\">\n        <text x=\"0\" y=\"".concat(fontSize, "\" fill=\"").concat(color, "\" font-size=\"").concat(fontSize, "\" font-family=\"").concat(fontFamily, "\" font-weight=\"").concat(fontWeight, "\">").concat(text, "</text>\n    </svg>");
-    var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, svgRoot);
-    return svgNode;
-};

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

@@ -7,6 +7,7 @@ export declare enum PROPERTY {
     AXIS_FONT_FAMILY = "AXIS_FONT_FAMILY",
     AXIS_FONT_SIZE = "AXIS_FONT_SIZE",
     BACKGROUND_COLOR = "BACKGROUND_COLOR",
+    CLASS_NAME = "CLASS_NAME",
     COLOR = "COLOR",
     CONTAINER_BACKGROUND = "CONTAINER_BACKGROUND",
     FILL = "FILL",

package/Charting/Visuals/Annotations/constants.js

@@ -11,6 +11,7 @@ var PROPERTY;
     PROPERTY["AXIS_FONT_FAMILY"] = "AXIS_FONT_FAMILY";
     PROPERTY["AXIS_FONT_SIZE"] = "AXIS_FONT_SIZE";
     PROPERTY["BACKGROUND_COLOR"] = "BACKGROUND_COLOR";
+    PROPERTY["CLASS_NAME"] = "CLASS_NAME";
     PROPERTY["COLOR"] = "COLOR";
     PROPERTY["CONTAINER_BACKGROUND"] = "CONTAINER_BACKGROUND";
     PROPERTY["FILL"] = "FILL";

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

@@ -1,6 +1,6 @@
 import { NumberRange } from "../../../Core/NumberRange";
 import { EAutoRange } from "../../../types/AutoRange";
-import { TGridLineStyle, TTextStyle, TTickLineStyle } from "./AxisCore";
+import { TAxisTitleStyle, TGridLineStyle, TTickLineStyle } from "./AxisCore";
 /**
  * Optional parameters passed to {@link AxisCore} constructor to set defaults at construction time
  */
@@ -70,7 +70,7 @@ export interface IAxisCoreOptions {
      * @summary Sets the Axis Title style
      * @remarks See {@link TTextStyle} for the type which contains style options
      */
-    axisTitleStyle?: TTextStyle;
+    axisTitleStyle?: TAxisTitleStyle;
     /**
      * The maximum number of ticks on the axis when SciChart's Axis is in {@link AxisCore.autoTicks} mode
      * @remarks

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

@@ -235,4 +235,4 @@ export declare abstract class SciChartLegendBase extends DeletableEntity impleme
     protected getParentDiv(): HTMLDivElement;
 }
 export declare const getLegendItemHtml: (orientation: ELegendOrientation, showCheckboxes: boolean, showSeriesMarkers: boolean, item: TLegendItem) => string;
-export declare const getLegendContainerHtml: (placement: ELegendPlacement, textColor: string, backgroundColor: string, margin: Thickness, body: string) => string;
+export declare const getLegendContainerHtml: (placement: ELegendPlacement, textColor: string, backgroundColor: string, margin: Thickness, body: string, isExternal?: boolean) => string;

package/Charting/Visuals/Legend/SciChartLegendBase.js

@@ -297,7 +297,7 @@ var SciChartLegendBase = /** @class */ (function (_super) {
             var _a;
             return (prev + _this.getLegendItemHTML(orientation, showCheckboxes, (_a = curr.showMarker) !== null && _a !== void 0 ? _a : showSeriesMarkers, curr));
         }, "");
-        return (0, exports.getLegendContainerHtml)(placement, textColor, backgroundColor, margin, body);
+        return (0, exports.getLegendContainerHtml)(placement, textColor, backgroundColor, margin, body, this.isExternal());
     };
     /**
      * Gets HTML string for legend items
@@ -368,11 +368,16 @@ var getLegendItemHtml = function (orientation, showCheckboxes, showSeriesMarkers
     return str;
 };
 exports.getLegendItemHtml = getLegendItemHtml;
-var getLegendContainerHtml = function (placement, textColor, backgroundColor, margin, body) {
+var getLegendContainerHtml = function (placement, textColor, backgroundColor, margin, body, isExternal) {
+    if (isExternal === void 0) { isExternal = false; }
     if (!body)
         return "";
     //const float = [ELegendPlacement.TopLeft, ELegendPlacement.BottomLeft].includes(placement) ? "left" : "right";
+    var position = "";
     var positionStyle = "";
+    if (!isExternal) {
+        position = "position: absolute;";
+    }
     if (placement === ELegendPlacement.TopLeft) {
         positionStyle = "left: 0; top: 0;";
     }
@@ -385,7 +390,7 @@ var getLegendContainerHtml = function (placement, textColor, backgroundColor, ma
     else if (placement === ELegendPlacement.BottomRight) {
         positionStyle = "right: 0; bottom: 0;";
     }
-    var htmlStr = "<div class=\"scichart__legend\" style=\"height: 100%; position: absolute; display: flex; ".concat(positionStyle, " text-align: center;\">");
+    var htmlStr = "<div class=\"scichart__legend\" style=\"height: 100%; ".concat(position, " display: flex; ").concat(positionStyle, " text-align: center;\">");
     var alignSelf = [ELegendPlacement.TopLeft, ELegendPlacement.TopRight].includes(placement)
         ? "flex-start"
         : "flex-end";

package/Charting/Visuals/RenderableSeries/DataLabels/DataLabelState.js

@@ -30,7 +30,7 @@ var DataLabelState = /** @class */ (function () {
             var indicesRange = this.parentSeries.getIndicesRange(new NumberRange_1.NumberRange(renderPassData.xCoordinateCalculator.visibleMin, renderPassData.xCoordinateCalculator.visibleMax), isCategoryAxis);
             this.indexStart = indicesRange.min;
             this.indexEnd = indicesRange.max;
-            this.pointCount = indicesRange.diff + 1;
+            this.pointCount = renderPassData.indexRange.diff + 1;
             if (this.pointCount > 1) {
                 this.pointGap = renderPassData.isVerticalChart
                     ? Math.abs(this.yCoord(this.indexStart) - this.yCoord(this.indexEnd)) / this.pointCount
@@ -40,9 +40,9 @@ var DataLabelState = /** @class */ (function () {
                 this.pointGap = Infinity; // Single point
         }
         else {
-            this.indexStart = renderPassData.indexRange.min;
-            this.pointCount = renderPassData.indexRange.diff + 1;
-            this.indexEnd = renderPassData.indexRange.max;
+            this.indexStart = pointSeries.resampled ? 0 : renderPassData.indexRange.min;
+            this.pointCount = pointSeries.resampled ? pointSeries.count : renderPassData.indexRange.diff + 1;
+            this.indexEnd = pointSeries.resampled ? pointSeries.count - 1 : renderPassData.indexRange.max;
             if (this.pointCount > 1) {
                 this.pointGap = renderPassData.isVerticalChart
                     ? Math.abs(this.yCoord(this.indexStart) - this.yCoord(this.indexEnd)) / this.pointCount

package/Charting/Visuals/RenderableSeries/HitTest/BandSeriesHitTestProvider.js

@@ -84,8 +84,8 @@ var BandSeriesHitTestProvider = /** @class */ (function (_super) {
         if (!dataSeries) {
             return HitTestInfo_1.HitTestInfo.empty();
         }
-        var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXyyPoint(xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord);
-        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, dataSeries.getNativeXValues(), dataSeries.getNativeYValues(), xHitCoord, yHitCoord, nearestPointIndex, hitTestRadius);
+        var _b = hitTestHelpers_1.hitTestHelpers.getNearestXyyPoint(this.webAssemblyContext, xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord, hitTestRadius), nearestPointIndex = _b.nearestPointIndex, distance = _b.distance;
+        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, dataSeries.getNativeXValues(), dataSeries.getNativeYValues(), xHitCoord, yHitCoord, nearestPointIndex, hitTestRadius, distance);
         if (nearestPointIndex >= 0) {
             hitTestInfo.y1Value = dataSeries.getNativeY1Values().get(nearestPointIndex);
             hitTestInfo.y1Coord = yCoordinateCalculator.getCoordinate(hitTestInfo.y1Value);

package/Charting/Visuals/RenderableSeries/HitTest/BaseHitTestProvider.js

@@ -43,12 +43,12 @@ var BaseHitTestProvider = /** @class */ (function () {
         if (!dataSeries) {
             return HitTestInfo_1.HitTestInfo.empty();
         }
-        var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord);
+        var nearest = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(this.webAssemblyContext, xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord, hitTestRadius);
         var xNativeValues = dataSeries.getNativeXValues();
         var yNativeValues = dataSeries.getNativeYValues();
-        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, hitTestRadius);
-        if (nearestPointIndex >= 0) {
-            hitTestInfo.isHit = hitTestHelpers_1.hitTestHelpers.testIsHitForPoint(xCoordinateCalculator, yCoordinateCalculator, xNativeValues, yNativeValues, nearestPointIndex, xHitCoord, yHitCoord, hitTestRadius);
+        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearest.nearestPointIndex, hitTestRadius, nearest.distance);
+        if (nearest.nearestPointIndex >= 0) {
+            hitTestInfo.isHit = hitTestHelpers_1.hitTestHelpers.testIsHitForPoint(xCoordinateCalculator, yCoordinateCalculator, xNativeValues, yNativeValues, nearest.nearestPointIndex, xHitCoord, yHitCoord, hitTestRadius);
         }
         else {
             hitTestInfo.isHit = false;
@@ -80,7 +80,7 @@ var BaseHitTestProvider = /** @class */ (function () {
         var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXPoint(this.webAssemblyContext, xCoordinateCalculator, dataSeries, xHitCoord, dataSeries.dataDistributionCalculator.isSortedAscending);
         var xNativeValues = dataSeries.getNativeXValues();
         var yNativeValues = dataSeries.getNativeYValues();
-        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, 0);
+        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, 0, undefined);
         hitTestInfo.isHit = hitTestInfo.isWithinDataBounds;
         if (dataSeries.dataDistributionCalculator.isSortedAscending && nearestPointIndex >= 0) {
             var dataSeriesCount = xNativeValues.size();

package/Charting/Visuals/RenderableSeries/HitTest/BubbleSeriesHitTestProvider.js

@@ -45,13 +45,13 @@ var BubbleSeriesHitTestProvider = /** @class */ (function (_super) {
         if (!dataSeries) {
             return HitTestInfo_1.HitTestInfo.empty();
         }
-        var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord);
+        var nearest = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(this.webAssemblyContext, xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord, hitTestRadius);
         var xNativeValues = dataSeries.getNativeXValues();
         var yNativeValues = dataSeries.getNativeYValues();
         var zNativeValues = dataSeries.getNativeZValues();
-        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, hitTestRadius);
-        if (nearestPointIndex >= 0) {
-            hitTestInfo.zValue = zNativeValues.get(nearestPointIndex);
+        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearest.nearestPointIndex, hitTestRadius);
+        if (nearest.nearestPointIndex >= 0) {
+            hitTestInfo.zValue = zNativeValues.get(nearest.nearestPointIndex);
             var distance = (0, pointUtil_1.calcDistance)(xHitCoord, yHitCoord, hitTestInfo.xCoord, hitTestInfo.yCoord);
             hitTestInfo.isHit = distance < (hitTestInfo.zValue * DpiHelper_1.DpiHelper.PIXEL_RATIO) / 2 + hitTestRadius;
             var isCategoryAxis = xCoordinateCalculator.isCategoryCoordinateCalculator;

package/Charting/Visuals/RenderableSeries/HitTest/HitTestInfo.d.ts

@@ -166,5 +166,9 @@ export declare class HitTestInfo {
      * The point metadata for the second data point
      */
     point2metadata: IPointMetadata;
+    private distanceProperty;
+    /** The distance from the hitTest coordinate to the point */
+    get distance(): number;
+    set distance(value: number);
     constructor(renderableSeries: IRenderableSeries, isEmpty?: boolean);
 }

package/Charting/Visuals/RenderableSeries/HitTest/HitTestInfo.js

@@ -25,6 +25,19 @@ var HitTestInfo = /** @class */ (function () {
         var dy = ((_b = this.hitTestPoint) === null || _b === void 0 ? void 0 : _b.y) - this.yCoord;
         return Math.sqrt(dx * dx + dy * dy);
     };
+    Object.defineProperty(HitTestInfo.prototype, "distance", {
+        /** The distance from the hitTest coordinate to the point */
+        get: function () {
+            if (this.distanceProperty !== undefined)
+                return this.distanceProperty;
+            return this.getEuclideanDistance();
+        },
+        set: function (value) {
+            this.distanceProperty = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return HitTestInfo;
 }());
 exports.HitTestInfo = HitTestInfo;

package/Charting/Visuals/RenderableSeries/HitTest/ImpulseSeriesHitTestProvider.js

@@ -45,15 +45,15 @@ var ImpulseSeriesHitTestProvider = /** @class */ (function (_super) {
         if (!dataSeries) {
             return HitTestInfo_1.HitTestInfo.empty();
         }
-        var nearestXyPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord);
+        var nearestXy = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(this.webAssemblyContext, xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord, hitTestRadius);
         var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXPoint(this.webAssemblyContext, xCoordinateCalculator, dataSeries, xHitCoord, dataSeries.dataDistributionCalculator.isSortedAscending);
         var xNativeValues = dataSeries.getNativeXValues();
         var yNativeValues = dataSeries.getNativeYValues();
         var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, 0);
-        if (nearestPointIndex >= 0 || nearestXyPointIndex >= 0) {
+        if (nearestPointIndex >= 0 || nearestXy.nearestPointIndex >= 0) {
             hitTestInfo.isHit =
                 hitTestHelpers_1.hitTestHelpers.testIsHitForImpulse(xCoordinateCalculator, yCoordinateCalculator, this.parentSeries, xNativeValues, yNativeValues, nearestPointIndex, xHitCoord, yHitCoord, hitTestRadius) ||
-                    hitTestHelpers_1.hitTestHelpers.testIsHitForPoint(xCoordinateCalculator, yCoordinateCalculator, xNativeValues, yNativeValues, nearestXyPointIndex, xHitCoord, yHitCoord, this.parentSeries.size);
+                    hitTestHelpers_1.hitTestHelpers.testIsHitForPoint(xCoordinateCalculator, yCoordinateCalculator, xNativeValues, yNativeValues, nearestXy.nearestPointIndex, xHitCoord, yHitCoord, this.parentSeries.size);
         }
         else {
             hitTestInfo.isHit = false;

package/Charting/Visuals/RenderableSeries/HitTest/LineSeriesHitTestProvider.js

@@ -57,7 +57,7 @@ var LineSeriesHitTestProvider = /** @class */ (function (_super) {
         var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXPoint(this.webAssemblyContext, xCoordinateCalculator, dataSeries, xHitCoord, dataSeries.dataDistributionCalculator.isSortedAscending);
         var xNativeValues = dataSeries.getNativeXValues();
         var yNativeValues = dataSeries.getNativeYValues();
-        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, hitTestRadius);
+        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, hitTestRadius, undefined);
         if (nearestPointIndex >= 0) {
             var dataSeriesCount = xNativeValues.size();
             var nearestXCoord = xCoordinateCalculator.getCoordinate(xCoordinateCalculator.isCategoryCoordinateCalculator
@@ -95,11 +95,11 @@ var LineSeriesHitTestProvider = /** @class */ (function (_super) {
         if (!dataSeries) {
             return HitTestInfo_1.HitTestInfo.empty();
         }
-        var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord);
+        var nearest = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(this.webAssemblyContext, xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord, hitTestRadius);
         var xNativeValues = dataSeries.getNativeXValues();
         var yNativeValues = dataSeries.getNativeYValues();
-        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, hitTestRadius);
-        if (nearestPointIndex >= 0) {
+        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearest.nearestPointIndex, hitTestRadius, nearest.distance);
+        if (nearest.nearestPointIndex >= 0) {
             var dataSeriesCount = xNativeValues.size();
             var minX = Number.MAX_VALUE;
             var maxX = Number.MIN_VALUE;

package/Charting/Visuals/RenderableSeries/HitTest/ScatterSeriesHitTestProvider.js

@@ -44,11 +44,11 @@ var ScatterSeriesHitTestProvider = /** @class */ (function (_super) {
         if (!dataSeries) {
             return HitTestInfo_1.HitTestInfo.empty();
         }
-        var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord);
+        var nearest = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(this.webAssemblyContext, xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord, hitTestRadius);
         var xNativeValues = dataSeries.getNativeXValues();
         var yNativeValues = dataSeries.getNativeYValues();
-        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, hitTestRadius);
-        if (nearestPointIndex >= 0) {
+        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearest.nearestPointIndex, hitTestRadius);
+        if (nearest.nearestPointIndex >= 0) {
             var _b = this.parentSeries.pointMarker, width = _b.width, height = _b.height;
             var isCategoryAxis = xCoordinateCalculator.isCategoryCoordinateCalculator;
             var xFirstValue = isCategoryAxis ? 0 : xNativeValues.get(0);

package/Charting/Visuals/RenderableSeries/HitTest/TextSeriesHitTestProvider.js

@@ -34,10 +34,10 @@ var TextSeriesHitTestProvider = /** @class */ (function (_super) {
         var xHitCoord = isVerticalChart ? hitTestPoint.y : hitTestPoint.x;
         var yHitCoord = isVerticalChart ? hitTestPoint.x : hitTestPoint.y;
         var dataSeries = this.parentSeries.dataSeries;
-        var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord);
+        var nearest = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(this.webAssemblyContext, xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord, hitTestRadius);
         var xNativeValues = dataSeries.getNativeXValues();
         var yNativeValues = dataSeries.getNativeYValues();
-        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, hitTestRadius);
+        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearest.nearestPointIndex, hitTestRadius, nearest.distance);
         var labels = this.parentSeries.dataLabelProvider.dataLabels;
         var isHit = false;
         for (var _i = 0, labels_1 = labels; _i < labels_1.length; _i++) {

package/Charting/Visuals/RenderableSeries/HitTest/hitTestHelpers.d.ts

@@ -14,10 +14,16 @@ import { FastImpulseRenderableSeries } from "../FastImpulseRenderableSeries";
 import { IRenderableSeries } from "../IRenderableSeries";
 import { HitTestInfo } from "./HitTestInfo";
 export declare const hitTestHelpers: {
-    createHitTestInfo: (renderableSeries: IRenderableSeries, xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, isVerticalChart: boolean, dataSeries: BaseDataSeries, xNativeValues: SCRTDoubleVector, yNativeValues: SCRTDoubleVector, xHitCoord: number, yHitCoord: number, nearestPointIndex: number, hitTestRadius: number) => HitTestInfo;
+    createHitTestInfo: (renderableSeries: IRenderableSeries, xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, isVerticalChart: boolean, dataSeries: BaseDataSeries, xNativeValues: SCRTDoubleVector, yNativeValues: SCRTDoubleVector, xHitCoord: number, yHitCoord: number, nearestPointIndex: number, hitTestRadius: number, distance?: number) => HitTestInfo;
     getNearestXPoint: (webAssemblyContext: TSciChart, xCoordinateCalculator: CoordinateCalculatorBase, dataSeries: IDataSeries, xHitCoord: number, isSorted: boolean) => number;
-    getNearestXyPoint: (xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, dataSeries: IDataSeries, xHitCoord: number, yHitCoord: number) => number;
-    getNearestXyyPoint: (xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, dataSeries: XyyDataSeries, xHitCoord: number, yHitCoord: number) => number;
+    getNearestXyPoint: (webassemblyContext: TSciChart, xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, dataSeries: IDataSeries, xHitCoord: number, yHitCoord: number, hitTestRadius: number) => {
+        nearestPointIndex: number;
+        distance: number;
+    };
+    getNearestXyyPoint: (webassemblyContext: TSciChart, xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, dataSeries: XyyDataSeries, xHitCoord: number, yHitCoord: number, hitTestRadius: number) => {
+        nearestPointIndex: number;
+        distance: number;
+    };
     getNearestUniformHeatmapPoint: (xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, heatmapDataSeries: UniformHeatmapDataSeries, xHitCoord: number, yHitCoord: number) => {
         xIndex: number;
         yIndex: number;