@fluentui/react-charting 5.24.5 → 5.24.7

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMarkerLabelStyle = exports.getBarLabelStyle = exports.getAxisTitleStyle = exports.getTooltipStyle = void 0;
+var tslib_1 = require("tslib");
+var Styling_1 = require("@fluentui/react/lib/Styling");
+var react_1 = require("@fluentui/react");
+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-commonjs/utilities/Common.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Common.styles.js","sourceRoot":"../src/","sources":["utilities/Common.styles.ts"],"names":[],"mappings":";;;;AAEA,uDAA2F;AAC3F,yCAAgD;AAEzC,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,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;AACJ,CAAC,CAAC;AAdW,QAAA,eAAe,mBAc1B;AAEK,IAAM,iBAAiB,GAAG,UAAC,KAAa,EAAE,IAAe;;IAC9D,OAAO;QACL,IAAI;;gBAEF,SAAS,EAAE,QAAQ;gBACnB,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,SAAS,EAAE,QAAQ;gBACnB,UAAU,EAAE,mBAAS,CAAC,MAAM;gBAC5B,KAAK,EAAE,qBAAa,CAAC,OAAO;gBAC5B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;;YACnC,GAAC,8BAAoB,IAAG;gBACtB,IAAI,EAAE,YAAY;aACnB;;KAEJ,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,iBAAiB,qBAe5B;AAEK,IAAM,gBAAgB,GAAG,UAAC,KAAa;;IAC5C,OAAO;QACL,QAAQ,EAAE,mBAAS,CAAC,KAAK;QACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;QAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAClC,SAAS;YACP,GAAC,8BAAoB,IAAG;gBACtB,IAAI,EAAE,YAAY;aACnB;eACF;KACF,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,gBAAgB,oBAW3B;AAEK,IAAM,mBAAmB,GAAG,UAAC,KAAa;;IAC/C,OAAO;QACL,QAAQ,EAAE,mBAAS,CAAC,MAAM;QAC1B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;QACnC,UAAU,EAAE,QAAQ;QACpB,SAAS;YACP,GAAC,8BAAoB,IAAG;gBACtB,IAAI,EAAE,YAAY;aACnB;eACF;KACF,CAAC;AACJ,CAAC,CAAC;AAXW,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-commonjs/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-commonjs/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 = 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"]}
+{"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-commonjs/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-commonjs/utilities/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ChartHoverCard/index"), exports);
+tslib_1.__exportStar(require("./Common.styles"), exports);
 tslib_1.__exportStar(require("./utilities"), exports);
 tslib_1.__exportStar(require("./colors"), exports);
 tslib_1.__exportStar(require("./gradients"), exports);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/index.ts"],"names":[],"mappings":";;;AAAA,iEAAuC;AACvC,sDAA4B;AAC5B,mDAAyB;AACzB,sDAA4B;AAC5B,sDAA4B","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":";;;AAAA,iEAAuC;AACvC,0DAAgC;AAChC,sDAA4B;AAC5B,mDAAyB;AACzB,sDAA4B;AAC5B,sDAA4B","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/utilities/utilities.d.ts

@@ -34,6 +34,7 @@ export interface IWrapLabelProps {
     xAxis: NumericAxis | StringAxis;
     noOfCharsToTruncate: number;
     showXAxisLablesTooltip: boolean;
+    width?: number;
 }
 export interface IRotateLabelProps {
     node: SVGSVGElement | null;
@@ -84,6 +85,7 @@ export interface IXAxisParams {
     containerHeight: number;
     containerWidth: number;
     hideTickOverlap?: boolean;
+    calcMaxLabelWidth: (x: (string | number)[]) => number;
 }
 export interface ITickParams {
     tickValues?: Date[] | number[] | string[];
@@ -219,6 +221,7 @@ export declare function getUnique(arr: {
  * @param value
  */
 export declare function silceOrAppendToArray(array: string[], value: string): string[];
+export declare const DEFAULT_WRAP_WIDTH = 10;
 /**
  * This method used for wrapping of x axis labels (tick values).
  * It breaks down given text value by space separated and calculates the total height needed to display all the words.

package/lib-commonjs/utilities/utilities.js

@@ -1,8 +1,8 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.copyStyle = exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatScientificLimitWidth = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.computeLongestBars = exports.groupChartDataByYValue = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.defaultYAxisTickFormatter = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = exports.MIN_DONUT_RADIUS = exports.MIN_DOMAIN_MARGIN = void 0;
-exports.sortAxisCategories = exports.truncateString = exports.domainRangeOfNumericForScatterChart = exports.domainRangeOfDateForScatterChart = exports.getCurveFactory = exports.createMeasurementSpan = void 0;
+exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatScientificLimitWidth = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.computeLongestBars = exports.groupChartDataByYValue = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.DEFAULT_WRAP_WIDTH = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.defaultYAxisTickFormatter = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = exports.MIN_DONUT_RADIUS = exports.MIN_DOMAIN_MARGIN = void 0;
+exports.sortAxisCategories = exports.truncateString = exports.domainRangeOfNumericForScatterChart = exports.domainRangeOfDateForScatterChart = exports.getCurveFactory = exports.createMeasurementSpan = exports.copyStyle = void 0;
 var tslib_1 = require("tslib");
 var d3_axis_1 = require("d3-axis");
 var d3_array_1 = require("d3-array");
@@ -75,7 +75,7 @@ exports.defaultYAxisTickFormatter = defaultYAxisTickFormatter;
  */
 function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
     var _a;
-    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _b === void 0 ? true : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, _d = xAxisParams.tickPadding, tickPadding = _d === void 0 ? 10 : _d, xAxisCount = xAxisParams.xAxisCount, xAxisElement = xAxisParams.xAxisElement, hideTickOverlap = xAxisParams.hideTickOverlap;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _b === void 0 ? true : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, _d = xAxisParams.tickPadding, tickPadding = _d === void 0 ? 10 : _d, xAxisCount = xAxisParams.xAxisCount, xAxisElement = xAxisParams.xAxisElement, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth;
     var xAxisScale = (0, d3_scale_1.scaleLinear)()
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
@@ -89,7 +89,7 @@ function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
         return (0, chart_utilities_1.formatToLocaleString)(xAxisValue, culture);
     };
     if (hideTickOverlap && typeof xAxisCount === 'undefined') {
-        var longestLabelWidth = (0, exports.calculateLongestLabelWidth)(xAxisScale.ticks().map(tickFormat), '[class^="xAxis-"] text') + 20;
+        var longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 20;
         var _e = xAxisScale.range(), start = _e[0], end = _e[1];
         tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
     }
@@ -215,7 +215,7 @@ function isPowerOf10(num) {
  */
 function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter, useUTC) {
     var _a;
-    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _b = xAxisParams.tickPadding, tickPadding = _b === void 0 ? 6 : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, xAxisCount = xAxisParams.xAxisCount;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _b = xAxisParams.tickPadding, tickPadding = _b === void 0 ? 6 : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, xAxisCount = xAxisParams.xAxisCount, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth;
     var xAxisScale = useUTC ? (0, d3_scale_1.scaleUtc)() : (0, d3_scale_1.scaleTime)();
     xAxisScale
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
@@ -253,7 +253,7 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
         }
         return (0, chart_utilities_1.formatDateToLocaleString)(domainValue, culture, useUTC, false, formatOptions);
     };
-    var longestLabelWidth = (0, exports.calculateLongestLabelWidth)(xAxisScale.ticks().map(tickFormat), '[class^="xAxis-"] text') + 40;
+    var longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 40;
     var _d = xAxisScale.range(), start = _d[0], end = _d[1];
     var maxPossibleTickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
     tickCount = Math.min(maxPossibleTickCount, xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : tickCount);
@@ -281,7 +281,7 @@ exports.createDateXAxis = createDateXAxis;
  */
 function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
     var _a;
-    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisPadding, xAxisPadding = _d === void 0 ? 0.1 : _d, xAxisInnerPadding = xAxisParams.xAxisInnerPadding, xAxisOuterPadding = xAxisParams.xAxisOuterPadding, containerWidth = xAxisParams.containerWidth, hideTickOverlap = xAxisParams.hideTickOverlap;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisPadding, xAxisPadding = _d === void 0 ? 0.1 : _d, xAxisInnerPadding = xAxisParams.xAxisInnerPadding, xAxisOuterPadding = xAxisParams.xAxisOuterPadding, containerWidth = xAxisParams.containerWidth, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth;
     var xAxisScale = (0, d3_scale_1.scaleBand)()
         .domain(dataset)
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue])
@@ -293,7 +293,7 @@ function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
         // Here, we need the width of each individual label to detect overlaps,
         // but calculateLongestLabelWidth returns the maximum pixel width from an array of labels.
         // So call this function separately for each label, instead of the entire array.
-        var tickSizes = tickValues.map(function (value) { return (0, exports.calculateLongestLabelWidth)([value], '[class^="xAxis-"] text'); });
+        var tickSizes = tickValues.map(function (value) { return calcMaxLabelWidth([value]); });
         // for LTR
         var start = 0;
         var end = containerWidth;
@@ -407,10 +407,10 @@ function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDataset, use
     if (roundedTicks === void 0) { roundedTicks = false; }
     var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, containerWidth = yAxisParams.containerWidth, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, eventAnnotationProps = yAxisParams.eventAnnotationProps, eventLabelHeight = yAxisParams.eventLabelHeight;
     // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
-    var tempVal = maxOfYVal || yMinMaxValues.endValue;
+    var tempVal = maxOfYVal || yMinMaxValues.endValue || 0;
     var finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
     var finalYmin = supportNegativeData
-        ? Math.min(yMinMaxValues.startValue, yMinValue || 0)
+        ? Math.min(yMinMaxValues.startValue || 0, yMinValue || 0)
         : yMinMaxValues.startValue < yMinValue
             ? 0
             : yMinValue;
@@ -566,6 +566,7 @@ function silceOrAppendToArray(array, value) {
     }
 }
 exports.silceOrAppendToArray = silceOrAppendToArray;
+exports.DEFAULT_WRAP_WIDTH = 10;
 /**
  * This method used for wrapping of x axis labels (tick values).
  * It breaks down given text value by space separated and calculates the total height needed to display all the words.
@@ -576,21 +577,19 @@ exports.silceOrAppendToArray = silceOrAppendToArray;
  * @returns
  */
 function createWrapOfXLabels(wrapLabelProps) {
-    var node = wrapLabelProps.node, xAxis = wrapLabelProps.xAxis, noOfCharsToTruncate = wrapLabelProps.noOfCharsToTruncate, showXAxisLablesTooltip = wrapLabelProps.showXAxisLablesTooltip;
+    var node = wrapLabelProps.node, xAxis = wrapLabelProps.xAxis, noOfCharsToTruncate = wrapLabelProps.noOfCharsToTruncate, showXAxisLablesTooltip = wrapLabelProps.showXAxisLablesTooltip, _a = wrapLabelProps.width, width = _a === void 0 ? exports.DEFAULT_WRAP_WIDTH : _a;
     if (node === null) {
         return;
     }
     var axisNode = (0, d3_selection_1.select)(node).call(xAxis);
     var removeVal = 0;
-    var width = 10;
-    var arr = [];
+    var maxLines = 1;
     axisNode.selectAll('.tick text').each(function () {
         var text = (0, d3_selection_1.select)(this);
         var totalWord = text.text();
         var truncatedWord = "".concat(text.text().slice(0, noOfCharsToTruncate), "...");
         var totalWordLength = text.text().length;
         var words = text.text().split(/\s+/).reverse();
-        arr.push(words.length);
         var word = '';
         var line = [];
         var lineNumber = 0;
@@ -611,7 +610,7 @@ function createWrapOfXLabels(wrapLabelProps) {
                 .attr('id', 'showDots')
                 .attr('x', 0)
                 .attr('y', y)
-                .attr('dy', ++lineNumber * lineHeight + dy + 'em')
+                .attr('dy', dy + 'em')
                 .text(truncatedWord);
         }
         else if (showXAxisLablesTooltip && totalWordLength <= noOfCharsToTruncate) {
@@ -620,7 +619,7 @@ function createWrapOfXLabels(wrapLabelProps) {
                 .attr('id', 'LessLength')
                 .attr('x', 0)
                 .attr('y', y)
-                .attr('dy', ++lineNumber * lineHeight + dy + 'em')
+                .attr('dy', dy + 'em')
                 .text(totalWord);
         }
         else {
@@ -640,32 +639,20 @@ function createWrapOfXLabels(wrapLabelProps) {
                         .text(word);
                 }
             }
-            var maxDigit = Math.max.apply(Math, arr);
-            var maxHeight_1 = 12; // intial value to render corretly first time
-            axisNode.selectAll('text').each(function () {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                var outerHTMLElement = document.getElementById('WordBreakId');
-                var BoxCordinates = outerHTMLElement && outerHTMLElement.getBoundingClientRect();
-                var boxHeight = BoxCordinates && BoxCordinates.height;
-                if (boxHeight > maxHeight_1) {
-                    maxHeight_1 = boxHeight;
-                }
-            });
-            // If we take directly maxDigit * maxheight, then it will show more height between x axis tick values and bottom.
-            // To avoid this, reducing maxDigit value by removing some digit based on legth of word.
-            var removeDigit = 4;
-            if (maxDigit <= 2) {
-                removeDigit = 1;
-            }
-            else if (maxDigit > 2 && maxDigit <= 6) {
-                removeDigit = 2;
-            }
-            else if (maxDigit > 6 && maxDigit <= 9) {
-                removeDigit = 3;
-            }
-            removeVal = (maxDigit - removeDigit) * maxHeight_1;
         }
+        maxLines = Math.max(maxLines, lineNumber + 1);
     });
+    if (!showXAxisLablesTooltip) {
+        var maxHeight = 12; // intial value to render corretly first time
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var outerHTMLElement = document.getElementById('WordBreakId');
+        var BoxCordinates = outerHTMLElement && outerHTMLElement.getBoundingClientRect();
+        var boxHeight = BoxCordinates && BoxCordinates.height;
+        if (boxHeight > maxHeight) {
+            maxHeight = boxHeight;
+        }
+        removeVal = (maxLines - 1) * maxHeight;
+    }
     return removeVal > 0 ? removeVal : 0;
 }
 exports.createWrapOfXLabels = createWrapOfXLabels;