@fluentui/react-charting 5.24.39 → 5.25.0

package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.js

@@ -0,0 +1,111 @@
+import { color as d3Color } from 'd3-color';
+export var DEFAULT_ANNOTATION_BACKGROUND_OPACITY = 0.8;
+export var DEFAULT_ANNOTATION_PADDING = '4px 8px';
+export var DEFAULT_CONNECTOR_START_PADDING = 12;
+export var DEFAULT_CONNECTOR_END_PADDING = 0;
+export var DEFAULT_CONNECTOR_STROKE_WIDTH = 2;
+export var DEFAULT_CONNECTOR_ARROW = 'end';
+export var applyOpacityToColor = function (color, opacity) {
+    if (!color) {
+        return undefined;
+    }
+    var parsed = d3Color(color);
+    if (!parsed) {
+        return color;
+    }
+    parsed.opacity = Math.max(0, Math.min(1, opacity));
+    return parsed.toString();
+};
+export var getDefaultAnnotationBackgroundColor = function (theme) {
+    return applyOpacityToColor(theme.semanticColors.bodyBackground, DEFAULT_ANNOTATION_BACKGROUND_OPACITY);
+};
+export var getDefaultConnectorStrokeColor = function (theme) { return theme.palette.neutralPrimary; };
+export var getStyles = function (props) {
+    var theme = props.theme, className = props.className;
+    var defaultBackground = getDefaultAnnotationBackgroundColor(theme);
+    var defaultTextColor = theme.semanticColors.bodyText;
+    var defaultBorderColor = theme.semanticColors.bodyDivider;
+    return {
+        root: [
+            {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                overflow: 'visible',
+                zIndex: 1,
+            },
+            className,
+        ],
+        annotation: [
+            theme.fonts.small,
+            {
+                position: 'absolute',
+                pointerEvents: 'none',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                textAlign: 'center',
+                backgroundColor: defaultBackground,
+                color: defaultTextColor,
+                padding: DEFAULT_ANNOTATION_PADDING,
+                borderRadius: 4,
+                boxShadow: theme.effects.elevation4,
+                border: "1px solid ".concat(defaultBorderColor),
+                whiteSpace: 'pre-wrap',
+                zIndex: 2,
+            },
+        ],
+        connectorLayer: [
+            {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                overflow: 'visible',
+            },
+        ],
+        measurement: [
+            {
+                position: 'absolute',
+                visibility: 'hidden',
+                pointerEvents: 'none',
+            },
+        ],
+        annotationContent: [
+            {
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+            },
+        ],
+        annotationForeignObject: [
+            {
+                overflow: 'visible',
+                pointerEvents: 'none',
+            },
+        ],
+        annotationContentInteractive: [
+            {
+                pointerEvents: 'auto',
+            },
+        ],
+        annotationForeignObjectInteractive: [
+            {
+                pointerEvents: 'auto',
+            },
+        ],
+        connectorGroup: [
+            {
+                pointerEvents: 'none',
+            },
+        ],
+    };
+};
+//# sourceMappingURL=ChartAnnotationLayer.styles.js.map

package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAnnotationLayer.styles.js","sourceRoot":"../src/","sources":["components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,UAAU,CAAC;AAe5C,MAAM,CAAC,IAAM,qCAAqC,GAAG,GAAG,CAAC;AACzD,MAAM,CAAC,IAAM,0BAA0B,GAAG,SAAS,CAAC;AACpD,MAAM,CAAC,IAAM,+BAA+B,GAAG,EAAE,CAAC;AAClD,MAAM,CAAC,IAAM,6BAA6B,GAAG,CAAC,CAAC;AAC/C,MAAM,CAAC,IAAM,8BAA8B,GAAG,CAAC,CAAC;AAChD,MAAM,CAAC,IAAM,uBAAuB,GAA6B,KAAK,CAAC;AAEvE,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,KAAyB,EAAE,OAAe;IAC5E,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IACnD,OAAO,MAAM,CAAC,QAAQ,EAAE,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,mCAAmC,GAAG,UAAC,KAAa;IAC/D,OAAA,mBAAmB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,qCAAqC,CAAC;AAA/F,CAA+F,CAAC;AAElG,MAAM,CAAC,IAAM,8BAA8B,GAAG,UAAC,KAAa,IAAa,OAAA,KAAK,CAAC,OAAO,CAAC,cAAc,EAA5B,CAA4B,CAAC;AAEtG,MAAM,CAAC,IAAM,SAAS,GAAyF,UAC7G,KAAsC;IAE9B,IAAA,KAAK,GAAgB,KAAK,MAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IACnC,IAAM,iBAAiB,GAAG,mCAAmC,CAAC,KAAK,CAAC,CAAC;IACrE,IAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;IACvD,IAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAE5D,OAAO;QACL,IAAI,EAAE;YACJ;gBACE,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,MAAM;gBACrB,QAAQ,EAAE,SAAS;gBACnB,MAAM,EAAE,CAAC;aACV;YACD,SAAS;SACV;QACD,UAAU,EAAE;YACV,KAAK,CAAC,KAAK,CAAC,KAAK;YACjB;gBACE,QAAQ,EAAE,UAAU;gBACpB,aAAa,EAAE,MAAM;gBACrB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,SAAS,EAAE,QAAQ;gBACnB,eAAe,EAAE,iBAAiB;gBAClC,KAAK,EAAE,gBAAgB;gBACvB,OAAO,EAAE,0BAA0B;gBACnC,YAAY,EAAE,CAAC;gBACf,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;gBACnC,MAAM,EAAE,oBAAa,kBAAkB,CAAE;gBACzC,UAAU,EAAE,UAAU;gBACtB,MAAM,EAAE,CAAC;aACV;SACF;QACD,cAAc,EAAE;YACd;gBACE,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,MAAM;gBACrB,QAAQ,EAAE,SAAS;aACpB;SACF;QACD,WAAW,EAAE;YACX;gBACE,QAAQ,EAAE,UAAU;gBACpB,UAAU,EAAE,QAAQ;gBACpB,aAAa,EAAE,MAAM;aACtB;SACF;QACD,iBAAiB,EAAE;YACjB;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,MAAM;aACtB;SACF;QACD,uBAAuB,EAAE;YACvB;gBACE,QAAQ,EAAE,SAAS;gBACnB,aAAa,EAAE,MAAM;aACtB;SACF;QACD,4BAA4B,EAAE;YAC5B;gBACE,aAAa,EAAE,MAAM;aACtB;SACF;QACD,kCAAkC,EAAE;YAClC;gBACE,aAAa,EAAE,MAAM;aACtB;SACF;QACD,cAAc,EAAE;YACd;gBACE,aAAa,EAAE,MAAM;aACtB;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface IChartAnnotationLayerStyleProps {\n  theme: ITheme;\n  className?: string;\n}\nimport { color as d3Color } from 'd3-color';\nimport { ChartAnnotationArrowHead } from '../../../types/IChartAnnotation';\n\nexport interface IChartAnnotationLayerStyles {\n  root?: IStyle;\n  annotation?: IStyle;\n  connectorLayer?: IStyle;\n  measurement?: IStyle;\n  annotationContent?: IStyle;\n  annotationForeignObject?: IStyle;\n  annotationContentInteractive?: IStyle;\n  annotationForeignObjectInteractive?: IStyle;\n  connectorGroup?: IStyle;\n}\n\nexport const DEFAULT_ANNOTATION_BACKGROUND_OPACITY = 0.8;\nexport const DEFAULT_ANNOTATION_PADDING = '4px 8px';\nexport const DEFAULT_CONNECTOR_START_PADDING = 12;\nexport const DEFAULT_CONNECTOR_END_PADDING = 0;\nexport const DEFAULT_CONNECTOR_STROKE_WIDTH = 2;\nexport const DEFAULT_CONNECTOR_ARROW: ChartAnnotationArrowHead = 'end';\n\nexport const applyOpacityToColor = (color: string | undefined, opacity: number): string | undefined => {\n  if (!color) {\n    return undefined;\n  }\n\n  const parsed = d3Color(color);\n  if (!parsed) {\n    return color;\n  }\n\n  parsed.opacity = Math.max(0, Math.min(1, opacity));\n  return parsed.toString();\n};\n\nexport const getDefaultAnnotationBackgroundColor = (theme: ITheme): string | undefined =>\n  applyOpacityToColor(theme.semanticColors.bodyBackground, DEFAULT_ANNOTATION_BACKGROUND_OPACITY);\n\nexport const getDefaultConnectorStrokeColor = (theme: ITheme): string => theme.palette.neutralPrimary;\n\nexport const getStyles: IStyleFunctionOrObject<IChartAnnotationLayerStyleProps, IChartAnnotationLayerStyles> = (\n  props: IChartAnnotationLayerStyleProps,\n) => {\n  const { theme, className } = props;\n  const defaultBackground = getDefaultAnnotationBackgroundColor(theme);\n  const defaultTextColor = theme.semanticColors.bodyText;\n  const defaultBorderColor = theme.semanticColors.bodyDivider;\n\n  return {\n    root: [\n      {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n        overflow: 'visible',\n        zIndex: 1,\n      },\n      className,\n    ],\n    annotation: [\n      theme.fonts.small,\n      {\n        position: 'absolute',\n        pointerEvents: 'none',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        backgroundColor: defaultBackground,\n        color: defaultTextColor,\n        padding: DEFAULT_ANNOTATION_PADDING,\n        borderRadius: 4,\n        boxShadow: theme.effects.elevation4,\n        border: `1px solid ${defaultBorderColor}`,\n        whiteSpace: 'pre-wrap',\n        zIndex: 2,\n      },\n    ],\n    connectorLayer: [\n      {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n        overflow: 'visible',\n      },\n    ],\n    measurement: [\n      {\n        position: 'absolute',\n        visibility: 'hidden',\n        pointerEvents: 'none',\n      },\n    ],\n    annotationContent: [\n      {\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n      },\n    ],\n    annotationForeignObject: [\n      {\n        overflow: 'visible',\n        pointerEvents: 'none',\n      },\n    ],\n    annotationContentInteractive: [\n      {\n        pointerEvents: 'auto',\n      },\n    ],\n    annotationForeignObjectInteractive: [\n      {\n        pointerEvents: 'auto',\n      },\n    ],\n    connectorGroup: [\n      {\n        pointerEvents: 'none',\n      },\n    ],\n  };\n};\n"]}

package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.types.d.ts

@@ -0,0 +1,52 @@
+import { ITheme } from '@fluentui/react/lib/Styling';
+import { IChartAnnotation, ChartAnnotationArrowHead } from '../../../types/IChartAnnotation';
+export interface IAnnotationPoint {
+    x: number;
+    y: number;
+}
+export interface IAnnotationPlotRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface IChartAnnotationContext {
+    /** Rectangle describing the drawable area of the chart (without margins) */
+    plotRect: IAnnotationPlotRect;
+    /** Size of the owning SVG element */
+    svgRect: {
+        width: number;
+        height: number;
+    };
+    /** Indicates if layout should be mirrored */
+    isRtl?: boolean;
+    /** Primary x scale mapping data domain to pixels */
+    xScale?: (value: any) => number;
+    /** Primary y scale mapping data domain to pixels */
+    yScalePrimary?: (value: any) => number;
+    /** Secondary y scale when present */
+    yScaleSecondary?: (value: any) => number;
+}
+export interface IChartAnnotationLayerProps {
+    annotations?: IChartAnnotation[];
+    context: IChartAnnotationContext;
+    theme: ITheme;
+    className?: string;
+}
+export interface IResolvedAnnotationPosition {
+    /** Final absolute position after applying layout and offsets */
+    point: IAnnotationPoint;
+    /** Raw anchor position before offsets (used for connectors) */
+    anchor: IAnnotationPoint;
+}
+export type ConnectorRenderData = {
+    key: string;
+    start: IAnnotationPoint;
+    end: IAnnotationPoint;
+    strokeColor: string;
+    strokeWidth: number;
+    dashArray?: string;
+    arrow: ChartAnnotationArrowHead;
+    markerSize: number;
+    markerStrokeWidth: number;
+};

package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChartAnnotationLayer.types.js.map

package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAnnotationLayer.types.js","sourceRoot":"../src/","sources":["components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartAnnotation, ChartAnnotationArrowHead } from '../../../types/IChartAnnotation';\n\nexport interface IAnnotationPoint {\n  x: number;\n  y: number;\n}\n\nexport interface IAnnotationPlotRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface IChartAnnotationContext {\n  /** Rectangle describing the drawable area of the chart (without margins) */\n  plotRect: IAnnotationPlotRect;\n  /** Size of the owning SVG element */\n  svgRect: { width: number; height: number };\n  /** Indicates if layout should be mirrored */\n  isRtl?: boolean;\n  /** Primary x scale mapping data domain to pixels */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  xScale?: (value: any) => number;\n  /** Primary y scale mapping data domain to pixels */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScalePrimary?: (value: any) => number;\n  /** Secondary y scale when present */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScaleSecondary?: (value: any) => number;\n}\n\nexport interface IChartAnnotationLayerProps {\n  annotations?: IChartAnnotation[];\n  context: IChartAnnotationContext;\n  theme: ITheme;\n  className?: string;\n}\n\nexport interface IResolvedAnnotationPosition {\n  /** Final absolute position after applying layout and offsets */\n  point: IAnnotationPoint;\n  /** Raw anchor position before offsets (used for connectors) */\n  anchor: IAnnotationPoint;\n}\n\nexport type ConnectorRenderData = {\n  key: string;\n  start: IAnnotationPoint;\n  end: IAnnotationPoint;\n  strokeColor: string;\n  strokeWidth: number;\n  dashArray?: string;\n  arrow: ChartAnnotationArrowHead;\n  markerSize: number;\n  markerStrokeWidth: number;\n};\n"]}

package/lib/components/CommonComponents/CartesianChart.base.js

@@ -8,6 +8,7 @@ import { formatToLocaleString } from '@fluentui/chart-utilities';
 import { createNumericXAxis, createStringXAxis, getAccessibleDataObject, createDateXAxis, XAxisTypes, YAxisType, createWrapOfXLabels, rotateXAxisLabels, Points, pointTypes, calculateLongestLabelWidth, createYAxisLabels, ChartTypes, wrapContent, getSecureProps, truncateString, tooltipOfAxislabels, DEFAULT_WRAP_WIDTH, } from '../../utilities/index';
 import { Shape } from '../Legends/index';
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
+import { ChartAnnotationLayer } from './Annotations/ChartAnnotationLayer';
 var getClassNames = classNamesFunction();
 var ChartHoverCard = React.lazy(function () {
     return import('../../utilities/ChartHoverCard/ChartHoverCard').then(function (module) { return ({ default: module.ChartHoverCard }); });
@@ -302,8 +303,8 @@ var CartesianChartBase = /** @class */ (function (_super) {
     CartesianChartBase.prototype.render = function () {
         var _a, _b, _c, _d;
         var _this = this;
-        var _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        var _p = this.props, calloutProps = _p.calloutProps, points = _p.points, chartType = _p.chartType, chartHoverProps = _p.chartHoverProps, svgFocusZoneProps = _p.svgFocusZoneProps, svgProps = _p.svgProps, culture = _p.culture, dateLocalizeOptions = _p.dateLocalizeOptions, timeFormatLocale = _p.timeFormatLocale, customDateTimeFormatter = _p.customDateTimeFormatter;
+        var _e, _f, _g, _h, _j, _k;
+        var _l = this.props, calloutProps = _l.calloutProps, points = _l.points, chartType = _l.chartType, chartHoverProps = _l.chartHoverProps, svgFocusZoneProps = _l.svgFocusZoneProps, svgProps = _l.svgProps, culture = _l.culture, dateLocalizeOptions = _l.dateLocalizeOptions, timeFormatLocale = _l.timeFormatLocale, customDateTimeFormatter = _l.customDateTimeFormatter;
         if (this.props.parentRef) {
             this._fitParentContainer();
         }
@@ -329,36 +330,24 @@ var CartesianChartBase = /** @class */ (function (_super) {
         });
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         var callout = null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var yScalePrimary;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var yScaleSecondary;
         var children = null;
         if ((this.props.enableFirstRenderOptimization && this.chartContainer) ||
             !this.props.enableFirstRenderOptimization) {
             this._isFirstRender = false;
-            var XAxisParams = {
-                domainNRangeValues: this.props.getDomainNRangeValues(points, this.props.getDomainMargins ? this.props.getDomainMargins(this.state.containerWidth) : this.margins, this.state.containerWidth, chartType, this._isRtl, this.props.xAxisType, this.props.barwidth, this.props.tickValues, 
+            var XAxisParams = __assign({ domainNRangeValues: this.props.getDomainNRangeValues(points, this.props.getDomainMargins ? this.props.getDomainMargins(this.state.containerWidth) : this.margins, this.state.containerWidth, chartType, this._isRtl, this.props.xAxisType, this.props.barwidth, this.props.tickValues, 
                 // This is only used for Horizontal Bar Chart with Axis for y as string axis
-                this.state.startFromX),
+                this.state.startFromX), 
                 // FIXME: In XAxisParams, containerHeight is used by HBWA to generate vertical gridlines.
                 // Since the x-axis in HBWA is numeric, it typically doesn't require transformation.
                 // However, if transformation props are enabled, the updated _removalValueForTextTuncate
                 // will only be available in the next render, as it's set after the axis is created.
                 // Solution: Delay the creation of gridlines until after the transformation has been applied,
                 // or precompute the required height for transformed labels (_removalValueForTextTuncate).
-                containerHeight: this.state.containerHeight - this._removalValueForTextTuncate,
-                margins: this.margins,
-                xAxisElement: this.xAxisElement,
-                showRoundOffXTickValues: (_e = this.props.showRoundOffXTickValues) !== null && _e !== void 0 ? _e : true,
-                xAxisCount: this.props.xAxisTickCount,
-                xAxistickSize: this.props.xAxistickSize,
-                tickPadding: this.props.tickPadding || this.props.showXAxisLablesTooltip ? 5 : 10,
-                xAxisPadding: this.props.xAxisPadding,
-                xAxisInnerPadding: this.props.xAxisInnerPadding,
-                xAxisOuterPadding: this.props.xAxisOuterPadding,
-                containerWidth: this.state.containerWidth,
-                hideTickOverlap: this.props.hideTickOverlap,
-                calcMaxLabelWidth: this._calcMaxLabelWidthWithTransform,
-                tickStep: (_f = this.props.xAxis) === null || _f === void 0 ? void 0 : _f.tickStep,
-                tick0: (_g = this.props.xAxis) === null || _g === void 0 ? void 0 : _g.tick0,
-            };
+                containerHeight: this.state.containerHeight - this._removalValueForTextTuncate, margins: this.margins, xAxisElement: this.xAxisElement, showRoundOffXTickValues: (_e = this.props.showRoundOffXTickValues) !== null && _e !== void 0 ? _e : true, xAxisCount: this.props.xAxisTickCount, xAxistickSize: this.props.xAxistickSize, tickPadding: this.props.tickPadding || this.props.showXAxisLablesTooltip ? 5 : 10, xAxisPadding: this.props.xAxisPadding, xAxisInnerPadding: this.props.xAxisInnerPadding, xAxisOuterPadding: this.props.xAxisOuterPadding, containerWidth: this.state.containerWidth, hideTickOverlap: this.props.hideTickOverlap, calcMaxLabelWidth: this._calcMaxLabelWidthWithTransform }, this.props.xAxis);
             /**
              * These scales used for 2 purposes.
              * 1. To create x and y axis
@@ -384,36 +373,17 @@ var CartesianChartBase = /** @class */ (function (_super) {
             this._xScale = xScale;
             this._tickValues = tickValues;
             this._transformXAxisLabels();
-            var YAxisParams = {
-                margins: this.props.getYDomainMargins ? this.props.getYDomainMargins(this.state.containerHeight) : this.margins,
-                containerWidth: this.state.containerWidth,
-                containerHeight: this.state.containerHeight - this._removalValueForTextTuncate,
-                yAxisElement: this.yAxisElement,
-                yAxisTickFormat: this.props.yAxisTickFormat,
-                yAxisTickCount: this.props.yAxisTickCount,
-                yMinValue: this.props.yMinValue || 0,
-                yMaxValue: this.props.yMaxValue || 0,
-                tickPadding: 10,
-                maxOfYVal: this.props.maxOfYVal,
-                yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType),
+            var YAxisParams = __assign({ margins: this.props.getYDomainMargins ? this.props.getYDomainMargins(this.state.containerHeight) : this.margins, containerWidth: this.state.containerWidth, containerHeight: this.state.containerHeight - this._removalValueForTextTuncate, yAxisElement: this.yAxisElement, yAxisTickFormat: this.props.yAxisTickFormat, yAxisTickCount: this.props.yAxisTickCount, yMinValue: this.props.yMinValue || 0, yMaxValue: this.props.yMaxValue || 0, tickPadding: 10, maxOfYVal: this.props.maxOfYVal, yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType), 
                 // please note these padding default values must be consistent in here
                 // and the parent chart(HBWA/Vertical etc..) for more details refer example
                 // http://using-d3js.com/04_07_ordinal_scales.html
-                yAxisPadding: this.props.yAxisPadding || 0,
-                tickValues: this.props.yAxisTickValues,
-                tickStep: (_h = this.props.yAxis) === null || _h === void 0 ? void 0 : _h.tickStep,
-                tick0: (_j = this.props.yAxis) === null || _j === void 0 ? void 0 : _j.tick0,
-            };
+                yAxisPadding: this.props.yAxisPadding || 0, tickValues: this.props.yAxisTickValues }, this.props.yAxis);
             /**
              * These scales used for 2 purposes.
              * 1. To create x and y axis
              * 2. To draw the graph.
              * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
              */
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var yScalePrimary = void 0;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var yScaleSecondary = void 0;
             var axisData = { yAxisDomainValues: [] };
             if (this.props.yAxisType && this.props.yAxisType === YAxisType.StringAxis) {
                 yScalePrimary = this.props.createStringYAxis(YAxisParams, this.props.stringDatasetForYAxisDomain, this._isRtl, this.props.barwidth, this.props.chartType);
@@ -424,7 +394,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                 // rendering the secondary y-axis. Therefore, rather than checking the secondaryYScaleOptions
                 // prop to determine whether to create a secondary y-axis, it's more appropriate to check if any
                 // data points are assigned to use the secondary y-scale.
-                if ((_k = this.props) === null || _k === void 0 ? void 0 : _k.secondaryYScaleOptions) {
+                if ((_f = this.props) === null || _f === void 0 ? void 0 : _f.secondaryYScaleOptions) {
                     var YAxisParamsSecondary = {
                         margins: this.margins,
                         containerWidth: this.state.containerWidth,
@@ -432,8 +402,8 @@ var CartesianChartBase = /** @class */ (function (_super) {
                         yAxisElement: this.yAxisElementSecondary,
                         yAxisTickFormat: this.props.yAxisTickFormat,
                         yAxisTickCount: this.props.yAxisTickCount,
-                        yMinValue: ((_l = this.props.secondaryYScaleOptions) === null || _l === void 0 ? void 0 : _l.yMinValue) || 0,
-                        yMaxValue: (_o = (_m = this.props.secondaryYScaleOptions) === null || _m === void 0 ? void 0 : _m.yMaxValue) !== null && _o !== void 0 ? _o : 100,
+                        yMinValue: ((_g = this.props.secondaryYScaleOptions) === null || _g === void 0 ? void 0 : _g.yMinValue) || 0,
+                        yMaxValue: (_j = (_h = this.props.secondaryYScaleOptions) === null || _h === void 0 ? void 0 : _h.yMaxValue) !== null && _j !== void 0 ? _j : 100,
                         tickPadding: 10,
                         yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType, true),
                         yAxisPadding: this.props.yAxisPadding,
@@ -487,6 +457,27 @@ var CartesianChartBase = /** @class */ (function (_super) {
             width: this.state.containerWidth,
             height: this.state.containerHeight,
         };
+        var startFromX = this.state.startFromX || 0;
+        var plotWidth = Math.max(0, svgDimensions.width - this.margins.left - this.margins.right - startFromX);
+        var plotHeight = Math.max(0, svgDimensions.height - this.margins.top - this.margins.bottom - this._removalValueForTextTuncate);
+        var plotRect = {
+            x: this._isRtl ? this.margins.left : this.margins.left + startFromX,
+            y: this.margins.top,
+            width: plotWidth,
+            height: plotHeight,
+        };
+        var annotations = (_k = this.props.annotations) !== null && _k !== void 0 ? _k : [];
+        var hasAnnotations = annotations.length > 0;
+        var annotationContext = hasAnnotations
+            ? {
+                plotRect: plotRect,
+                svgRect: svgDimensions,
+                isRtl: this._isRtl,
+                xScale: this._xScale,
+                yScalePrimary: yScalePrimary,
+                yScaleSecondary: yScaleSecondary,
+            }
+            : undefined;
         var focusDirection;
         if (this.props.focusZoneDirection === FocusZoneDirection.vertical) {
             focusDirection = this.props.focusZoneDirection;
@@ -599,7 +590,8 @@ var CartesianChartBase = /** @class */ (function (_super) {
                                 : this.margins.right / 2 + this.titleMargin, ",\n                   ").concat(svgDimensions.height - this.margins.bottom - this.margins.top - this.titleMargin, ")rotate(-90)"),
                             className: this._classNames.axisAnnotation,
                             'aria-hidden': true,
-                        }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps))))),
+                        }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps)))),
+                hasAnnotations && annotationContext && (React.createElement(ChartAnnotationLayer, { annotations: annotations, context: annotationContext, theme: this.props.theme, className: this._classNames.annotationLayer }))),
             !this.props.hideLegend && (React.createElement("div", { ref: function (e) { return (_this.legendContainer = e); }, className: this._classNames.legendContainer }, this.props.legendBars)),
             callout && React.createElement(React.Suspense, { fallback: React.createElement("div", null, "Loading...") }, callout)));
     };