@fluentui/react-charting 5.24.4 → 5.24.6

package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js

@@ -1,26 +1,16 @@
-define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function (require, exports, tslib_1, Styling_1) {
+define(["require", "exports", "../../utilities/index"], function (require, exports, index_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getStyles = void 0;
     var getStyles = function (props) {
-        var _a;
         var shouldHighlight = props.shouldHighlight, href = props.href, theme = props.theme;
         return {
             opacityChangeOnHover: {
                 opacity: shouldHighlight ? '' : '0.1',
                 cursor: href ? 'pointer' : 'default',
             },
-            tooltip: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: theme.semanticColors.bodyText }),
-            barLabel: {
-                fontSize: Styling_1.FontSizes.small,
-                fontWeight: Styling_1.FontWeights.semibold,
-                fill: theme.palette.neutralPrimary,
-                selectors: (_a = {},
-                    _a[Styling_1.HighContrastSelector] = {
-                        fill: 'CanvasText',
-                    },
-                    _a),
-            },
+            tooltip: (0, index_1.getTooltipStyle)(theme),
+            barLabel: (0, index_1.getBarLabelStyle)(theme),
         };
     };
     exports.getStyles = getStyles;

package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalStackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalStackedBarChart/VerticalStackedBarChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAAyC;;QACzD,IAAA,eAAe,GAAkB,KAAK,gBAAvB,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAC/C,OAAO;YACL,oBAAoB,EAAE;gBACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBACrC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;aACrC;YAED,OAAO,wCACF,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAC/C,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,GACrC;YAED,QAAQ,EAAE;gBACR,QAAQ,EAAE,mBAAS,CAAC,KAAK;gBACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;gBAClC,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,IAAI,EAAE,YAAY;qBACnB;uBACF;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IAjCW,QAAA,SAAS,aAiCpB","sourcesContent":["import { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { IVerticalStackedBarChartStyleProps, IVerticalStackedBarChartStyles } from './VerticalStackedBarChart.types';\n\nexport const getStyles = (props: IVerticalStackedBarChartStyleProps): IVerticalStackedBarChartStyles => {\n  const { shouldHighlight, href, theme } = props;\n  return {\n    opacityChangeOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n      cursor: href ? 'pointer' : 'default',\n    },\n\n    tooltip: {\n      ...theme.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      padding: '8px',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '0px',\n      background: theme.semanticColors.bodyBackground,\n      borderRadius: '2px',\n      pointerEvents: 'none',\n      color: theme.semanticColors.bodyText,\n    },\n\n    barLabel: {\n      fontSize: FontSizes.small,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n      selectors: {\n        [HighContrastSelector]: {\n          fill: 'CanvasText',\n        },\n      },\n    },\n  };\n};\n"]}
+{"version":3,"file":"VerticalStackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalStackedBarChart/VerticalStackedBarChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAAyC;QACzD,IAAA,eAAe,GAAkB,KAAK,gBAAvB,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAC/C,OAAO;YACL,oBAAoB,EAAE;gBACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBACrC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;aACrC;YACD,OAAO,EAAE,IAAA,uBAAe,EAAC,KAAK,CAAC;YAC/B,QAAQ,EAAE,IAAA,wBAAgB,EAAC,KAAK,CAAC;SAClC,CAAC;IACJ,CAAC,CAAC;IAVW,QAAA,SAAS,aAUpB","sourcesContent":["import { IVerticalStackedBarChartStyleProps, IVerticalStackedBarChartStyles } from './VerticalStackedBarChart.types';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IVerticalStackedBarChartStyleProps): IVerticalStackedBarChartStyles => {\n  const { shouldHighlight, href, theme } = props;\n  return {\n    opacityChangeOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n      cursor: href ? 'pointer' : 'default',\n    },\n    tooltip: getTooltipStyle(theme),\n    barLabel: getBarLabelStyle(theme),\n  };\n};\n"]}

package/lib-amd/utilities/Common.styles.d.ts

@@ -0,0 +1,6 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import type { IRawStyle } from '@fluentui/merge-styles';
+export declare const getTooltipStyle: (theme: ITheme) => IStyle;
+export declare const getAxisTitleStyle: (theme: ITheme, font: IRawStyle) => IStyle;
+export declare const getBarLabelStyle: (theme: ITheme) => IStyle;
+export declare const getMarkerLabelStyle: (theme: ITheme) => IStyle;

package/lib-amd/utilities/Common.styles.js

@@ -0,0 +1,57 @@
+define(["require", "exports", "tslib", "@fluentui/react/lib/Styling", "@fluentui/react"], function (require, exports, tslib_1, Styling_1, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getMarkerLabelStyle = exports.getBarLabelStyle = exports.getAxisTitleStyle = exports.getTooltipStyle = void 0;
+    var getTooltipStyle = function (theme) {
+        return tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: theme.semanticColors.bodyText });
+    };
+    exports.getTooltipStyle = getTooltipStyle;
+    var getAxisTitleStyle = function (theme, font) {
+        var _a;
+        return [
+            font,
+            (_a = {
+                    textAlign: 'center',
+                    fontWeight: Styling_1.FontWeights.semibold,
+                    fontStyle: 'normal',
+                    lineHeight: Styling_1.FontSizes.medium,
+                    color: react_1.NeutralColors.gray160,
+                    fill: theme.semanticColors.bodyText
+                },
+                _a[Styling_1.HighContrastSelector] = {
+                    fill: 'CanvasText',
+                },
+                _a),
+        ];
+    };
+    exports.getAxisTitleStyle = getAxisTitleStyle;
+    var getBarLabelStyle = function (theme) {
+        var _a;
+        return {
+            fontSize: Styling_1.FontSizes.small,
+            fontWeight: Styling_1.FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
+            selectors: (_a = {},
+                _a[Styling_1.HighContrastSelector] = {
+                    fill: 'CanvasText',
+                },
+                _a),
+        };
+    };
+    exports.getBarLabelStyle = getBarLabelStyle;
+    var getMarkerLabelStyle = function (theme) {
+        var _a;
+        return {
+            fontSize: Styling_1.FontSizes.medium,
+            fill: theme.semanticColors.bodyText,
+            textAnchor: 'middle',
+            selectors: (_a = {},
+                _a[Styling_1.HighContrastSelector] = {
+                    fill: 'CanvasText',
+                },
+                _a),
+        };
+    };
+    exports.getMarkerLabelStyle = getMarkerLabelStyle;
+});
+//# sourceMappingURL=Common.styles.js.map

package/lib-amd/utilities/Common.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Common.styles.js","sourceRoot":"../src/","sources":["utilities/Common.styles.ts"],"names":[],"mappings":";;;;IAKO,IAAM,eAAe,GAAG,UAAC,KAAa;QAC3C,6CACK,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAC/C,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,IACpC;IACJ,CAAC,CAAC;IAdW,QAAA,eAAe,mBAc1B;IAEK,IAAM,iBAAiB,GAAG,UAAC,KAAa,EAAE,IAAe;;QAC9D,OAAO;YACL,IAAI;;oBAEF,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,qBAAW,CAAC,QAAQ;oBAChC,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,mBAAS,CAAC,MAAM;oBAC5B,KAAK,EAAE,qBAAa,CAAC,OAAO;oBAC5B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;;gBACnC,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;;SAEJ,CAAC;IACJ,CAAC,CAAC;IAfW,QAAA,iBAAiB,qBAe5B;IAEK,IAAM,gBAAgB,GAAG,UAAC,KAAa;;QAC5C,OAAO;YACL,QAAQ,EAAE,mBAAS,CAAC,KAAK;YACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;YAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YAClC,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,gBAAgB,oBAW3B;IAEK,IAAM,mBAAmB,GAAG,UAAC,KAAa;;QAC/C,OAAO;YACL,QAAQ,EAAE,mBAAS,CAAC,MAAM;YAC1B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;YACnC,UAAU,EAAE,QAAQ;YACpB,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,mBAAmB,uBAW9B","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport type { IRawStyle } from '@fluentui/merge-styles';\nimport { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { NeutralColors } from '@fluentui/react';\n\nexport const getTooltipStyle = (theme: ITheme): IStyle => {\n  return {\n    ...theme.fonts.medium,\n    display: 'flex',\n    flexDirection: 'column',\n    padding: '8px',\n    position: 'absolute',\n    textAlign: 'center',\n    top: '0px',\n    background: theme.semanticColors.bodyBackground,\n    borderRadius: '2px',\n    pointerEvents: 'none',\n    color: theme.semanticColors.bodyText,\n  };\n};\n\nexport const getAxisTitleStyle = (theme: ITheme, font: IRawStyle): IStyle => {\n  return [\n    font,\n    {\n      textAlign: 'center',\n      fontWeight: FontWeights.semibold,\n      fontStyle: 'normal',\n      lineHeight: FontSizes.medium,\n      color: NeutralColors.gray160,\n      fill: theme.semanticColors.bodyText,\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  ];\n};\n\nexport const getBarLabelStyle = (theme: ITheme): IStyle => {\n  return {\n    fontSize: FontSizes.small,\n    fontWeight: FontWeights.semibold,\n    fill: theme.palette.neutralPrimary,\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  };\n};\n\nexport const getMarkerLabelStyle = (theme: ITheme): IStyle => {\n  return {\n    fontSize: FontSizes.medium,\n    fill: theme.semanticColors.bodyText,\n    textAnchor: 'middle',\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  };\n};\n"]}

package/lib-amd/utilities/SVGTooltipText.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ITooltipHost, ITooltipProps, TooltipDelay } from '@fluentui/react/lib/Tooltip';
 import { ITheme } from '@fluentui/react';
-interface ISVGTooltipTextProps {
+export interface ISVGTooltipTextProps {
     /**
      * Number of milliseconds to delay closing the tooltip, so that the user has time to hover over
      * the tooltip and interact with it. Hovering over the tooltip will count as hovering over the

package/lib-amd/utilities/SVGTooltipText.js

@@ -2,7 +2,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Tooltip", "
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.SVGTooltipText = void 0;
-    var PADDING = 4;
+    var PADDING = 3;
     /**
      * Component to render an SVG text element with an optional tooltip.
      * The tooltip appears on hovering and focusing the element when its content overflows.
@@ -159,9 +159,9 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Tooltip", "
                 }, onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, tooltipProps);
             var showTooltip = (!!this.props.isTooltipVisibleProp && this.state.isOverflowing && !!content) || (isTooltipVisible && !!content);
             var rectX = (typeof (textProps === null || textProps === void 0 ? void 0 : textProps.x) === 'number' ? textProps.x : 0) - (textWidth !== null && textWidth !== void 0 ? textWidth : 0) / 2 - PADDING;
-            var rectY = (typeof (textProps === null || textProps === void 0 ? void 0 : textProps.y) === 'number' ? textProps.y : 0) - (textHeight !== null && textHeight !== void 0 ? textHeight : 0) / 2 - PADDING;
+            var rectY = (typeof (textProps === null || textProps === void 0 ? void 0 : textProps.y) === 'number' ? textProps.y : 0) - (textHeight !== null && textHeight !== void 0 ? textHeight : 0) / 2 - 2 * PADDING;
             return (React.createElement(React.Fragment, null,
-                showBackground && (React.createElement("rect", { x: rectX, y: rectY, width: (textWidth !== null && textWidth !== void 0 ? textWidth : 0) + 2 * PADDING, height: (textHeight !== null && textHeight !== void 0 ? textHeight : 0) + 2 * PADDING, transform: textProps === null || textProps === void 0 ? void 0 : textProps.transform, className: this.props.className })),
+                showBackground && (React.createElement("rect", { x: rectX, y: rectY, width: (textWidth !== null && textWidth !== void 0 ? textWidth : 0) + 2 * PADDING, height: (textHeight !== null && textHeight !== void 0 ? textHeight : 0) + PADDING, transform: textProps === null || textProps === void 0 ? void 0 : textProps.transform, className: this.props.className })),
                 React.createElement("text", tslib_1.__assign({}, textProps, { id: this._tooltipHostId, ref: this._tooltipHost, onFocusCapture: this._onTooltipFocus, onBlurCapture: this._onTooltipBlur, onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, onKeyDown: this._onTooltipKeyDown, "data-is-focusable": shouldReceiveFocus && this.state.isOverflowing }), content),
                 showTooltip && React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({}, tooltipRenderProps))));
         };

package/lib-amd/utilities/SVGTooltipText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SVGTooltipText.js","sourceRoot":"../src/","sources":["utilities/SVGTooltipText.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ITooltipHost, ITooltipProps, Tooltip, TooltipDelay } from '@fluentui/react/lib/Tooltip';\nimport { Async, KeyCodes, getId, portalContainsElement } from '../Utilities';\nimport { ITheme } from '@fluentui/react';\n\ninterface ISVGTooltipTextProps {\n  /**\n   * Number of milliseconds to delay closing the tooltip, so that the user has time to hover over\n   * the tooltip and interact with it. Hovering over the tooltip will count as hovering over the\n   * host, so that the tooltip will stay open if the user is actively interacting with it.\n   */\n  closeDelay?: number;\n\n  /**\n   * Content to display in the Tooltip.\n   */\n  content?: string;\n\n  /**\n   * Length of delay before showing the tooltip on hover.\n   * @defaultvalue TooltipDelay.medium\n   */\n  delay?: TooltipDelay;\n\n  /**\n   * Additional properties to pass through for Tooltip.\n   */\n  tooltipProps?: ITooltipProps;\n\n  /**\n   * Additional properties to pass through for SVG <text>.\n   */\n  textProps?: React.SVGAttributes<SVGTextElement>;\n\n  /**\n   * Max width of text\n   */\n  maxWidth?: number;\n\n  /**\n   * Max height of text\n   */\n  maxHeight?: number;\n\n  /**\n   * Pass false to make prevent the tooptip from receiving focus through keyboard\n   * Eg: In Pie Chart, the focus should only land on the arcs and not on the text to\n   * avoid repitition of the same datapoint\n   * @defaultvalue true\n   */\n  shouldReceiveFocus?: boolean;\n\n  /**\n   * Pass true to show tooltip directly\n   * Eg: In Pie Chart, the tooltip is shown when the arc is focussed, so the prop is set to true,\n   * to directly show the tooltip from this component\n   * @defaultvalue false\n   */\n  isTooltipVisibleProp?: boolean;\n\n  /**\n   * Function to wrap text within specified width and height\n   * and return a boolean value indicating whether the text overflowed\n   */\n  wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n\n  /**\n   * Theme provided by High Order Component\n   */\n  theme?: ITheme;\n\n  /**\n   * @default false\n   * Prop to selectively display the tooltip background\n   */\n  showBackground?: boolean;\n\n  /**\n   * Prop to set classname\n   */\n  className?: string;\n}\n\ninterface ISVGTooltipTextState {\n  isTooltipVisible: boolean;\n  isOverflowing: boolean;\n  textX?: number;\n  textY?: number;\n  textWidth?: number;\n  textHeight?: number;\n}\n\nconst PADDING = 4;\n\n/**\n * Component to render an SVG text element with an optional tooltip.\n * The tooltip appears on hovering and focusing the element when its content overflows.\n */\nexport class SVGTooltipText\n  extends React.Component<ISVGTooltipTextProps, ISVGTooltipTextState>\n  implements ITooltipHost\n{\n  public static defaultProps = {\n    delay: TooltipDelay.medium,\n  };\n\n  private static _currentVisibleTooltip: ITooltipHost | undefined;\n\n  /** The element that gets the hover events */\n  private _tooltipHost = React.createRef<SVGTextElement>();\n\n  private _async: Async;\n  private _dismissTimerId: number;\n  private _openTimerId: number;\n  private _tooltipHostId = getId('tooltip-host');\n  private _ignoreNextFocusEvent: boolean;\n\n  constructor(props: ISVGTooltipTextProps) {\n    super(props);\n\n    this.state = {\n      isTooltipVisible: false,\n      isOverflowing: false,\n    };\n\n    this._async = new Async(this);\n  }\n\n  public render(): React.ReactNode {\n    const { content, tooltipProps, textProps, shouldReceiveFocus = true, showBackground = false } = this.props;\n    const { isTooltipVisible, textWidth, textHeight } = this.state;\n    const tooltipRenderProps: ITooltipProps = {\n      content,\n      targetElement: this._getTargetElement(),\n      calloutProps: {\n        onDismiss: this._hideTooltip,\n        onMouseEnter: this._onTooltipMouseEnter,\n        onMouseLeave: this._onTooltipMouseLeave,\n      },\n      onMouseEnter: this._onTooltipMouseEnter,\n      onMouseLeave: this._onTooltipMouseLeave,\n      ...tooltipProps,\n    };\n\n    const showTooltip =\n      (!!this.props.isTooltipVisibleProp && this.state.isOverflowing && !!content) || (isTooltipVisible && !!content);\n    const rectX = (typeof textProps?.x === 'number' ? textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n    const rectY = (typeof textProps?.y === 'number' ? textProps.y : 0) - (textHeight ?? 0) / 2 - PADDING;\n    return (\n      <>\n        {showBackground && (\n          <rect\n            x={rectX}\n            y={rectY}\n            width={(textWidth ?? 0) + 2 * PADDING}\n            height={(textHeight ?? 0) + 2 * PADDING}\n            transform={textProps?.transform}\n            className={this.props.className}\n          />\n        )}\n        <text\n          {...textProps}\n          id={this._tooltipHostId}\n          ref={this._tooltipHost}\n          onFocusCapture={this._onTooltipFocus}\n          onBlurCapture={this._onTooltipBlur}\n          onMouseEnter={this._onTooltipMouseEnter}\n          onMouseLeave={this._onTooltipMouseLeave}\n          onKeyDown={this._onTooltipKeyDown}\n          data-is-focusable={shouldReceiveFocus && this.state.isOverflowing}\n        >\n          {content}\n        </text>\n        {showTooltip && <Tooltip {...tooltipRenderProps} />}\n      </>\n    );\n  }\n\n  public componentDidMount(): void {\n    this._wrapContent();\n    this._measureText();\n  }\n\n  public componentDidUpdate(prevProps: Readonly<ISVGTooltipTextProps>): void {\n    if (this.props.maxWidth !== prevProps.maxWidth || this.props.maxHeight !== prevProps.maxHeight) {\n      this._wrapContent();\n      this._measureText();\n    }\n  }\n\n  public componentWillUnmount(): void {\n    if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip === this) {\n      SVGTooltipText._currentVisibleTooltip = undefined;\n    }\n\n    this._async.dispose();\n  }\n\n  public show = (): void => {\n    this._toggleTooltip(true);\n  };\n\n  public dismiss = (): void => {\n    this._hideTooltip();\n  };\n\n  private _measureText = (): void => {\n    if (this._tooltipHost.current && typeof this._tooltipHost.current.getBBox === 'function') {\n      const bbox = this._tooltipHost.current.getBBox();\n      this.setState({\n        textX: bbox.x,\n        textY: bbox.y,\n        textWidth: bbox.width,\n        textHeight: bbox.height,\n      });\n    }\n  };\n\n  private _getTargetElement = (): HTMLElement | undefined => {\n    if (!this._tooltipHost.current) {\n      return undefined;\n    }\n\n    return this._tooltipHost.current as unknown as HTMLElement;\n  };\n\n  private _onTooltipFocus = (ev: React.FocusEvent<SVGElement>) => {\n    if (this._ignoreNextFocusEvent) {\n      this._ignoreNextFocusEvent = false;\n      return;\n    }\n\n    this._onTooltipMouseEnter(ev);\n  };\n\n  private _onTooltipBlur = (ev: React.FocusEvent<SVGElement>) => {\n    // The focused element gets a blur event when the document loses focus\n    // (e.g. switching tabs in the browser), but we don't want to show the\n    // tooltip again when the document gets focus back. Handle this case by\n    // checking if the blurred element is still the document's activeElement,\n    // and ignoring when it next gets focus back.\n    // See https://github.com/microsoft/fluentui/issues/13541\n    this._ignoreNextFocusEvent = document?.activeElement === ev.target;\n\n    this._dismissTimerId = this._async.setTimeout(() => {\n      this._hideTooltip();\n    }, 0);\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _onTooltipMouseEnter = (ev: any): void => {\n    const { delay } = this.props;\n\n    if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip !== this) {\n      SVGTooltipText._currentVisibleTooltip.dismiss();\n    }\n    SVGTooltipText._currentVisibleTooltip = this;\n\n    if (!this.state.isOverflowing) {\n      return;\n    }\n\n    if (ev.target && portalContainsElement(ev.target as HTMLElement, this._getTargetElement())) {\n      // Do not show tooltip when target is inside a portal relative to TooltipHost.\n      return;\n    }\n\n    this._clearDismissTimer();\n    this._clearOpenTimer();\n\n    if (delay !== TooltipDelay.zero) {\n      const delayTime = this._getDelayTime(delay!); // non-null assertion because we set it in `defaultProps`\n\n      this._openTimerId = this._async.setTimeout(() => {\n        this._toggleTooltip(true);\n      }, delayTime);\n    } else {\n      this._toggleTooltip(true);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _onTooltipMouseLeave = (ev: any): void => {\n    const { closeDelay } = this.props;\n\n    this._clearDismissTimer();\n    this._clearOpenTimer();\n\n    if (closeDelay) {\n      this._dismissTimerId = this._async.setTimeout(() => {\n        this._toggleTooltip(false);\n      }, closeDelay);\n    } else {\n      this._toggleTooltip(false);\n    }\n\n    if (SVGTooltipText._currentVisibleTooltip === this) {\n      SVGTooltipText._currentVisibleTooltip = undefined;\n    }\n  };\n\n  private _onTooltipKeyDown = (ev: React.KeyboardEvent<SVGElement>): void => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    if ((ev.which === KeyCodes.escape || ev.ctrlKey) && this.state.isTooltipVisible) {\n      this._hideTooltip();\n      ev.stopPropagation();\n    }\n  };\n\n  private _clearDismissTimer = (): void => {\n    this._async.clearTimeout(this._dismissTimerId);\n  };\n\n  private _clearOpenTimer = (): void => {\n    this._async.clearTimeout(this._openTimerId);\n  };\n\n  private _hideTooltip = (): void => {\n    this._clearOpenTimer();\n    this._clearDismissTimer();\n    this._toggleTooltip(false);\n  };\n\n  private _toggleTooltip = (isTooltipVisible: boolean): void => {\n    if (this.state.isTooltipVisible !== isTooltipVisible) {\n      this.setState({ isTooltipVisible });\n    }\n  };\n\n  private _getDelayTime = (delay: TooltipDelay): number => {\n    switch (delay) {\n      case TooltipDelay.medium:\n        return 300;\n      case TooltipDelay.long:\n        return 500;\n      default:\n        return 0;\n    }\n  };\n\n  private _wrapContent = () => {\n    const { content, wrapContent, maxWidth = Number.POSITIVE_INFINITY, maxHeight } = this.props;\n\n    let isOverflowing = false;\n    if (content && wrapContent && wrapContent(content, this._tooltipHostId, maxWidth, maxHeight)) {\n      isOverflowing = true;\n    }\n\n    if (this.state.isOverflowing !== isOverflowing) {\n      this.setState({ isOverflowing });\n    }\n  };\n}\n"]}
+{"version":3,"file":"SVGTooltipText.js","sourceRoot":"../src/","sources":["utilities/SVGTooltipText.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ITooltipHost, ITooltipProps, Tooltip, TooltipDelay } from '@fluentui/react/lib/Tooltip';\nimport { Async, KeyCodes, getId, portalContainsElement } from '../Utilities';\nimport { ITheme } from '@fluentui/react';\n\nexport interface ISVGTooltipTextProps {\n  /**\n   * Number of milliseconds to delay closing the tooltip, so that the user has time to hover over\n   * the tooltip and interact with it. Hovering over the tooltip will count as hovering over the\n   * host, so that the tooltip will stay open if the user is actively interacting with it.\n   */\n  closeDelay?: number;\n\n  /**\n   * Content to display in the Tooltip.\n   */\n  content?: string;\n\n  /**\n   * Length of delay before showing the tooltip on hover.\n   * @defaultvalue TooltipDelay.medium\n   */\n  delay?: TooltipDelay;\n\n  /**\n   * Additional properties to pass through for Tooltip.\n   */\n  tooltipProps?: ITooltipProps;\n\n  /**\n   * Additional properties to pass through for SVG <text>.\n   */\n  textProps?: React.SVGAttributes<SVGTextElement>;\n\n  /**\n   * Max width of text\n   */\n  maxWidth?: number;\n\n  /**\n   * Max height of text\n   */\n  maxHeight?: number;\n\n  /**\n   * Pass false to make prevent the tooptip from receiving focus through keyboard\n   * Eg: In Pie Chart, the focus should only land on the arcs and not on the text to\n   * avoid repitition of the same datapoint\n   * @defaultvalue true\n   */\n  shouldReceiveFocus?: boolean;\n\n  /**\n   * Pass true to show tooltip directly\n   * Eg: In Pie Chart, the tooltip is shown when the arc is focussed, so the prop is set to true,\n   * to directly show the tooltip from this component\n   * @defaultvalue false\n   */\n  isTooltipVisibleProp?: boolean;\n\n  /**\n   * Function to wrap text within specified width and height\n   * and return a boolean value indicating whether the text overflowed\n   */\n  wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n\n  /**\n   * Theme provided by High Order Component\n   */\n  theme?: ITheme;\n\n  /**\n   * @default false\n   * Prop to selectively display the tooltip background\n   */\n  showBackground?: boolean;\n\n  /**\n   * Prop to set classname\n   */\n  className?: string;\n}\n\ninterface ISVGTooltipTextState {\n  isTooltipVisible: boolean;\n  isOverflowing: boolean;\n  textX?: number;\n  textY?: number;\n  textWidth?: number;\n  textHeight?: number;\n}\n\nconst PADDING = 3;\n\n/**\n * Component to render an SVG text element with an optional tooltip.\n * The tooltip appears on hovering and focusing the element when its content overflows.\n */\nexport class SVGTooltipText\n  extends React.Component<ISVGTooltipTextProps, ISVGTooltipTextState>\n  implements ITooltipHost\n{\n  public static defaultProps = {\n    delay: TooltipDelay.medium,\n  };\n\n  private static _currentVisibleTooltip: ITooltipHost | undefined;\n\n  /** The element that gets the hover events */\n  private _tooltipHost = React.createRef<SVGTextElement>();\n\n  private _async: Async;\n  private _dismissTimerId: number;\n  private _openTimerId: number;\n  private _tooltipHostId = getId('tooltip-host');\n  private _ignoreNextFocusEvent: boolean;\n\n  constructor(props: ISVGTooltipTextProps) {\n    super(props);\n\n    this.state = {\n      isTooltipVisible: false,\n      isOverflowing: false,\n    };\n\n    this._async = new Async(this);\n  }\n\n  public render(): React.ReactNode {\n    const { content, tooltipProps, textProps, shouldReceiveFocus = true, showBackground = false } = this.props;\n    const { isTooltipVisible, textWidth, textHeight } = this.state;\n    const tooltipRenderProps: ITooltipProps = {\n      content,\n      targetElement: this._getTargetElement(),\n      calloutProps: {\n        onDismiss: this._hideTooltip,\n        onMouseEnter: this._onTooltipMouseEnter,\n        onMouseLeave: this._onTooltipMouseLeave,\n      },\n      onMouseEnter: this._onTooltipMouseEnter,\n      onMouseLeave: this._onTooltipMouseLeave,\n      ...tooltipProps,\n    };\n\n    const showTooltip =\n      (!!this.props.isTooltipVisibleProp && this.state.isOverflowing && !!content) || (isTooltipVisible && !!content);\n    const rectX = (typeof textProps?.x === 'number' ? textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n    const rectY = (typeof textProps?.y === 'number' ? textProps.y : 0) - (textHeight ?? 0) / 2 - 2 * PADDING;\n    return (\n      <>\n        {showBackground && (\n          <rect\n            x={rectX}\n            y={rectY}\n            width={(textWidth ?? 0) + 2 * PADDING}\n            height={(textHeight ?? 0) + PADDING}\n            transform={textProps?.transform}\n            className={this.props.className}\n          />\n        )}\n        <text\n          {...textProps}\n          id={this._tooltipHostId}\n          ref={this._tooltipHost}\n          onFocusCapture={this._onTooltipFocus}\n          onBlurCapture={this._onTooltipBlur}\n          onMouseEnter={this._onTooltipMouseEnter}\n          onMouseLeave={this._onTooltipMouseLeave}\n          onKeyDown={this._onTooltipKeyDown}\n          data-is-focusable={shouldReceiveFocus && this.state.isOverflowing}\n        >\n          {content}\n        </text>\n        {showTooltip && <Tooltip {...tooltipRenderProps} />}\n      </>\n    );\n  }\n\n  public componentDidMount(): void {\n    this._wrapContent();\n    this._measureText();\n  }\n\n  public componentDidUpdate(prevProps: Readonly<ISVGTooltipTextProps>): void {\n    if (this.props.maxWidth !== prevProps.maxWidth || this.props.maxHeight !== prevProps.maxHeight) {\n      this._wrapContent();\n      this._measureText();\n    }\n  }\n\n  public componentWillUnmount(): void {\n    if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip === this) {\n      SVGTooltipText._currentVisibleTooltip = undefined;\n    }\n\n    this._async.dispose();\n  }\n\n  public show = (): void => {\n    this._toggleTooltip(true);\n  };\n\n  public dismiss = (): void => {\n    this._hideTooltip();\n  };\n\n  private _measureText = (): void => {\n    if (this._tooltipHost.current && typeof this._tooltipHost.current.getBBox === 'function') {\n      const bbox = this._tooltipHost.current.getBBox();\n      this.setState({\n        textX: bbox.x,\n        textY: bbox.y,\n        textWidth: bbox.width,\n        textHeight: bbox.height,\n      });\n    }\n  };\n\n  private _getTargetElement = (): HTMLElement | undefined => {\n    if (!this._tooltipHost.current) {\n      return undefined;\n    }\n\n    return this._tooltipHost.current as unknown as HTMLElement;\n  };\n\n  private _onTooltipFocus = (ev: React.FocusEvent<SVGElement>) => {\n    if (this._ignoreNextFocusEvent) {\n      this._ignoreNextFocusEvent = false;\n      return;\n    }\n\n    this._onTooltipMouseEnter(ev);\n  };\n\n  private _onTooltipBlur = (ev: React.FocusEvent<SVGElement>) => {\n    // The focused element gets a blur event when the document loses focus\n    // (e.g. switching tabs in the browser), but we don't want to show the\n    // tooltip again when the document gets focus back. Handle this case by\n    // checking if the blurred element is still the document's activeElement,\n    // and ignoring when it next gets focus back.\n    // See https://github.com/microsoft/fluentui/issues/13541\n    this._ignoreNextFocusEvent = document?.activeElement === ev.target;\n\n    this._dismissTimerId = this._async.setTimeout(() => {\n      this._hideTooltip();\n    }, 0);\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _onTooltipMouseEnter = (ev: any): void => {\n    const { delay } = this.props;\n\n    if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip !== this) {\n      SVGTooltipText._currentVisibleTooltip.dismiss();\n    }\n    SVGTooltipText._currentVisibleTooltip = this;\n\n    if (!this.state.isOverflowing) {\n      return;\n    }\n\n    if (ev.target && portalContainsElement(ev.target as HTMLElement, this._getTargetElement())) {\n      // Do not show tooltip when target is inside a portal relative to TooltipHost.\n      return;\n    }\n\n    this._clearDismissTimer();\n    this._clearOpenTimer();\n\n    if (delay !== TooltipDelay.zero) {\n      const delayTime = this._getDelayTime(delay!); // non-null assertion because we set it in `defaultProps`\n\n      this._openTimerId = this._async.setTimeout(() => {\n        this._toggleTooltip(true);\n      }, delayTime);\n    } else {\n      this._toggleTooltip(true);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _onTooltipMouseLeave = (ev: any): void => {\n    const { closeDelay } = this.props;\n\n    this._clearDismissTimer();\n    this._clearOpenTimer();\n\n    if (closeDelay) {\n      this._dismissTimerId = this._async.setTimeout(() => {\n        this._toggleTooltip(false);\n      }, closeDelay);\n    } else {\n      this._toggleTooltip(false);\n    }\n\n    if (SVGTooltipText._currentVisibleTooltip === this) {\n      SVGTooltipText._currentVisibleTooltip = undefined;\n    }\n  };\n\n  private _onTooltipKeyDown = (ev: React.KeyboardEvent<SVGElement>): void => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    if ((ev.which === KeyCodes.escape || ev.ctrlKey) && this.state.isTooltipVisible) {\n      this._hideTooltip();\n      ev.stopPropagation();\n    }\n  };\n\n  private _clearDismissTimer = (): void => {\n    this._async.clearTimeout(this._dismissTimerId);\n  };\n\n  private _clearOpenTimer = (): void => {\n    this._async.clearTimeout(this._openTimerId);\n  };\n\n  private _hideTooltip = (): void => {\n    this._clearOpenTimer();\n    this._clearDismissTimer();\n    this._toggleTooltip(false);\n  };\n\n  private _toggleTooltip = (isTooltipVisible: boolean): void => {\n    if (this.state.isTooltipVisible !== isTooltipVisible) {\n      this.setState({ isTooltipVisible });\n    }\n  };\n\n  private _getDelayTime = (delay: TooltipDelay): number => {\n    switch (delay) {\n      case TooltipDelay.medium:\n        return 300;\n      case TooltipDelay.long:\n        return 500;\n      default:\n        return 0;\n    }\n  };\n\n  private _wrapContent = () => {\n    const { content, wrapContent, maxWidth = Number.POSITIVE_INFINITY, maxHeight } = this.props;\n\n    let isOverflowing = false;\n    if (content && wrapContent && wrapContent(content, this._tooltipHostId, maxWidth, maxHeight)) {\n      isOverflowing = true;\n    }\n\n    if (this.state.isOverflowing !== isOverflowing) {\n      this.setState({ isOverflowing });\n    }\n  };\n}\n"]}

package/lib-amd/utilities/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ChartHoverCard/index';
+export * from './Common.styles';
 export * from './utilities';
 export * from './colors';
 export * from './gradients';

package/lib-amd/utilities/index.js

@@ -1,7 +1,8 @@
-define(["require", "exports", "tslib", "./ChartHoverCard/index", "./utilities", "./colors", "./gradients", "./vbc-utils"], function (require, exports, tslib_1, index_1, utilities_1, colors_1, gradients_1, vbc_utils_1) {
+define(["require", "exports", "tslib", "./ChartHoverCard/index", "./Common.styles", "./utilities", "./colors", "./gradients", "./vbc-utils"], function (require, exports, tslib_1, index_1, Common_styles_1, utilities_1, colors_1, gradients_1, vbc_utils_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(index_1, exports);
+    tslib_1.__exportStar(Common_styles_1, exports);
     tslib_1.__exportStar(utilities_1, exports);
     tslib_1.__exportStar(colors_1, exports);
     tslib_1.__exportStar(gradients_1, exports);

package/lib-amd/utilities/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/index.ts"],"names":[],"mappings":";;;IAAA,uCAAuC;IACvC,2CAA4B;IAC5B,wCAAyB;IACzB,2CAA4B;IAC5B,2CAA4B","sourcesContent":["export * from './ChartHoverCard/index';\nexport * from './utilities';\nexport * from './colors';\nexport * from './gradients';\nexport * from './vbc-utils';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/index.ts"],"names":[],"mappings":";;;IAAA,uCAAuC;IACvC,+CAAgC;IAChC,2CAA4B;IAC5B,wCAAyB;IACzB,2CAA4B;IAC5B,2CAA4B","sourcesContent":["export * from './ChartHoverCard/index';\nexport * from './Common.styles';\nexport * from './utilities';\nexport * from './colors';\nexport * from './gradients';\nexport * from './vbc-utils';\n"]}

package/lib-commonjs/components/AreaChart/AreaChart.styles.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
-var tslib_1 = require("tslib");
+var index_1 = require("../../utilities/index");
 var getStyles = function (props) {
     return {
-        tooltip: tslib_1.__assign(tslib_1.__assign({}, props.theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: props.theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: props.theme.semanticColors.bodyText }),
+        tooltip: (0, index_1.getTooltipStyle)(props.theme),
     };
 };
 exports.getStyles = getStyles;

package/lib-commonjs/components/AreaChart/AreaChart.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.styles.js","sourceRoot":"../src/","sources":["components/AreaChart/AreaChart.styles.ts"],"names":[],"mappings":";;;;AAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;IACnD,OAAO;QACL,OAAO,wCACF,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,KAC5B,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,cAAc,EACtD,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,QAAQ,GAC5C;KACF,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,SAAS,aAgBpB","sourcesContent":["import { IAreaChartStyleProps, IAreaChartStyles } from './AreaChart.types';\n\nexport const getStyles = (props: IAreaChartStyleProps): IAreaChartStyles => {\n  return {\n    tooltip: {\n      ...props.theme!.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      padding: '8px',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '0px',\n      background: props.theme!.semanticColors.bodyBackground,\n      borderRadius: '2px',\n      pointerEvents: 'none',\n      color: props.theme!.semanticColors.bodyText,\n    },\n  };\n};\n"]}
+{"version":3,"file":"AreaChart.styles.js","sourceRoot":"../src/","sources":["components/AreaChart/AreaChart.styles.ts"],"names":[],"mappings":";;;AACA,+CAAwD;AAEjD,IAAM,SAAS,GAAG,UAAC,KAA2B;IACnD,OAAO;QACL,OAAO,EAAE,IAAA,uBAAe,EAAC,KAAK,CAAC,KAAM,CAAC;KACvC,CAAC;AACJ,CAAC,CAAC;AAJW,QAAA,SAAS,aAIpB","sourcesContent":["import { IAreaChartStyleProps, IAreaChartStyles } from './AreaChart.types';\nimport { getTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IAreaChartStyleProps): IAreaChartStyles => {\n  return {\n    tooltip: getTooltipStyle(props.theme!),\n  };\n};\n"]}

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

@@ -166,33 +166,34 @@ var CartesianChartBase = /** @class */ (function (_super) {
                     : 20
                 : (_p = (_o = _this.props.margins) === null || _o === void 0 ? void 0 : _o.left) !== null && _p !== void 0 ? _p : 40,
         };
-        var TITLE_MARGIN = 20;
+        var TITLE_MARGIN_HORIZONTAL = 24;
+        var TITLE_MARGIN_VERTICAL = 20;
         if (_this.props.xAxisTitle !== undefined && _this.props.xAxisTitle !== '') {
-            _this.margins.bottom = (_r = (_q = _this.props.margins) === null || _q === void 0 ? void 0 : _q.bottom) !== null && _r !== void 0 ? _r : _this.margins.bottom + TITLE_MARGIN;
+            _this.margins.bottom = (_r = (_q = _this.props.margins) === null || _q === void 0 ? void 0 : _q.bottom) !== null && _r !== void 0 ? _r : _this.margins.bottom + TITLE_MARGIN_VERTICAL;
         }
         if (_this.props.yAxisTitle !== undefined && _this.props.yAxisTitle !== '') {
             _this.margins.left = _this._isRtl
                 ? ((_t = (_s = _this.props.margins) === null || _s === void 0 ? void 0 : _s.right) !== null && _t !== void 0 ? _t : (_u = _this.props) === null || _u === void 0 ? void 0 : _u.secondaryYAxistitle)
-                    ? _this.margins.right + 2 * TITLE_MARGIN
-                    : _this.margins.right + TITLE_MARGIN
-                : (_w = (_v = _this.props.margins) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : _this.margins.left + TITLE_MARGIN;
+                    ? _this.margins.right + 2 * TITLE_MARGIN_HORIZONTAL
+                    : _this.margins.right + TITLE_MARGIN_HORIZONTAL
+                : (_w = (_v = _this.props.margins) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : _this.margins.left + TITLE_MARGIN_HORIZONTAL;
             _this.margins.right = _this._isRtl
-                ? (_y = (_x = _this.props.margins) === null || _x === void 0 ? void 0 : _x.left) !== null && _y !== void 0 ? _y : _this.margins.left + TITLE_MARGIN
+                ? (_y = (_x = _this.props.margins) === null || _x === void 0 ? void 0 : _x.left) !== null && _y !== void 0 ? _y : _this.margins.left + TITLE_MARGIN_HORIZONTAL
                 : ((_0 = (_z = _this.props.margins) === null || _z === void 0 ? void 0 : _z.right) !== null && _0 !== void 0 ? _0 : (_1 = _this.props) === null || _1 === void 0 ? void 0 : _1.secondaryYAxistitle)
-                    ? _this.margins.right + 2 * TITLE_MARGIN
-                    : _this.margins.right + TITLE_MARGIN;
+                    ? _this.margins.right + 2 * TITLE_MARGIN_HORIZONTAL
+                    : _this.margins.right + TITLE_MARGIN_HORIZONTAL;
         }
         if (_this.props.xAxisAnnotation !== undefined && _this.props.xAxisAnnotation !== '') {
-            _this.margins.top = (_3 = (_2 = _this.props.margins) === null || _2 === void 0 ? void 0 : _2.top) !== null && _3 !== void 0 ? _3 : _this.margins.top + TITLE_MARGIN;
+            _this.margins.top = (_3 = (_2 = _this.props.margins) === null || _2 === void 0 ? void 0 : _2.top) !== null && _3 !== void 0 ? _3 : _this.margins.top + TITLE_MARGIN_VERTICAL;
         }
         if (_this.props.yAxisAnnotation !== undefined &&
             _this.props.yAxisAnnotation !== '' &&
             (_this.props.secondaryYAxistitle === undefined || _this.props.secondaryYAxistitle === '')) {
             if (_this._isRtl) {
-                _this.margins.left = (_5 = (_4 = _this.props.margins) === null || _4 === void 0 ? void 0 : _4.right) !== null && _5 !== void 0 ? _5 : _this.margins.right + TITLE_MARGIN;
+                _this.margins.left = (_5 = (_4 = _this.props.margins) === null || _4 === void 0 ? void 0 : _4.right) !== null && _5 !== void 0 ? _5 : _this.margins.right + TITLE_MARGIN_HORIZONTAL;
             }
             else {
-                _this.margins.right = (_7 = (_6 = _this.props.margins) === null || _6 === void 0 ? void 0 : _6.right) !== null && _7 !== void 0 ? _7 : _this.margins.right + TITLE_MARGIN;
+                _this.margins.right = (_7 = (_6 = _this.props.margins) === null || _6 === void 0 ? void 0 : _6.right) !== null && _7 !== void 0 ? _7 : _this.margins.right + TITLE_MARGIN_HORIZONTAL;
             }
         }
         return _this;
@@ -477,6 +478,12 @@ var CartesianChartBase = /** @class */ (function (_super) {
             this.margins.top -
             this.state._removalValueForTextTuncate -
             this.titleMargin;
+        var commonSvgToolTipProps = {
+            wrapContent: index_1.wrapContent,
+            theme: this.props.theme,
+            showBackground: true,
+            className: this._classNames.svgTooltip,
+        };
         /**
          * We have use the {@link defaultTabbableElement } to fix
          * the Focus not landing on chart while tabbing, instead  goes to legend.
@@ -506,20 +513,20 @@ var CartesianChartBase = /** @class */ (function (_super) {
                         }, id: "xAxisGElement".concat(this.idForGraph), 
                         // To add wrap of x axis lables feature, need to remove word height from svg height.
                         transform: "translate(0, ".concat(svgDimensions.height - this.margins.bottom - this.state._removalValueForTextTuncate, ")"), className: this._classNames.xAxis }),
-                    this.props.xAxisTitle !== undefined && this.props.xAxisTitle !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, { content: this.props.xAxisTitle, textProps: {
+                    this.props.xAxisTitle !== undefined && this.props.xAxisTitle !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.xAxisTitle, textProps: {
                             x: this.margins.left + this.state.startFromX + xAxisTitleMaximumAllowedWidth / 2,
                             y: svgDimensions.height - this.titleMargin,
                             className: this._classNames.axisTitle,
                             textAnchor: 'middle',
                             'aria-hidden': true,
-                        }, maxWidth: xAxisTitleMaximumAllowedWidth, wrapContent: index_1.wrapContent, theme: this.props.theme, showBackground: true, className: this._classNames.svgTooltip })),
-                    this.props.xAxisAnnotation !== undefined && this.props.xAxisAnnotation !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, { content: this.props.xAxisAnnotation, textProps: {
+                        }, maxWidth: xAxisTitleMaximumAllowedWidth }, commonSvgToolTipProps))),
+                    this.props.xAxisAnnotation !== undefined && this.props.xAxisAnnotation !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.xAxisAnnotation, textProps: {
                             x: this.margins.left + this.state.startFromX + xAxisTitleMaximumAllowedWidth / 2,
                             y: this.titleMargin + 3,
                             className: this._classNames.axisAnnotation,
                             textAnchor: 'middle',
                             'aria-hidden': true,
-                        }, maxWidth: xAxisTitleMaximumAllowedWidth, wrapContent: index_1.wrapContent, theme: this.props.theme, showBackground: true, className: this._classNames.svgTooltip })),
+                        }, maxWidth: xAxisTitleMaximumAllowedWidth }, commonSvgToolTipProps))),
                     React.createElement("g", { ref: function (e) {
                             _this.yAxisElement = e;
                         }, id: "yAxisGElement".concat(this.idForGraph), transform: "translate(".concat(this._isRtl
@@ -531,7 +538,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                             }, id: "yAxisGElementSecondary".concat(this.idForGraph), transform: "translate(".concat(this._isRtl
                                 ? this.margins.left + this.state.startFromX
                                 : svgDimensions.width - this.margins.right - this.state.startFromX, ", 0)"), className: this._classNames.yAxis }),
-                        this.props.secondaryYAxistitle !== undefined && this.props.secondaryYAxistitle !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, { content: this.props.secondaryYAxistitle, textProps: {
+                        this.props.secondaryYAxistitle !== undefined && this.props.secondaryYAxistitle !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.secondaryYAxistitle, textProps: {
                                 x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 +
                                     this.state._removalValueForTextTuncate,
                                 y: this._isRtl
@@ -543,9 +550,9 @@ 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.axisTitle,
                                 'aria-hidden': true,
-                            }, maxWidth: yAxisTitleMaximumAllowedHeight, wrapContent: index_1.wrapContent, theme: this.props.theme, showBackground: true, className: this._classNames.svgTooltip })))),
+                            }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps))))),
                     children,
-                    this.props.yAxisTitle !== undefined && this.props.yAxisTitle !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, { content: this.props.yAxisTitle, textProps: {
+                    this.props.yAxisTitle !== undefined && this.props.yAxisTitle !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.yAxisTitle, textProps: {
                             x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 +
                                 this.state._removalValueForTextTuncate,
                             y: this._isRtl
@@ -555,10 +562,10 @@ var CartesianChartBase = /** @class */ (function (_super) {
                             transform: "translate(0,\n                   ".concat(svgDimensions.height - this.margins.bottom - this.margins.top - this.titleMargin, ")rotate(-90)"),
                             className: this._classNames.axisTitle,
                             'aria-hidden': true,
-                        }, maxWidth: yAxisTitleMaximumAllowedHeight, wrapContent: index_1.wrapContent, theme: this.props.theme, showBackground: true, className: this._classNames.svgTooltip })),
+                        }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps))),
                     this.props.yAxisAnnotation !== undefined &&
                         this.props.yAxisAnnotation !== '' &&
-                        (this.props.secondaryYAxistitle === undefined || this.props.secondaryYAxistitle === '') && (React.createElement(SVGTooltipText_1.SVGTooltipText, { content: this.props.yAxisAnnotation, textProps: {
+                        (this.props.secondaryYAxistitle === undefined || this.props.secondaryYAxistitle === '') && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.yAxisAnnotation, textProps: {
                             x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 +
                                 this.state._removalValueForTextTuncate,
                             y: this._isRtl
@@ -570,7 +577,7 @@ 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, wrapContent: index_1.wrapContent, theme: this.props.theme, showBackground: true, className: this._classNames.svgTooltip })))),
+                        }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps))))),
             !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)));
     };