@fluentui/react-charts 9.3.4 → 9.3.6

package/lib/components/CommonComponents/CartesianChart.js

@@ -5,25 +5,29 @@ import { select as d3Select } from 'd3-selection';
 import { createNumericXAxis, createStringXAxis, createDateXAxis, XAxisTypes, YAxisType, createWrapOfXLabels, rotateXAxisLabels, calculateLongestLabelWidth, createYAxisLabels, ChartTypes, wrapContent, useRtl, truncateString, tooltipOfAxislabels, getSecureProps, DEFAULT_WRAP_WIDTH } from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
+import { ChartAnnotationLayer } from './Annotations/ChartAnnotationLayer';
 import { ChartPopover } from './ChartPopover';
 import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';
+const HORIZONTAL_MARGIN_FOR_YAXIS_TITLE = 24;
+const VERTICAL_MARGIN_FOR_XAXIS_TITLE = 20;
+const AXIS_TITLE_PADDING = 8;
+const DEFAULT_MARGIN_WITH_TICKS = 40;
+const DEFAULT_MARGIN_NO_TICKS = 20;
 /**
  * Cartesian Chart component
  * {@docCategory CartesianChart}
- */ export const CartesianChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
-    var _props_margins, _props_margins1, _props_margins2, _props_margins3, _props_margins4, _props_margins5;
-    const chartContainer = React.useRef();
+ */ export const CartesianChart = /*#__PURE__*/ React.forwardRef(({ hideTickOverlap = true, ...props }, forwardedRef)=>{
+    const chartContainer = React.useRef(null);
     let legendContainer;
     const minLegendContainerHeight = 40;
-    const xAxisElement = React.useRef();
-    const yAxisElement = React.useRef();
-    const yAxisElementSecondary = React.useRef();
+    const xAxisElement = React.useRef(null);
+    const yAxisElement = React.useRef(null);
+    const yAxisElementSecondary = React.useRef(null);
     let margins;
     const idForGraph = 'chart_';
     let _reqID;
     const _useRtl = useRtl();
     let _tickValues;
-    const titleMargin = 8;
     const _isFirstRender = React.useRef(true);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _xScale;
@@ -39,60 +43,12 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
    * These value need to be removed from actual svg height/graph height.
    * Defalut value is 0. And this values calculted when 'wrapXAxisLables' or 'showXAxisLablesTooltip' is true.
    */ let _removalValueForTextTuncate = 0;
+    const _yAxisTickText = React.useRef([]);
     const [containerWidth, setContainerWidth] = React.useState(0);
     const [containerHeight, setContainerHeight] = React.useState(0);
     const [startFromX, setStartFromX] = React.useState(0);
-    const [prevProps, setPrevProps] = React.useState(null);
-    const chartTypesWithStringYAxis = [
-        ChartTypes.HorizontalBarChartWithAxis,
-        ChartTypes.HeatMapChart,
-        ChartTypes.VerticalStackedBarChart,
-        ChartTypes.GanttChart,
-        ChartTypes.ScatterChart
-    ];
-    var _props_margins_top, _props_margins_bottom, _props_margins_left, _props_margins_right, _props_margins_right1, _props_margins_left1;
-    /**
-   * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.
-   * So that, in RTL, left margins becomes right margins and viceversa.
-   * As graph needs to be drawn perfecty, these values consider as default values.
-   * Same margins using for all other cartesian charts. Can be accessible through 'getMargins' call back method.
-   */ // eslint-disable-next-line prefer-const
-    margins = {
-        top: (_props_margins_top = (_props_margins = props.margins) === null || _props_margins === void 0 ? void 0 : _props_margins.top) !== null && _props_margins_top !== void 0 ? _props_margins_top : 20,
-        bottom: (_props_margins_bottom = (_props_margins1 = props.margins) === null || _props_margins1 === void 0 ? void 0 : _props_margins1.bottom) !== null && _props_margins_bottom !== void 0 ? _props_margins_bottom : 35,
-        right: _useRtl ? (_props_margins_left = (_props_margins2 = props.margins) === null || _props_margins2 === void 0 ? void 0 : _props_margins2.left) !== null && _props_margins_left !== void 0 ? _props_margins_left : 40 : ((_props_margins_right = (_props_margins3 = props.margins) === null || _props_margins3 === void 0 ? void 0 : _props_margins3.right) !== null && _props_margins_right !== void 0 ? _props_margins_right : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20,
-        left: _useRtl ? ((_props_margins_right1 = (_props_margins4 = props.margins) === null || _props_margins4 === void 0 ? void 0 : _props_margins4.right) !== null && _props_margins_right1 !== void 0 ? _props_margins_right1 : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20 : (_props_margins_left1 = (_props_margins5 = props.margins) === null || _props_margins5 === void 0 ? void 0 : _props_margins5.left) !== null && _props_margins_left1 !== void 0 ? _props_margins_left1 : 40
-    };
-    const TITLE_MARGIN_HORIZONTAL = 24;
-    const TITLE_MARGIN_VERTICAL = 20;
-    if (props.xAxisTitle !== undefined && props.xAxisTitle !== '') {
-        var _props_margins6;
-        var _props_margins_bottom1;
-        margins.bottom = (_props_margins_bottom1 = (_props_margins6 = props.margins) === null || _props_margins6 === void 0 ? void 0 : _props_margins6.bottom) !== null && _props_margins_bottom1 !== void 0 ? _props_margins_bottom1 : margins.bottom + TITLE_MARGIN_VERTICAL;
-    }
-    if (props.yAxisTitle !== undefined && props.yAxisTitle !== '') {
-        var _props_margins7, _props_margins8, _props_margins9, _props_margins10;
-        var _props_margins_right2, _props_margins_left2;
-        margins.left = _useRtl ? ((_props_margins_right2 = (_props_margins7 = props.margins) === null || _props_margins7 === void 0 ? void 0 : _props_margins7.right) !== null && _props_margins_right2 !== void 0 ? _props_margins_right2 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN_HORIZONTAL : margins.right + TITLE_MARGIN_HORIZONTAL : (_props_margins_left2 = (_props_margins8 = props.margins) === null || _props_margins8 === void 0 ? void 0 : _props_margins8.left) !== null && _props_margins_left2 !== void 0 ? _props_margins_left2 : margins.left + TITLE_MARGIN_HORIZONTAL;
-        var _props_margins_left3, _props_margins_right3;
-        margins.right = _useRtl ? (_props_margins_left3 = (_props_margins9 = props.margins) === null || _props_margins9 === void 0 ? void 0 : _props_margins9.left) !== null && _props_margins_left3 !== void 0 ? _props_margins_left3 : margins.left + TITLE_MARGIN_HORIZONTAL : ((_props_margins_right3 = (_props_margins10 = props.margins) === null || _props_margins10 === void 0 ? void 0 : _props_margins10.right) !== null && _props_margins_right3 !== void 0 ? _props_margins_right3 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN_HORIZONTAL : margins.right + TITLE_MARGIN_HORIZONTAL;
-    }
-    if (props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '') {
-        var _props_margins11;
-        var _props_margins_top1;
-        margins.top = (_props_margins_top1 = (_props_margins11 = props.margins) === null || _props_margins11 === void 0 ? void 0 : _props_margins11.top) !== null && _props_margins_top1 !== void 0 ? _props_margins_top1 : margins.top + TITLE_MARGIN_VERTICAL;
-    }
-    if (props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '')) {
-        if (_useRtl) {
-            var _props_margins12;
-            var _props_margins_right4;
-            margins.left = (_props_margins_right4 = (_props_margins12 = props.margins) === null || _props_margins12 === void 0 ? void 0 : _props_margins12.right) !== null && _props_margins_right4 !== void 0 ? _props_margins_right4 : margins.right + TITLE_MARGIN_HORIZONTAL;
-        } else {
-            var _props_margins13;
-            var _props_margins_right5;
-            margins.right = (_props_margins_right5 = (_props_margins13 = props.margins) === null || _props_margins13 === void 0 ? void 0 : _props_margins13.right) !== null && _props_margins_right5 !== void 0 ? _props_margins_right5 : margins.right + TITLE_MARGIN_HORIZONTAL;
-        }
-    }
+    const prevWidthRef = React.useRef(undefined);
+    const prevHeightRef = React.useRef(undefined);
     const classes = useCartesianChartStyles(props);
     const focusAttributes = useFocusableGroup();
     const arrowAttributes = useArrowNavigationGroup({
@@ -101,10 +57,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     // ComponentdidMount and Componentwillunmount logic
     React.useEffect(()=>{
         _fitParentContainer();
-        if (props !== null) {
-            setPrevProps(props);
-        }
-        if (chartTypesWithStringYAxis.includes(props.chartType) && props.showYAxisLables && yAxisElement && props.yAxisType === YAxisType.StringAxis) {
+        if (props.showYAxisLables) {
             const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis);
             if (startFromX !== maxYAxisLabelLength) {
                 setStartFromX(maxYAxisLabelLength);
@@ -122,12 +75,14 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     ]);
     // ComponentDidUpdate logic
     React.useEffect(()=>{
-        if (prevProps) {
-            if (prevProps.height !== props.height || prevProps.width !== props.width) {
-                _fitParentContainer();
-            }
+        // Check if height or width changed
+        if (prevWidthRef.current !== undefined && prevHeightRef.current !== undefined && (prevWidthRef.current !== props.width || prevHeightRef.current !== props.height)) {
+            _fitParentContainer();
         }
-        if (chartTypesWithStringYAxis.includes(props.chartType) && props.showYAxisLables && yAxisElement && props.yAxisType === YAxisType.StringAxis) {
+        // Update refs with current values
+        prevWidthRef.current = props.width;
+        prevHeightRef.current = props.height;
+        if (props.showYAxisLables) {
             const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis);
             if (startFromX !== maxYAxisLabelLength) {
                 setStartFromX(maxYAxisLabelLength);
@@ -136,8 +91,11 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             setStartFromX(0);
         }
     }, [
-        props,
-        prevProps
+        props.width,
+        props.height,
+        props.chartType,
+        props.showYAxisLables,
+        props.yAxisType
     ]);
     React.useImperativeHandle(props.componentRef, ()=>{
         var _chartContainer_current;
@@ -162,33 +120,26 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             }
             return str;
         };
-        return calculateLongestLabelWidth(props.stringDatasetForYAxisDomain.map((label)=>formatTickLabel(label)), `.${className} text`);
+        return calculateLongestLabelWidth(_yAxisTickText.current.map((label)=>formatTickLabel(label)), `.${className} text`);
     }
     const { calloutProps, points, chartType, svgProps, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter } = props;
     if (props.parentRef) {
         _fitParentContainer();
     }
-    const margin = {
-        ...margins
-    };
-    // Note: This check is unnecessary since startFromX is only set for charts with string y-axis.
-    if (chartTypesWithStringYAxis.includes(props.chartType)) {
-        if (!_useRtl) {
-            margin.left += startFromX;
-        } else {
-            margin.right += startFromX;
-        }
-    }
+    margins = _calcMargins();
     // Callback for margins to the chart
-    props.getmargins && props.getmargins(margin);
+    props.getmargins && props.getmargins(margins);
     let callout = null;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let yScalePrimary;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let yScaleSecondary;
     let children = null;
     if (props.enableFirstRenderOptimization && chartContainer.current || !props.enableFirstRenderOptimization) {
         _isFirstRender.current = false;
         var _props_showRoundOffXTickValues;
         const XAxisParams = {
-            domainNRangeValues: props.getDomainNRangeValues(points, props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins, containerWidth, chartType, _useRtl, props.xAxisType, props.barwidth, props.tickValues, // This is only used for Horizontal Bar Chart with Axis for y as string axis
-            startFromX),
+            domainNRangeValues: props.getDomainNRangeValues(points, props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins, containerWidth, chartType, _useRtl, props.xAxisType, props.barwidth, props.tickValues),
             // 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
@@ -206,7 +157,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             xAxisInnerPadding: props.xAxisInnerPadding,
             xAxisOuterPadding: props.xAxisOuterPadding,
             containerWidth: containerWidth,
-            hideTickOverlap: props.rotateXAxisLables ? false : props.hideTickOverlap,
+            hideTickOverlap: props.rotateXAxisLables ? false : hideTickOverlap,
             calcMaxLabelWidth: _calcMaxLabelWidthWithTransform,
             ...props.xAxis
         };
@@ -258,15 +209,12 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
      * 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
-        let yScalePrimary;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let yScaleSecondary;
-        const axisData = {
-            yAxisDomainValues: []
+     */ const axisData = {
+            yAxisDomainValues: [],
+            yAxisTickText: []
         };
         if (props.yAxisType && props.yAxisType === YAxisType.StringAxis) {
-            yScalePrimary = props.createStringYAxis(YAxisParams, props.stringDatasetForYAxisDomain, _useRtl, props.barwidth, props.chartType);
+            yScalePrimary = props.createStringYAxis(YAxisParams, props.stringDatasetForYAxisDomain, _useRtl, axisData, props.barwidth, props.chartType);
         } else {
             // TODO: Since the scale domain values are now computed independently for both the primary and
             // secondary y-axes, the yMinValue and yMaxValue props are no longer necessary for accurately
@@ -293,42 +241,41 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             }
             yScalePrimary = props.createYAxis(YAxisParams, _useRtl, axisData, isIntegralDataset, chartType, false, props.roundedTicks, props.yScaleType, _useRtl);
         }
-        if (chartTypesWithStringYAxis.includes(props.chartType) && props.yAxisType === YAxisType.StringAxis) {
-            // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
-            // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
-            // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with _tooltipId)
-            if (!props.showYAxisLablesTooltip) {
-                try {
-                    document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-                //eslint-disable-next-line no-empty
-                } catch (e) {}
-            }
-            // Used to display tooltip at y axis labels.
-            if (props.showYAxisLablesTooltip) {
-                // To create y axis tick values by if specified truncating the rest of the text
-                // and showing elipsis or showing the whole string,
-                yScalePrimary && // Note: This function should be invoked within the showYAxisLablesTooltip check,
-                // as its sole purpose is to truncate labels that exceed the noOfCharsToTruncate limit.
-                createYAxisLabels(yAxisElement.current, yScalePrimary, props.noOfCharsToTruncate || 4, props.showYAxisLablesTooltip || false, _useRtl);
-                const _yAxisElement = d3Select(yAxisElement.current).call(yScalePrimary);
-                try {
-                    document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-                //eslint-disable-next-line no-empty
-                } catch (e) {}
-                const ytooltipProps = {
-                    tooltipCls: classes.tooltip,
-                    id: _tooltipId,
-                    axis: _yAxisElement
-                };
-                _yAxisElement && tooltipOfAxislabels(ytooltipProps);
-            }
+        _yAxisTickText.current = axisData.yAxisTickText;
+        props.getAxisData && props.getAxisData(axisData);
+        // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
+        // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
+        // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with _tooltipId)
+        if (!props.showYAxisLablesTooltip) {
+            try {
+                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+            //eslint-disable-next-line no-empty
+            } catch (e) {}
+        }
+        // Used to display tooltip at y axis labels.
+        if (props.showYAxisLablesTooltip) {
+            // To create y axis tick values by if specified truncating the rest of the text
+            // and showing elipsis or showing the whole string,
+            yScalePrimary && // Note: This function should be invoked within the showYAxisLablesTooltip check,
+            // as its sole purpose is to truncate labels that exceed the noOfCharsToTruncate limit.
+            createYAxisLabels(yAxisElement.current, yScalePrimary, props.noOfCharsToTruncate || 4, props.showYAxisLablesTooltip || false, _useRtl);
+            const _yAxisElement = d3Select(yAxisElement.current).call(yScalePrimary);
+            try {
+                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+            //eslint-disable-next-line no-empty
+            } catch (e) {}
+            const ytooltipProps = {
+                tooltipCls: classes.tooltip,
+                id: _tooltipId,
+                axis: _yAxisElement
+            };
+            _yAxisElement && tooltipOfAxislabels(ytooltipProps);
         }
         // Call back to the chart.
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const _getData = (xScale, yScalePrimary, yScaleSecondary)=>{
             props.getGraphData && props.getGraphData(xScale, yScalePrimary, containerHeight - _removalValueForTextTuncate, containerWidth, xAxisElement.current, yAxisElement.current, yScaleSecondary);
         };
-        props.getAxisData && props.getAxisData(axisData);
         // Callback function for chart, returns axis
         _getData(xScale, yScalePrimary, yScaleSecondary);
         children = props.children({
@@ -346,8 +293,30 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         width: containerWidth,
         height: containerHeight
     };
-    const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left - margins.right - startFromX;
-    const yAxisTitleMaximumAllowedHeight = svgDimensions.height - margins.bottom - margins.top - _removalValueForTextTuncate - titleMargin;
+    const plotWidth = Math.max(0, svgDimensions.width - margins.left - margins.right);
+    const plotHeight = Math.max(0, svgDimensions.height - margins.top - margins.bottom - _removalValueForTextTuncate);
+    const plotRect = {
+        x: margins.left,
+        y: margins.top,
+        width: plotWidth,
+        height: plotHeight
+    };
+    var _props_annotations;
+    const annotations = (_props_annotations = props.annotations) !== null && _props_annotations !== void 0 ? _props_annotations : [];
+    const hasAnnotations = annotations.length > 0;
+    const annotationContext = hasAnnotations ? {
+        plotRect,
+        svgRect: svgDimensions,
+        isRtl: _useRtl,
+        xScale: _xScale,
+        yScalePrimary,
+        yScaleSecondary
+    } : undefined;
+    const xAxisTitleMaxWidth = svgDimensions.width - margins.left - margins.right - AXIS_TITLE_PADDING * 2;
+    const yAxisTitleMaxHeight = svgDimensions.height - margins.bottom - margins.top - _removalValueForTextTuncate - AXIS_TITLE_PADDING * 2;
+    const yAxisTitleCenterY = margins.top + AXIS_TITLE_PADDING + yAxisTitleMaxHeight / 2;
+    const yAxisTitleCenterX = _useRtl ? svgDimensions.width - AXIS_TITLE_PADDING : HORIZONTAL_MARGIN_FOR_YAXIS_TITLE - AXIS_TITLE_PADDING;
+    const secondaryYAxisTitleCenterX = _useRtl ? HORIZONTAL_MARGIN_FOR_YAXIS_TITLE - AXIS_TITLE_PADDING : svgDimensions.width - AXIS_TITLE_PADDING;
     const commonSvgToolTipProps = {
         wrapContent,
         showBackground: true,
@@ -467,6 +436,64 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             _removalValueForTextTuncate = rotatedHeight + margins.bottom;
         }
     }
+    function _calcMargins() {
+        let _margins = _getDefaultMargins();
+        _margins = _applyTitleMargins(_margins);
+        _margins = _applyAnnotationMargins(_margins);
+        if (_useRtl) {
+            _margins = _swapRtlMargins(_margins);
+        }
+        return {
+            ..._margins,
+            ...props.margins
+        };
+    }
+    function _getDefaultMargins() {
+        return {
+            top: DEFAULT_MARGIN_NO_TICKS,
+            // Smaller than the default because it is based on the line height rather than
+            // the length of the tick labels.
+            bottom: DEFAULT_MARGIN_WITH_TICKS - 5,
+            // For the actual margin, add the tick size, tick padding, and some extra space to
+            // the width of the longest yaxis tick label (startFromX).
+            left: Math.max(DEFAULT_MARGIN_WITH_TICKS, startFromX + 20),
+            right: props.secondaryYScaleOptions ? DEFAULT_MARGIN_WITH_TICKS : DEFAULT_MARGIN_NO_TICKS
+        };
+    }
+    function _applyTitleMargins(_margins) {
+        const updated = {
+            ..._margins
+        };
+        if (props.xAxisTitle !== undefined && props.xAxisTitle !== '') {
+            updated.bottom += VERTICAL_MARGIN_FOR_XAXIS_TITLE;
+        }
+        if (props.yAxisTitle !== undefined && props.yAxisTitle !== '') {
+            updated.left += HORIZONTAL_MARGIN_FOR_YAXIS_TITLE;
+        }
+        if (props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '') {
+            updated.right += HORIZONTAL_MARGIN_FOR_YAXIS_TITLE;
+        }
+        return updated;
+    }
+    function _applyAnnotationMargins(_margins) {
+        const updated = {
+            ..._margins
+        };
+        if (props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '') {
+            updated.top += VERTICAL_MARGIN_FOR_XAXIS_TITLE;
+        }
+        if (props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '')) {
+            updated.right += HORIZONTAL_MARGIN_FOR_YAXIS_TITLE;
+        }
+        return updated;
+    }
+    function _swapRtlMargins(_margins) {
+        return {
+            ..._margins,
+            left: _margins.right,
+            right: _margins.left
+        };
+    }
     /**
    * We have use the {@link defaultTabbableElement } to fix
    * the Focus not landing on chart while tabbing, instead  goes to legend.
@@ -489,7 +516,9 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         id: idForGraph,
         className: classes.root,
         role: 'presentation',
-        ref: (rootElem)=>chartContainer.current = rootElem,
+        ref: (rootElem)=>{
+            chartContainer.current = rootElem;
+        },
         onMouseLeave: _onChartLeave
     }, /*#__PURE__*/ React.createElement("div", {
         className: classes.chartWrapper,
@@ -516,82 +545,82 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         ...commonSvgToolTipProps,
         content: props.xAxisTitle,
         textProps: {
-            x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
-            y: svgDimensions.height - titleMargin,
+            x: margins.left + AXIS_TITLE_PADDING + xAxisTitleMaxWidth / 2,
+            y: svgDimensions.height - AXIS_TITLE_PADDING,
             className: classes.axisTitle,
             textAnchor: 'middle'
         },
-        maxWidth: xAxisTitleMaximumAllowedWidth
+        maxWidth: xAxisTitleMaxWidth
     }), props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '' && /*#__PURE__*/ React.createElement(SVGTooltipText, {
         ...commonSvgToolTipProps,
         content: props.xAxisAnnotation,
         textProps: {
-            x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
-            y: titleMargin + 3,
+            x: margins.left + AXIS_TITLE_PADDING + xAxisTitleMaxWidth / 2,
+            y: VERTICAL_MARGIN_FOR_XAXIS_TITLE - AXIS_TITLE_PADDING,
             className: classes.axisAnnotation,
             textAnchor: 'middle',
             'aria-hidden': true
         },
-        maxWidth: xAxisTitleMaximumAllowedWidth
+        maxWidth: xAxisTitleMaxWidth
     }), /*#__PURE__*/ React.createElement("g", {
         ref: (e)=>{
             yAxisElement.current = e;
         },
         id: `yAxisGElement${idForGraph}`,
-        transform: `translate(${_useRtl ? svgDimensions.width - margins.right - startFromX : margins.left + startFromX}, 0)`,
+        transform: `translate(${_useRtl ? svgDimensions.width - margins.right : margins.left}, 0)`,
         className: classes.yAxis
     }), props.secondaryYScaleOptions && /*#__PURE__*/ React.createElement("g", null, /*#__PURE__*/ React.createElement("g", {
         ref: (e)=>{
             yAxisElementSecondary.current = e;
         },
         id: `yAxisGElementSecondary${idForGraph}`,
-        transform: `translate(${_useRtl ? margins.left + startFromX : svgDimensions.width - margins.right - startFromX}, 0)`,
+        transform: `translate(${_useRtl ? margins.left : svgDimensions.width - margins.right}, 0)`,
         className: classes.yAxis
     }), props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && /*#__PURE__*/ React.createElement(SVGTooltipText, {
         ...commonSvgToolTipProps,
         content: props.secondaryYAxistitle,
         textProps: {
-            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
-            y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right,
+            x: secondaryYAxisTitleCenterX,
+            y: yAxisTitleCenterY,
             textAnchor: 'middle',
-            transform: `translate(${_useRtl ? margins.right / 2 - titleMargin : margins.right / 2 + titleMargin},
-                 ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
+            transform: `rotate(-90, ${secondaryYAxisTitleCenterX}, ${yAxisTitleCenterY})`,
             className: classes.axisTitle
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight
+        maxWidth: yAxisTitleMaxHeight
     })), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ React.createElement(SVGTooltipText, {
         ...commonSvgToolTipProps,
         content: props.yAxisTitle,
         textProps: {
-            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
-            y: _useRtl ? svgDimensions.width - margins.right / 2 + titleMargin : margins.left / 2 - titleMargin,
+            x: yAxisTitleCenterX,
+            y: yAxisTitleCenterY,
             textAnchor: 'middle',
-            transform: `translate(0,
-                 ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
+            transform: `rotate(-90, ${yAxisTitleCenterX}, ${yAxisTitleCenterY})`,
             className: classes.axisTitle
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight
+        maxWidth: yAxisTitleMaxHeight
     }), props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '') && /*#__PURE__*/ React.createElement(SVGTooltipText, {
         ...commonSvgToolTipProps,
         content: props.yAxisAnnotation,
         textProps: {
-            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
-            y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right,
+            x: secondaryYAxisTitleCenterX,
+            y: yAxisTitleCenterY,
             textAnchor: 'middle',
-            transform: `translate(${_useRtl ? margins.right / 2 - titleMargin : margins.right / 2 + titleMargin},
-                   ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
+            transform: `rotate(-90, ${secondaryYAxisTitleCenterX}, ${yAxisTitleCenterY})`,
             className: classes.axisAnnotation,
             'aria-hidden': true
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight
-    }))), !props.hideLegend && /*#__PURE__*/ React.createElement("div", {
-        ref: (e)=>legendContainer = e,
+        maxWidth: yAxisTitleMaxHeight
+    })), hasAnnotations && annotationContext && /*#__PURE__*/ React.createElement(ChartAnnotationLayer, {
+        annotations: annotations,
+        context: annotationContext,
+        className: classes.annotationLayer
+    })), !props.hideLegend && /*#__PURE__*/ React.createElement("div", {
+        ref: (e)=>{
+            legendContainer = e;
+        },
         className: classes.legendContainer
     }, props.legendBars), callout && /*#__PURE__*/ React.createElement(React.Suspense, {
         fallback: /*#__PURE__*/ React.createElement("div", null, "Loading...")
     }, callout));
 });
 CartesianChart.displayName = 'CartesianChart';
-CartesianChart.defaultProps = {
-    hideTickOverlap: true
-};