scichart 2.1.2294 → 2.2.2378

package/Builder/buildAxis.d.ts

@@ -1,5 +1,6 @@
 import { AxisBase2D } from "../Charting/Visuals/Axis/AxisBase2D";
 import { ICategoryAxisOptions } from "../Charting/Visuals/Axis/CategoryAxis";
+import { IDateTimeNumericAxisOptions } from "../Charting/Visuals/Axis/DateTimeNumericAxis";
 import { ILabelOptions } from "../Charting/Visuals/Axis/LabelProvider/LabelProvider";
 import { ITextLabelOptions } from "../Charting/Visuals/Axis/LabelProvider/TextLabelProvider";
 import { ILogarithmicAxisOptions } from "../Charting/Visuals/Axis/LogarithmicAxis";
@@ -17,6 +18,9 @@ export declare type TAxisDefinition = {
 } | {
     type: EAxisType.CategoryAxis;
     options?: ICategoryAxisOptions;
+} | {
+    type: EAxisType.DateTimeNumericAxis;
+    options?: IDateTimeNumericAxisOptions;
 };
 /** Definition of a {@link LabelProviderBase2D}, comprising a {@link ELabelProviderType} and the relevant options  */
 export declare type TLabelProviderDefinition = {
@@ -34,6 +38,9 @@ export declare type TLabelProviderDefinition = {
 } | {
     type: ELabelProviderType.Text;
     options?: ITextLabelOptions;
+} | {
+    type: ELabelProviderType.Pie;
+    options?: ILabelOptions;
 };
 /**
  * Build one or more axes from a definition that can be pure data.

package/Builder/buildAxis.js

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildAxes = void 0;
 var CategoryAxis_1 = require("../Charting/Visuals/Axis/CategoryAxis");
+var DateTimeNumericAxis_1 = require("../Charting/Visuals/Axis/DateTimeNumericAxis");
 var DateLabelProvider_1 = require("../Charting/Visuals/Axis/LabelProvider/DateLabelProvider");
 var LogarithmicLabelProvider_1 = require("../Charting/Visuals/Axis/LabelProvider/LogarithmicLabelProvider");
 var NumericLabelProvider_1 = require("../Charting/Visuals/Axis/LabelProvider/NumericLabelProvider");
+var PieLabelProvider_1 = require("../Charting/Visuals/Axis/LabelProvider/PieLabelProvider");
 var SmartDateLabelProvider_1 = require("../Charting/Visuals/Axis/LabelProvider/SmartDateLabelProvider");
 var TextLabelProvider_1 = require("../Charting/Visuals/Axis/LabelProvider/TextLabelProvider");
 var LogarithmicAxis_1 = require("../Charting/Visuals/Axis/LogarithmicAxis");
@@ -20,6 +22,7 @@ var classFactory_1 = require("./classFactory");
 (0, classFactory_1.registerType)(BaseType_1.EBaseType.LabelProvider, LabelProviderType_1.ELabelProviderType.Logarithmic, function (options) { return new LogarithmicLabelProvider_1.LogarithmicLabelProvider(options); }, true);
 (0, classFactory_1.registerType)(BaseType_1.EBaseType.LabelProvider, LabelProviderType_1.ELabelProviderType.SmartDate, function (options) { return new SmartDateLabelProvider_1.SmartDateLabelProvider(); }, true);
 (0, classFactory_1.registerType)(BaseType_1.EBaseType.LabelProvider, LabelProviderType_1.ELabelProviderType.Text, function (options) { return new TextLabelProvider_1.TextLabelProvider(options); }, true);
+(0, classFactory_1.registerType)(BaseType_1.EBaseType.LabelProvider, LabelProviderType_1.ELabelProviderType.Pie, function (options) { return new PieLabelProvider_1.PieLabelProvider(options); }, true);
 /**
  * Build one or more axes from a definition that can be pure data.
  * @param wasmContext A {@link TSciChart | SciChart 2D WebAssembly Context} or {@link TSciChart | SciChart 3D WebAssembly Context}
@@ -55,6 +58,9 @@ var buildAxis = function (wasmContext, definition) {
         case AxisType_1.EAxisType.LogarithmicAxis:
             axis = new LogarithmicAxis_1.LogarithmicAxis(wasmContext, definition.options);
             break;
+        case AxisType_1.EAxisType.DateTimeNumericAxis:
+            axis = new DateTimeNumericAxis_1.DateTimeNumericAxis(wasmContext, definition.options);
+            break;
         default:
             axis = new NumericAxis_1.NumericAxis(wasmContext, {});
             break;

package/Builder/buildDataSeries.d.ts

@@ -1,3 +1,4 @@
+import { IHlcScaleOffsetFilterOptions } from "../Charting/Model/Filters/HlcScaleOffsetFilter";
 import { IOhlcScaleOffsetFilterOptions } from "../Charting/Model/Filters/OhlcScaleOffsetFilter";
 import { IXyFilterOptions } from "../Charting/Model/Filters/XyFilterBase";
 import { IXyMovingAverageFilterOptions } from "../Charting/Model/Filters/XyMovingAverageFilter";
@@ -5,6 +6,7 @@ import { IXyRatioFilterOptions } from "../Charting/Model/Filters/XyRatioFilter";
 import { IXyScaleOffsetFilterOptions } from "../Charting/Model/Filters/XyScaleOffsetFilter";
 import { IXyyScaleOffsetFilterOptions } from "../Charting/Model/Filters/XyyScaleOffsetFilter";
 import { IXyzScaleOffsetFilterOptions } from "../Charting/Model/Filters/XyzScaleOffsetFilter";
+import { IHlcDataSeriesOptions } from "../Charting/Model/HlcDataSeries";
 import { IDataSeries } from "../Charting/Model/IDataSeries";
 import { IOhlcDataSeriesOptions } from "../Charting/Model/OhlcDataSeries";
 import { IUniformHeatmapSeriesOptions } from "../Charting/Model/UniformHeatmapDataSeries";
@@ -38,6 +40,9 @@ declare type TFilterDefinition = {
 } | {
     type: EDataFilterType.XyzScaleOffset;
     options?: IXyzScaleOffsetFilterOptions;
+} | {
+    type: EDataFilterType.HlcScaleOffset;
+    options?: IHlcScaleOffsetFilterOptions;
 } | {
     type: EDataFilterType.OhlcScaleOffset;
     options?: IOhlcScaleOffsetFilterOptions;
@@ -100,8 +105,21 @@ export declare type TOhlcSeriesData = {
 } & IOhlcDataSeriesOptions & {
     filter?: TFilterDefinition;
 };
+/** Definition of Open, High, Low, Close data */
+export declare type THlcSeriesData = {
+    /** The id of sharedData to use for X data.  You must either use all DataId or all Values properties.  You cannot mix them. */
+    xDataId?: number | string;
+    /** The id of sharedData to use for High data.  You must either use all DataId or all Values properties.  You cannot mix them. */
+    highDataId?: number | string;
+    /** The id of sharedData to use for Low data.  You must either use all DataId or all Values properties.  You cannot mix them. */
+    lowDataId?: number | string;
+    /** The id of sharedData to use for Close data.  You must either use all DataId or all Values properties.  You cannot mix them. */
+    closeDataId?: number | string;
+} & IHlcDataSeriesOptions & {
+    filter?: TFilterDefinition;
+};
 /** Definition of series data, which can take various shapes */
-export declare type TSeriesDataDefinition = TXySeriesData | TXyySeriesData | TXyzSeriesData | TOhlcSeriesData | IUniformHeatmapSeriesOptions;
+export declare type TSeriesDataDefinition = TXySeriesData | TXyySeriesData | TXyzSeriesData | THlcSeriesData | TOhlcSeriesData | IUniformHeatmapSeriesOptions;
 /**
  * Build a data series from a definition that can be pure data.
  * @param wasmContext A {@link TSciChart | SciChart 2D WebAssembly Context} or {@link TSciChart | SciChart 3D WebAssembly Context}

package/Builder/buildDataSeries.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildDataSeries = void 0;
+var HlcScaleOffsetFilter_1 = require("../Charting/Model/Filters/HlcScaleOffsetFilter");
 var OhlcScaleOffsetFilter_1 = require("../Charting/Model/Filters/OhlcScaleOffsetFilter");
 var XyLinearTrendFilter_1 = require("../Charting/Model/Filters/XyLinearTrendFilter");
 var XyMovingAverageFilter_1 = require("../Charting/Model/Filters/XyMovingAverageFilter");
@@ -19,6 +20,7 @@ var XyRatioFilter_1 = require("../Charting/Model/Filters/XyRatioFilter");
 var XyScaleOffsetFilter_1 = require("../Charting/Model/Filters/XyScaleOffsetFilter");
 var XyyScaleOffsetFilter_1 = require("../Charting/Model/Filters/XyyScaleOffsetFilter");
 var XyzScaleOffsetFilter_1 = require("../Charting/Model/Filters/XyzScaleOffsetFilter");
+var HlcDataSeries_1 = require("../Charting/Model/HlcDataSeries");
 var OhlcDataSeries_1 = require("../Charting/Model/OhlcDataSeries");
 var UniformHeatmapDataSeries_1 = require("../Charting/Model/UniformHeatmapDataSeries");
 var XyDataSeries_1 = require("../Charting/Model/XyDataSeries");
@@ -89,6 +91,22 @@ var buildDataSeries = function (wasmContext, seriesDefinition, sharedData) {
             filterDef = data.filter;
         }
     }
+    else if (hasOwnProperty(seriesDefinition, "hlcData")) {
+        var data = seriesDefinition.hlcData;
+        if (sharedData && data.xDataId) {
+            var xValues = sharedData[data.xDataId];
+            var highValues = sharedData[data.highDataId];
+            var lowValues = sharedData[data.lowDataId];
+            var yValues = sharedData[data.closeDataId];
+            dataSeries = new HlcDataSeries_1.HlcDataSeries(wasmContext, __assign({ xValues: xValues, highValues: highValues, lowValues: lowValues, yValues: yValues }, data));
+        }
+        else {
+            dataSeries = new HlcDataSeries_1.HlcDataSeries(wasmContext, data);
+        }
+        if (hasOwnProperty(data, "filter")) {
+            filterDef = data.filter;
+        }
+    }
     else if (hasOwnProperty(seriesDefinition, "ohlcData")) {
         var data = seriesDefinition.ohlcData;
         if (sharedData && data.xDataId) {
@@ -124,7 +142,10 @@ var buildDataSeries = function (wasmContext, seriesDefinition, sharedData) {
 };
 exports.buildDataSeries = buildDataSeries;
 var buildFilter = function (dataSeries, definition) {
-    if (definition.type === DataFilterType_1.EDataFilterType.OhlcScaleOffset) {
+    if (definition.type === DataFilterType_1.EDataFilterType.HlcScaleOffset) {
+        return new HlcScaleOffsetFilter_1.HlcScaleOffsetFilter(dataSeries, definition.options);
+    }
+    else if (definition.type === DataFilterType_1.EDataFilterType.OhlcScaleOffset) {
         return new OhlcScaleOffsetFilter_1.OhlcScaleOffsetFilter(dataSeries, definition.options);
     }
     else if (definition.type === DataFilterType_1.EDataFilterType.XyLinearTrend) {

package/Builder/buildModifiers.d.ts

@@ -11,6 +11,7 @@ import { ISeriesSelectionModifierOptions } from "../Charting/ChartModifiers/Seri
 import { IXAxisDragModifierOptions } from "../Charting/ChartModifiers/XAxisDragModifier";
 import { IYAxisDragModifierOptions } from "../Charting/ChartModifiers/YAxisDragModifier";
 import { IZoomExtentsModifierOptions } from "../Charting/ChartModifiers/ZoomExtentsModifier";
+import { IZoomPanModifierOptions } from "../Charting/ChartModifiers/ZoomPanModifier";
 import { EChart2DModifierType } from "../types/ChartModifierType";
 /** Definition of a 2d chart modifier, comprising a {@link EChart2DModifierType} and the relevant options */
 export declare type TModifierDefinition = {
@@ -48,7 +49,7 @@ export declare type TModifierDefinition = {
     options?: IZoomExtentsModifierOptions;
 } | {
     type: EChart2DModifierType.ZoomPan;
-    options?: IChartModifierBaseOptions;
+    options?: IZoomPanModifierOptions;
 } | {
     type: EChart2DModifierType.OverviewRangeSelection;
     options?: IRangeSelectionModifierOptions;

package/Builder/buildSeries.d.ts

@@ -2,9 +2,9 @@ import { ISelectedPointOptions } from "../Charting/Model/DataPointSelectionPalet
 import { IUniformHeatmapSeriesOptions } from "../Charting/Model/UniformHeatmapDataSeries";
 import { IPointMarkerOptions } from "../Charting/Visuals/PointMarkers/BasePointMarker";
 import { ISpritePointMarkerOptions } from "../Charting/Visuals/PointMarkers/SpritePointMarker";
-import { IBaseAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { IFadeAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/FadeAnimation";
 import { IScaleAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/ScaleAnimation";
+import { IBaseAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { ISweepAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/SweepAnimation";
 import { IWaveAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/WaveAnimation";
 import { IBaseStackedCollectionOptions } from "../Charting/Visuals/RenderableSeries/BaseStackedCollection";
@@ -12,6 +12,7 @@ import { IBandRenderableSeriesOptions } from "../Charting/Visuals/RenderableSeri
 import { IBubbleRenderableSeriesOptions } from "../Charting/Visuals/RenderableSeries/FastBubbleRenderableSeries";
 import { ICandlestickRenderableSeriesOptions } from "../Charting/Visuals/RenderableSeries/FastCandlestickRenderableSeries";
 import { IColumnRenderableSeriesOptions } from "../Charting/Visuals/RenderableSeries/FastColumnRenderableSeries";
+import { IFastErrorBarsRenderableSeriesOptions } from "../Charting/Visuals/RenderableSeries/FastErrorBarsRenderableSeries";
 import { IFastLineRenderableSeriesOptions } from "../Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
 import { IMountainRenderableSeriesOptions } from "../Charting/Visuals/RenderableSeries/FastMountainRenderableSeries";
 import { IOhlcRenderableSeriesOptions } from "../Charting/Visuals/RenderableSeries/FastOhlcRenderableSeries";
@@ -34,7 +35,7 @@ import { EPointMarkerType } from "../types/PointMarkerType";
 import { ESeriesType } from "../types/SeriesType";
 import { EShaderEffectType } from "../types/ShaderEffectType";
 import { TSciChart } from "../types/TSciChart";
-import { TOhlcSeriesData, TSharedDataDefinition, TXySeriesData, TXyySeriesData, TXyzSeriesData } from "./buildDataSeries";
+import { THlcSeriesData, TOhlcSeriesData, TSharedDataDefinition, TXySeriesData, TXyySeriesData, TXyzSeriesData } from "./buildDataSeries";
 import { IImpulseRenderableSeries } from "../Charting/Visuals/RenderableSeries/FastImpulseRenderableSeries";
 /** Definition of a pointmarker, comprising a {@link EPointMarkerType} and the relevant options */
 export declare type TPointMarkerDefinition = {
@@ -130,6 +131,10 @@ export declare type TSeriesDefinition = {
     type: ESeriesType.MountainSeries;
     options?: IMountainRenderableSeriesOptions;
     xyData?: TXySeriesData;
+} | {
+    type: ESeriesType.ErrorBarsSeries;
+    options?: IFastErrorBarsRenderableSeriesOptions;
+    hlcData?: THlcSeriesData;
 } | {
     type: ESeriesType.OhlcSeries;
     options?: IOhlcRenderableSeriesOptions;

package/Builder/buildSeries.js

@@ -18,6 +18,7 @@ var FastBandRenderableSeries_1 = require("../Charting/Visuals/RenderableSeries/F
 var FastBubbleRenderableSeries_1 = require("../Charting/Visuals/RenderableSeries/FastBubbleRenderableSeries");
 var FastCandlestickRenderableSeries_1 = require("../Charting/Visuals/RenderableSeries/FastCandlestickRenderableSeries");
 var FastColumnRenderableSeries_1 = require("../Charting/Visuals/RenderableSeries/FastColumnRenderableSeries");
+var FastErrorBarsRenderableSeries_1 = require("../Charting/Visuals/RenderableSeries/FastErrorBarsRenderableSeries");
 var FastLineRenderableSeries_1 = require("../Charting/Visuals/RenderableSeries/FastLineRenderableSeries");
 var FastMountainRenderableSeries_1 = require("../Charting/Visuals/RenderableSeries/FastMountainRenderableSeries");
 var FastOhlcRenderableSeries_1 = require("../Charting/Visuals/RenderableSeries/FastOhlcRenderableSeries");
@@ -40,8 +41,8 @@ var PointMarkerType_1 = require("../types/PointMarkerType");
 var SeriesType_1 = require("../types/SeriesType");
 var ShaderEffectType_1 = require("../types/ShaderEffectType");
 var buildDataSeries_1 = require("./buildDataSeries");
-var classFactory_1 = require("./classFactory");
 var chartBuilder_1 = require("./chartBuilder");
+var classFactory_1 = require("./classFactory");
 var FastImpulseRenderableSeries_1 = require("../Charting/Visuals/RenderableSeries/FastImpulseRenderableSeries");
 (0, classFactory_1.registerWasmType)(BaseType_1.EBaseType.PointMarker, PointMarkerType_1.EPointMarkerType.Cross, function (wasm, options) { return new CrossPointMarker_1.CrossPointMarker(wasm, options); }, true);
 (0, classFactory_1.registerWasmType)(BaseType_1.EBaseType.PointMarker, PointMarkerType_1.EPointMarkerType.Ellipse, function (wasm, options) { return new EllipsePointMarker_1.EllipsePointMarker(wasm, options); }, true);
@@ -103,6 +104,9 @@ var buildSeries = function (wasmContext, definition, sharedData) {
         else if (seriesDef.type === SeriesType_1.ESeriesType.MountainSeries) {
             series = new FastMountainRenderableSeries_1.FastMountainRenderableSeries(wasmContext, seriesDef.options);
         }
+        else if (seriesDef.type === SeriesType_1.ESeriesType.ErrorBarsSeries) {
+            series = new FastErrorBarsRenderableSeries_1.FastErrorBarsRenderableSeries(wasmContext, seriesDef.options);
+        }
         else if (seriesDef.type === SeriesType_1.ESeriesType.OhlcSeries) {
             series = new FastOhlcRenderableSeries_1.FastOhlcRenderableSeries(wasmContext, seriesDef.options);
         }

package/Charting/ChartModifiers/CursorModifier.d.ts

@@ -33,6 +33,7 @@ export interface ICursorModifierOptions extends IChartModifierBaseOptions {
     tooltipLegendOffsetX?: number;
     tooltipLegendOffsetY?: number;
     tooltipDataTemplate?: TCursorTooltipDataTemplate | string;
+    placementDivId?: string;
 }
 /**
  * The CursorModifier provides tooltip and cursor behavior on a 2D {@link SciChartSurface}
@@ -117,6 +118,7 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
     private crosshairStrokeProperty;
     private tooltipDataTemplateProperty?;
     private includedSeriesMap;
+    private placementDivId;
     /**
      * Creates an instance of the CursorModifier
      *
@@ -194,6 +196,9 @@ export declare class CursorModifier extends ChartModifierBase2D implements IIncl
     getMousePosition(): EMousePosition;
     /** @inheritDoc */
     toJSON(): {
+        /**
+         * Gets or sets the xAxis label text color as an HTML Color code
+         */
         type: string;
         options: Required<Omit<IChartModifierBaseOptions, never>>;
     };

package/Charting/ChartModifiers/CursorModifier.js

@@ -51,7 +51,7 @@ var CursorModifier = /** @class */ (function (_super) {
      * @param options Optional parameters {@link ICursorModifierOptions} used to configure the modifier
      */
     function CursorModifier(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         var _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Cursor;
         _this.tooltipSvgTemplate = defaultTooltipTemplate;
@@ -135,6 +135,7 @@ var CursorModifier = /** @class */ (function (_super) {
         _this.xAxisLabelFill = (_m = options === null || options === void 0 ? void 0 : options.xAxisLabelFill) !== null && _m !== void 0 ? _m : _this.xAxisLabelFill;
         _this.yAxisLabelStroke = (_o = options === null || options === void 0 ? void 0 : options.yAxisLabelStroke) !== null && _o !== void 0 ? _o : _this.yAxisLabelStroke;
         _this.yAxisLabelFill = (_p = options === null || options === void 0 ? void 0 : options.yAxisLabelFill) !== null && _p !== void 0 ? _p : _this.yAxisLabelFill;
+        _this.placementDivId = (_q = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _q !== void 0 ? _q : _this.placementDivId;
         if (options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) {
             if (typeof options.tooltipLegendTemplate === "string") {
                 _this.typeMap.set("tooltipLegendTemplate", options.tooltipLegendTemplate);
@@ -143,9 +144,9 @@ var CursorModifier = /** @class */ (function (_super) {
             }
         }
         _this.tooltipLegendTemplate =
-            (_q = options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) !== null && _q !== void 0 ? _q : _this.tooltipLegendTemplate;
-        _this.tooltipLegendOffsetX = (_r = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetX) !== null && _r !== void 0 ? _r : _this.tooltipLegendOffsetX;
-        _this.tooltipLegendOffsetY = (_s = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetY) !== null && _s !== void 0 ? _s : _this.tooltipLegendOffsetY;
+            (_r = options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) !== null && _r !== void 0 ? _r : _this.tooltipLegendTemplate;
+        _this.tooltipLegendOffsetX = (_s = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetX) !== null && _s !== void 0 ? _s : _this.tooltipLegendOffsetX;
+        _this.tooltipLegendOffsetY = (_t = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetY) !== null && _t !== void 0 ? _t : _this.tooltipLegendOffsetY;
         if (options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) {
             if (typeof options.tooltipDataTemplate === "string") {
                 _this.typeMap.set("tooltipDataTemplate", options.tooltipDataTemplate);
@@ -154,7 +155,7 @@ var CursorModifier = /** @class */ (function (_super) {
             }
         }
         _this.tooltipDataTemplateProperty =
-            (_t = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) !== null && _t !== void 0 ? _t : _this.tooltipDataTemplateProperty;
+            (_u = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) !== null && _u !== void 0 ? _u : _this.tooltipDataTemplateProperty;
         return _this;
     }
     /**
@@ -188,7 +189,8 @@ var CursorModifier = /** @class */ (function (_super) {
             tooltipLegendOffsetX: this.tooltipLegendOffsetX,
             tooltipLegendOffsetY: this.tooltipLegendOffsetY,
             xAxisId: this.xAxisId,
-            yAxisId: this.yAxisId
+            yAxisId: this.yAxisId,
+            placementDivId: this.placementDivId
         });
         this.parentSurface.modifierAnnotations.add(this.xLineAnnotation, this.yLineAnnotation, this.tooltipAnnotation);
     };
@@ -386,6 +388,9 @@ var CursorModifier = /** @class */ (function (_super) {
             this.xLineAnnotation.isHidden = true;
             this.yLineAnnotation.isHidden = true;
             this.tooltipAnnotation.isHidden = true;
+            if (this.placementDivId) {
+                this.tooltipAnnotation.delete();
+            }
             return;
         }
         var translatedMousePoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(this.mousePoint, this.parentSurface.seriesViewRect);
@@ -400,18 +405,18 @@ var CursorModifier = /** @class */ (function (_super) {
             this.xLineAnnotation.y1 = 0;
             this.yLineAnnotation.x1 = 0;
             if (this.isVerticalChart()) {
-                this.xLineAnnotation.y2 = this.parentSurface.seriesViewRect.right;
+                this.xLineAnnotation.y2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.right);
                 this.xLineAnnotation.x1 = y;
                 this.xLineAnnotation.x2 = y;
-                this.yLineAnnotation.x2 = this.parentSurface.seriesViewRect.bottom;
+                this.yLineAnnotation.x2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.bottom);
                 this.yLineAnnotation.y1 = x;
                 this.yLineAnnotation.y2 = x;
             }
             else {
-                this.xLineAnnotation.y2 = this.parentSurface.seriesViewRect.bottom;
+                this.xLineAnnotation.y2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.bottom);
                 this.xLineAnnotation.x1 = x;
                 this.xLineAnnotation.x2 = x;
-                this.yLineAnnotation.x2 = this.parentSurface.seriesViewRect.right;
+                this.yLineAnnotation.x2 = (0, translate_1.translateToNotScaled)(this.parentSurface.seriesViewRect.right);
                 this.yLineAnnotation.y1 = y;
                 this.yLineAnnotation.y2 = y;
             }

package/Charting/ChartModifiers/LegendModifier.d.ts

@@ -1,3 +1,4 @@
+import { EventHandler } from "../../Core/EventHandler";
 import { IIncludeSeries } from "../../Core/IIncludeSeries";
 import { EChart2DModifierType } from "../../types/ChartModifierType";
 import { IThemeProvider } from "../Themes/IThemeProvider";
@@ -37,7 +38,26 @@ export interface ILegendModifierOptions extends IChartModifierBaseOptions {
      * The parent div element Id or reference, the Legend will be appended to this element
      */
     placementDivId?: string | HTMLDivElement;
+    /**
+     * Callback when a legend item checkbox is checked or unchecked (by default, this corresponds to {@link IRenderableSeries.isVisible}
+     * @param series
+     * @param isChecked
+     */
+    isCheckedChangedCallback?: (series: IRenderableSeries, isChecked: boolean) => void;
 }
+/**
+ * Type args for the {@link LegendModifier.isCheckedChanged} callback
+ */
+export declare type TCheckedChangedArgs = {
+    /**
+     * The series which was checked or unchecked
+     */
+    series: IRenderableSeries;
+    /**
+     * Whether the corresponding legend item is checked or not (by default, this corresponds to {@link IRenderableSeries.isVisible})
+     */
+    isChecked: boolean;
+};
 /**
  * The LegendModifier provides interactive legend behavior on a 2D {@link SciChartSurface}
  * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
@@ -57,6 +77,10 @@ export declare class LegendModifier extends ChartModifierBase2D implements IIncl
      * Gets the {@link SciChartLegend} control used to render the legend
      */
     sciChartLegend: SciChartLegend;
+    /**
+     * An event handler raised when a {@link SciChartLegend} row checkbox is checked or unchecked
+     */
+    readonly isCheckedChanged: EventHandler<TCheckedChangedArgs>;
     private includedSeriesMap;
     /**
      * Creates an instance of the LegendModifier
@@ -86,6 +110,13 @@ export declare class LegendModifier extends ChartModifierBase2D implements IIncl
     };
     /** @inheritDoc */
     delete(): void;
+    /**
+     * Callback called from inner {@link SciChartLegend} when a checkbox is checked or unchecked
+     * @param series
+     * @param isChecked
+     * @protected
+     */
+    protected legendItemCheckedChanged(series: IRenderableSeries, isChecked: boolean): void;
     /**
      * Test if the series is included or excluded, by default it is included
      * @param series

package/Charting/ChartModifiers/LegendModifier.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LegendModifier = void 0;
+var EventHandler_1 = require("../../Core/EventHandler");
 var ChartModifierType_1 = require("../../types/ChartModifierType");
 var SciChartLegend_1 = require("../Visuals/Legend/SciChartLegend");
 var ChartModifierBase2D_1 = require("./ChartModifierBase2D");
@@ -42,7 +43,12 @@ var LegendModifier = /** @class */ (function (_super) {
         var _a, _b, _c, _d, _e, _f, _g;
         var _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Legend;
+        /**
+         * An event handler raised when a {@link SciChartLegend} row checkbox is checked or unchecked
+         */
+        _this.isCheckedChanged = new EventHandler_1.EventHandler();
         _this.includedSeriesMap = new Map();
+        _this.legendItemCheckedChanged = _this.legendItemCheckedChanged.bind(_this);
         _this.sciChartLegend = new SciChartLegend_1.SciChartLegend();
         _this.sciChartLegend.orientation = (_a = options === null || options === void 0 ? void 0 : options.orientation) !== null && _a !== void 0 ? _a : _this.sciChartLegend.orientation;
         _this.sciChartLegend.showLegend = (_b = options === null || options === void 0 ? void 0 : options.showLegend) !== null && _b !== void 0 ? _b : _this.sciChartLegend.showLegend;
@@ -51,6 +57,12 @@ var LegendModifier = /** @class */ (function (_super) {
         _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;
+        _this.sciChartLegend.legendItemCheckedChangedCallback = _this.legendItemCheckedChanged;
+        if (options === null || options === void 0 ? void 0 : options.isCheckedChangedCallback) {
+            _this.isCheckedChanged.subscribe(function (arg) {
+                return options.isCheckedChangedCallback(arg.series, arg.isChecked);
+            });
+        }
         return _this;
     }
     /** @inheritDoc */
@@ -141,6 +153,16 @@ var LegendModifier = /** @class */ (function (_super) {
         _super.prototype.delete.call(this);
         this.sciChartLegend.delete();
     };
+    /**
+     * Callback called from inner {@link SciChartLegend} when a checkbox is checked or unchecked
+     * @param series
+     * @param isChecked
+     * @protected
+     */
+    LegendModifier.prototype.legendItemCheckedChanged = function (series, isChecked) {
+        var _a;
+        (_a = this.isCheckedChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent({ series: series, isChecked: isChecked });
+    };
     /**
      * Test if the series is included or excluded, by default it is included
      * @param series

package/Charting/ChartModifiers/RolloverModifier.d.ts

@@ -84,6 +84,7 @@ export interface IRolloverModifierOptions extends IChartModifierBaseOptions {
     showTooltip?: boolean;
     allowTooltipOverlapping?: boolean;
     snapToDataPoint?: boolean;
+    placementDivId?: string;
 }
 /**
  * The RolloverModifier provides tooltip and cursor behavior on a 2D {@link SciChartSurface}
@@ -125,6 +126,7 @@ export declare class RolloverModifier extends ChartModifierBase2D implements IIn
     private showTooltipProperty;
     private allowTooltipOverlappingProperty;
     private includedSeriesMap;
+    private placementDivIdProperty;
     /**
      * Creates an instance of the RolloverModifier
      * @param options Optional parameters {@link IRolloverModifierOptions} used to configure the modifier
@@ -222,6 +224,14 @@ export declare class RolloverModifier extends ChartModifierBase2D implements IIn
      */
     private testIsIncludedSeries;
     private getSeriesInfos;
+    /**
+     * Gets or sets the parent div element reference or id for the Tooltip
+     */
+    get placementDivId(): string;
+    /**
+     * Gets or sets the parent div element reference or id for the Tooltip
+     */
+    set placementDivId(value: string);
 }
 /**
  * @ignore