@fluentui/react-charting 5.23.58 → 5.23.60

package/lib/components/Legends/Legends.styles.js

@@ -1,5 +1,18 @@
 import { __assign } from "tslib";
 import { HighContrastSelector, getFocusStyle } from '@fluentui/react/lib/Styling';
+// Constants needed to create legends using SVG for image export
+export var LEGEND_CONTAINER_MARGIN_TOP = 8;
+export var LEGEND_CONTAINER_MARGIN_START = 12;
+export var LEGEND_PADDING = 8;
+export var LEGEND_HEIGHT = 32;
+export var LEGEND_SHAPE_BORDER = 1;
+var LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;
+// SVG strokes are drawn centered around the path, with half of the stroke width extending inward
+// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,
+// expand the shape accordingly.
+export var LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;
+export var LEGEND_SHAPE_MARGIN_END = 8;
+export var INACTIVE_LEGEND_TEXT_OPACITY = 0.67;
 export var getStyles = function (props) {
     var _a, _b;
     var className = props.className, theme = props.theme, _c = props.isLineLegendInBarChart, isLineLegendInBarChart = _c === void 0 ? false : _c;
@@ -30,7 +43,7 @@ export var getStyles = function (props) {
                 alignItems: 'center',
                 cursor: 'pointer',
                 border: 'none',
-                padding: '8px',
+                padding: "".concat(LEGEND_PADDING, "px"),
                 background: 'none',
                 textTransform: 'capitalize',
             },
@@ -42,11 +55,11 @@ export var getStyles = function (props) {
                     opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground ? '0.6' : '',
                 },
                 _a),
-            width: '12px',
-            height: isLineLegendInBarChart ? '4px' : '12px',
+            width: "".concat(LEGEND_SHAPE_SIZE_WITHOUT_BORDER, "px"),
+            height: isLineLegendInBarChart ? '4px' : "".concat(LEGEND_SHAPE_SIZE_WITHOUT_BORDER, "px"),
             backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,
-            marginRight: '8px',
-            border: '1px solid',
+            marginRight: "".concat(LEGEND_SHAPE_MARGIN_END, "px"),
+            border: "".concat(LEGEND_SHAPE_BORDER, "px solid"),
             borderColor: props.borderColor ? props.borderColor : theme === null || theme === void 0 ? void 0 : theme.semanticColors.buttonBorder,
             content: props.stripePattern
                 ? // eslint-disable-next-line @fluentui/max-len
@@ -55,7 +68,7 @@ export var getStyles = function (props) {
         },
         shape: [
             {
-                marginRight: '8px',
+                marginRight: "".concat(LEGEND_SHAPE_MARGIN_END, "px"),
             },
         ],
         triangle: {
@@ -81,7 +94,7 @@ export var getStyles = function (props) {
                 },
                 _b),
         },
-        text: __assign(__assign({}, fonts.small), { lineHeight: '16px', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground ? '0.67' : '' }),
+        text: __assign(__assign({}, fonts.small), { lineHeight: '16px', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, opacity: props.colorOnSelectedState === theme.semanticColors.buttonBackground ? "".concat(INACTIVE_LEGEND_TEXT_OPACITY) : '' }),
         hoverChange: {
             width: '12px',
             height: '12px',
@@ -92,7 +105,7 @@ export var getStyles = function (props) {
         },
         overflowIndicationTextStyle: [
             getFocusStyle(theme, options),
-            __assign(__assign({ cursor: 'pointer', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText }, fonts.small), { lineHeight: '16px', padding: '8px' }),
+            __assign(__assign({ cursor: 'pointer', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText }, fonts.small), { lineHeight: '16px', padding: "".concat(LEGEND_PADDING, "px") }),
         ],
         hoverCardRoot: {
             padding: '8px',

package/lib/components/Legends/Legends.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legends.styles.js","sourceRoot":"../src/","sources":["components/Legends/Legends.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ILegendsStyles, ILegendStyleProps } from './Legends.types';\nimport { HighContrastSelector, getFocusStyle, IGetFocusStylesOptions, IStyle } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: ILegendStyleProps): ILegendsStyles => {\n  const { className, theme, isLineLegendInBarChart = false } = props;\n  const { palette, fonts } = theme!;\n  const options: IGetFocusStylesOptions = {\n    inset: undefined,\n    position: undefined,\n    highContrastStyle: {\n      outlineColor: theme!.semanticColors.focusBorder,\n    },\n    borderColor: 'transparent',\n    outlineColor: undefined,\n  };\n  return {\n    root: [\n      {\n        whiteSpace: 'nowrap',\n        width: '100%',\n        alignItems: 'center',\n        margin: '-8px 0 0 -8px',\n      },\n      className,\n    ],\n    legend: [\n      getFocusStyle(theme!, options),\n      {\n        display: 'flex',\n        alignItems: 'center',\n        cursor: 'pointer',\n        border: 'none',\n        padding: '8px',\n        background: 'none',\n        textTransform: 'capitalize',\n      },\n    ],\n    rect: {\n      selectors: {\n        [HighContrastSelector]: {\n          content: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n          opacity: props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? '0.6' : '',\n        },\n      },\n      width: '12px',\n      height: isLineLegendInBarChart ? '4px' : '12px',\n      backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,\n      marginRight: '8px',\n      border: '1px solid',\n      borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,\n      content: props.stripePattern\n        ? // eslint-disable-next-line @fluentui/max-len\n          `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`\n        : '',\n    },\n    shape: [\n      {\n        marginRight: '8px',\n      },\n    ],\n    triangle: {\n      width: '0',\n      height: '0',\n      borderLeft: '6px solid transparent',\n      borderRight: '6px solid transparent',\n      borderTop: '10.4px solid',\n      borderTopColor: props.colorOnSelectedState,\n      marginRight: '8px',\n      opacity:\n        props.colorOnSelectedState === theme!.semanticColors.buttonBackground\n          ? '0.6'\n          : props.opacity\n          ? props.opacity\n          : '',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '10.4px',\n          width: '10.4px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n        } as IStyle,\n      },\n    },\n    text: {\n      ...fonts.small,\n      lineHeight: '16px',\n      color: theme?.semanticColors.bodyText,\n      opacity: props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? '0.67' : '',\n    },\n    hoverChange: {\n      width: '12px',\n      height: '12px',\n      backgroundColor: theme!.semanticColors.buttonBackground,\n      marginRight: '8px',\n      border: '1px solid',\n      borderColor: props.borderColor ? props.borderColor : palette.black,\n    },\n    overflowIndicationTextStyle: [\n      getFocusStyle(theme!, options),\n      {\n        cursor: 'pointer',\n        color: theme?.semanticColors.bodyText,\n        ...fonts.small,\n        lineHeight: '16px',\n        padding: '8px',\n      },\n    ],\n    hoverCardRoot: {\n      padding: '8px',\n    },\n    subComponentStyles: {\n      hoverCardStyles: {\n        host: [getFocusStyle(theme!, options)],\n      },\n    },\n  };\n};\n"]}
+{"version":3,"file":"Legends.styles.js","sourceRoot":"../src/","sources":["components/Legends/Legends.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ILegendsStyles, ILegendStyleProps } from './Legends.types';\nimport { HighContrastSelector, getFocusStyle, IGetFocusStylesOptions, IStyle } from '@fluentui/react/lib/Styling';\n\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n\nexport const getStyles = (props: ILegendStyleProps): ILegendsStyles => {\n  const { className, theme, isLineLegendInBarChart = false } = props;\n  const { palette, fonts } = theme!;\n  const options: IGetFocusStylesOptions = {\n    inset: undefined,\n    position: undefined,\n    highContrastStyle: {\n      outlineColor: theme!.semanticColors.focusBorder,\n    },\n    borderColor: 'transparent',\n    outlineColor: undefined,\n  };\n  return {\n    root: [\n      {\n        whiteSpace: 'nowrap',\n        width: '100%',\n        alignItems: 'center',\n        margin: '-8px 0 0 -8px',\n      },\n      className,\n    ],\n    legend: [\n      getFocusStyle(theme!, options),\n      {\n        display: 'flex',\n        alignItems: 'center',\n        cursor: 'pointer',\n        border: 'none',\n        padding: `${LEGEND_PADDING}px`,\n        background: 'none',\n        textTransform: 'capitalize',\n      },\n    ],\n    rect: {\n      selectors: {\n        [HighContrastSelector]: {\n          content: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n          opacity: props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? '0.6' : '',\n        },\n      },\n      width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n      height: isLineLegendInBarChart ? '4px' : `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n      backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,\n      marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n      border: `${LEGEND_SHAPE_BORDER}px solid`,\n      borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,\n      content: props.stripePattern\n        ? // eslint-disable-next-line @fluentui/max-len\n          `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`\n        : '',\n    },\n    shape: [\n      {\n        marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n      },\n    ],\n    triangle: {\n      width: '0',\n      height: '0',\n      borderLeft: '6px solid transparent',\n      borderRight: '6px solid transparent',\n      borderTop: '10.4px solid',\n      borderTopColor: props.colorOnSelectedState,\n      marginRight: '8px',\n      opacity:\n        props.colorOnSelectedState === theme!.semanticColors.buttonBackground\n          ? '0.6'\n          : props.opacity\n          ? props.opacity\n          : '',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '10.4px',\n          width: '10.4px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n        } as IStyle,\n      },\n    },\n    text: {\n      ...fonts.small,\n      lineHeight: '16px',\n      color: theme?.semanticColors.bodyText,\n      opacity:\n        props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? `${INACTIVE_LEGEND_TEXT_OPACITY}` : '',\n    },\n    hoverChange: {\n      width: '12px',\n      height: '12px',\n      backgroundColor: theme!.semanticColors.buttonBackground,\n      marginRight: '8px',\n      border: '1px solid',\n      borderColor: props.borderColor ? props.borderColor : palette.black,\n    },\n    overflowIndicationTextStyle: [\n      getFocusStyle(theme!, options),\n      {\n        cursor: 'pointer',\n        color: theme?.semanticColors.bodyText,\n        ...fonts.small,\n        lineHeight: '16px',\n        padding: `${LEGEND_PADDING}px`,\n      },\n    ],\n    hoverCardRoot: {\n      padding: '8px',\n    },\n    subComponentStyles: {\n      hoverCardStyles: {\n        host: [getFocusStyle(theme!, options)],\n      },\n    },\n  };\n};\n"]}

package/lib/components/Legends/Legends.types.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
-import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';
 import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';
 import { IFocusZoneProps } from '@fluentui/react-focus';
@@ -234,6 +234,10 @@ export interface ILegendsProps {
      * The shape for the legend.
      */
     shape?: LegendShape;
+    /**
+     * Callback to access the public methods and properties of the component.
+     */
+    ref?: IRefObject<ILegendContainer>;
 }
 /**
  * @public
@@ -243,3 +247,13 @@ export interface ILegendsProps {
  * {@docCategory Legends}
  */
 export type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;
+/**
+ * {@docCategory Legends}
+ */
+export interface ILegendContainer {
+    toSVG: (svgWidth: number, isRTL?: boolean) => {
+        node: SVGGElement | null;
+        width: number;
+        height: number;
+    };
+}

package/lib/components/Legends/Legends.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legends.types.js","sourceRoot":"../src/","sources":["components/Legends/Legends.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\nexport interface ILegendOverflowData {\n  primary: ILegend[];\n\n  overflow?: ILegend[];\n}\n\n/**\n * @public\n * {@docCategory Legends}\n */\nexport interface ILegendSubComponentStyles {\n  hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;\n}\n\n/**\n * @public\n * Legends styles\n * {@docCategory Legends}\n */\nexport interface ILegendsStyles {\n  /**\n   * Style set for the root of the legend component\n   */\n  root: IStyle;\n\n  /**\n   * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n   */\n  legend: IStyle;\n\n  /**\n   * Style set for the rectangle that represents a legend\n   */\n  rect: IStyle;\n\n  /**\n   * styles set for the shape that represents a legend\n   */\n  shape: IStyle;\n\n  /**\n   * Style set for the triangle that represents a legend\n   */\n  triangle: IStyle;\n\n  /**\n   * Style for the legend text\n   */\n  text: IStyle;\n\n  /**\n   * Style for the legend text\n   */\n  hoverChange: IStyle;\n\n  /**\n   * Style for the text that indicates the no.of legends that are in hovercard due to lack of space\n   */\n  overflowIndicationTextStyle: IStyle;\n\n  /**\n   * Style for the overflow container\n   */\n  hoverCardRoot: IStyle;\n\n  /**\n   * sub component styles\n   */\n  subComponentStyles: ILegendSubComponentStyles;\n}\n\n/**\n * @public\n * ILegend interface\n * {@docCategory Legends}\n */\nexport interface ILegend {\n  /**\n   * Defines the title of the legend\n   */\n  title: string;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  action?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverAction?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon moving the mouse away from the legend\n   */\n  onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n  /**\n   * The color for the legend\n   */\n  color: string;\n\n  /**\n   * The opacity of the legend color\n   */\n  opacity?: number;\n\n  /**\n   * The shape for the legend\n   */\n  shape?: LegendShape;\n\n  /**\n   * Indicated whether or not to apply stripe pattern\n   */\n  stripePattern?: boolean;\n\n  /**\n   * Indicates if the legend belongs to a line in the Bar Chart\n   */\n  isLineLegendInBarChart?: boolean;\n\n  /*\n   *  native button props for the legend button\n   */\n  nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * @public\n * Legend style properties\n * {@docCategory Legends}\n */\nexport interface ILegendStyleProps {\n  theme?: ITheme;\n  className?: string;\n  colorOnSelectedState?: string;\n  borderColor?: string;\n  opacity?: number;\n  overflow?: boolean;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\n/**\n * @public\n * Legend properties\n * {@docCategory Legends}\n */\nexport interface ILegendsProps {\n  /**\n   * Prop that takes list of legends\n   */\n  legends: ILegend[];\n\n  /**\n   * Additional CSS class(es) to apply to the legneds component.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;\n\n  /**\n   * This prop makes the legends component align itself to the center in the container it is sitting in\n   */\n  centerLegends?: boolean;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledWrapLines?: boolean;\n\n  /**\n   * props for the overflow set component\n   */\n  overflowProps?: Partial<IOverflowSetProps>;\n\n  /**\n   * focus zone props in hover card\n   */\n  focusZonePropsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * text for overflow legends string\n   */\n  overflowText?: string;\n\n  /**\n   * prop that decides if legends are focusable\n   * @default true\n   */\n  allowFocusOnLegends?: boolean;\n\n  /**\n   * prop that decide if we can select multiple legends or single legend at a time\n   * @default false\n   */\n  canSelectMultipleLegends?: boolean;\n\n  /**\n   * Defines the function that is executed upon hiding of hover card\n   * make sure to send prop  when  the prop  is canSelectMultipleLegends is set to true\n   * and empty the selected state legends\n   */\n  onLegendHoverCardLeave?: VoidFunction;\n\n  /**\n   * Callback issued when the selected option changes.\n   */\n  onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => void;\n\n  /**\n   * Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when\n   * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegends instead.\n   *\n   * @see selectedLegends for setting the selected legends in controlled mode.\n   * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.\n   */\n  defaultSelectedLegends?: string[];\n\n  /**\n   * Key that will be initially used to set selected item. This prop is used for single-select scenarios when\n   * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegend instead.\n   *\n   * @see selectedLegend for setting the selected legend in controlled mode.\n   * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.\n   */\n  defaultSelectedLegend?: string;\n\n  /**\n   * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is\n   * true. For single-select, use selectedLegend.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.\n   * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.\n   */\n  selectedLegends?: string[];\n\n  /**\n   * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is\n   * false or unspecified. For multi-select, use selectedLegends.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.\n   * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.\n   */\n  selectedLegend?: string;\n\n  /**\n   * The shape for the legend.\n   */\n  shape?: LegendShape;\n}\n\n/**\n * @public\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n */\nexport type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;\n"]}
+{"version":3,"file":"Legends.types.js","sourceRoot":"../src/","sources":["components/Legends/Legends.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\nexport interface ILegendOverflowData {\n  primary: ILegend[];\n\n  overflow?: ILegend[];\n}\n\n/**\n * @public\n * {@docCategory Legends}\n */\nexport interface ILegendSubComponentStyles {\n  hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;\n}\n\n/**\n * @public\n * Legends styles\n * {@docCategory Legends}\n */\nexport interface ILegendsStyles {\n  /**\n   * Style set for the root of the legend component\n   */\n  root: IStyle;\n\n  /**\n   * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n   */\n  legend: IStyle;\n\n  /**\n   * Style set for the rectangle that represents a legend\n   */\n  rect: IStyle;\n\n  /**\n   * styles set for the shape that represents a legend\n   */\n  shape: IStyle;\n\n  /**\n   * Style set for the triangle that represents a legend\n   */\n  triangle: IStyle;\n\n  /**\n   * Style for the legend text\n   */\n  text: IStyle;\n\n  /**\n   * Style for the legend text\n   */\n  hoverChange: IStyle;\n\n  /**\n   * Style for the text that indicates the no.of legends that are in hovercard due to lack of space\n   */\n  overflowIndicationTextStyle: IStyle;\n\n  /**\n   * Style for the overflow container\n   */\n  hoverCardRoot: IStyle;\n\n  /**\n   * sub component styles\n   */\n  subComponentStyles: ILegendSubComponentStyles;\n}\n\n/**\n * @public\n * ILegend interface\n * {@docCategory Legends}\n */\nexport interface ILegend {\n  /**\n   * Defines the title of the legend\n   */\n  title: string;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  action?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverAction?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon moving the mouse away from the legend\n   */\n  onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n  /**\n   * The color for the legend\n   */\n  color: string;\n\n  /**\n   * The opacity of the legend color\n   */\n  opacity?: number;\n\n  /**\n   * The shape for the legend\n   */\n  shape?: LegendShape;\n\n  /**\n   * Indicated whether or not to apply stripe pattern\n   */\n  stripePattern?: boolean;\n\n  /**\n   * Indicates if the legend belongs to a line in the Bar Chart\n   */\n  isLineLegendInBarChart?: boolean;\n\n  /*\n   *  native button props for the legend button\n   */\n  nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * @public\n * Legend style properties\n * {@docCategory Legends}\n */\nexport interface ILegendStyleProps {\n  theme?: ITheme;\n  className?: string;\n  colorOnSelectedState?: string;\n  borderColor?: string;\n  opacity?: number;\n  overflow?: boolean;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\n/**\n * @public\n * Legend properties\n * {@docCategory Legends}\n */\nexport interface ILegendsProps {\n  /**\n   * Prop that takes list of legends\n   */\n  legends: ILegend[];\n\n  /**\n   * Additional CSS class(es) to apply to the legneds component.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;\n\n  /**\n   * This prop makes the legends component align itself to the center in the container it is sitting in\n   */\n  centerLegends?: boolean;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledWrapLines?: boolean;\n\n  /**\n   * props for the overflow set component\n   */\n  overflowProps?: Partial<IOverflowSetProps>;\n\n  /**\n   * focus zone props in hover card\n   */\n  focusZonePropsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * text for overflow legends string\n   */\n  overflowText?: string;\n\n  /**\n   * prop that decides if legends are focusable\n   * @default true\n   */\n  allowFocusOnLegends?: boolean;\n\n  /**\n   * prop that decide if we can select multiple legends or single legend at a time\n   * @default false\n   */\n  canSelectMultipleLegends?: boolean;\n\n  /**\n   * Defines the function that is executed upon hiding of hover card\n   * make sure to send prop  when  the prop  is canSelectMultipleLegends is set to true\n   * and empty the selected state legends\n   */\n  onLegendHoverCardLeave?: VoidFunction;\n\n  /**\n   * Callback issued when the selected option changes.\n   */\n  onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => void;\n\n  /**\n   * Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when\n   * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegends instead.\n   *\n   * @see selectedLegends for setting the selected legends in controlled mode.\n   * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.\n   */\n  defaultSelectedLegends?: string[];\n\n  /**\n   * Key that will be initially used to set selected item. This prop is used for single-select scenarios when\n   * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.\n   *\n   * Updating this prop does not change the selection after the component has been initialized. For controlled\n   * selections, use selectedLegend instead.\n   *\n   * @see selectedLegend for setting the selected legend in controlled mode.\n   * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.\n   */\n  defaultSelectedLegend?: string;\n\n  /**\n   * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is\n   * true. For single-select, use selectedLegend.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.\n   * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.\n   */\n  selectedLegends?: string[];\n\n  /**\n   * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is\n   * false or unspecified. For multi-select, use selectedLegends.\n   *\n   * When this prop is provided, the component is controlled and does not automatically update the selection based on\n   * user interactions; the parent component must update the value passed to this property by handling the onChange\n   * event.\n   *\n   * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.\n   * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.\n   */\n  selectedLegend?: string;\n\n  /**\n   * The shape for the legend.\n   */\n  shape?: LegendShape;\n\n  /**\n   * Callback to access the public methods and properties of the component.\n   */\n  ref?: IRefObject<ILegendContainer>;\n}\n\n/**\n * @public\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n */\nexport type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;\n\n/**\n * {@docCategory Legends}\n */\nexport interface ILegendContainer {\n  toSVG: (\n    svgWidth: number,\n    isRTL?: boolean,\n  ) => {\n    node: SVGGElement | null;\n    width: number;\n    height: number;\n  };\n}\n"]}

package/lib/components/LineChart/LineChart.base.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IAccessibilityProps, IBasestate, ILineChartProps, ILineChartPoints, ICustomizedCalloutData, IColorFillBarsProps, ILineChartDataPoint } from '../../index';
-import { IChart } from '../../types/index';
+import { IChart, IImageExportOptions } from '../../types/index';
 type LineChartDataWithIndex = ILineChartPoints & {
     index: number;
 };
@@ -41,13 +41,21 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _emptyChartId;
     private _isRTL;
     private _cartesianChartRef;
+    private _legendsRef;
+    private _xMin;
+    private _yMin;
+    private _xMax;
+    private _xPadding;
+    private _yPadding;
     constructor(props: ILineChartProps);
     componentDidUpdate(prevProps: ILineChartProps): void;
     render(): JSX.Element;
     get chartContainer(): HTMLElement | null;
+    toImage: (opts?: IImageExportOptions) => Promise<string>;
     private _getDomainNRangeValues;
     private _injectIndexPropertyInLineChartData;
     private _getCustomizedCallout;
+    private _getNumericMinMaxOfY;
     private _getMargins;
     private _initializeLineChartData;
     private _handleSingleLegendSelectionAction;
@@ -57,6 +65,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _getBoxWidthOfShape;
     private _getPath;
     private _getPointFill;
+    private _getRangeForScatterMarkerSize;
     private _createLines;
     private _createColorFillBars;
     private _getStripePattern;
@@ -89,6 +98,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _noLegendHighlighted;
     private _getColorFillBarOpacity;
     private _getAriaLabel;
+    private _getDomainNRangeValuesWithPadding;
     private _isChartEmpty;
     private _getChartTitle;
 }

package/lib/components/LineChart/LineChart.base.js

@@ -4,11 +4,13 @@ import { select as d3Select, pointer } from 'd3-selection';
 import { bisector } from 'd3-array';
 import { Legends } from '../Legends/index';
 import { line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';
+import { max as d3Max, min as d3Min } from 'd3-array';
 import { classNamesFunction, getId, find, memoizeFunction, getRTL, initializeComponentRef, } from '@fluentui/react/lib/Utilities';
 import { CartesianChart, } from '../../index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfXAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfNumericForAreaChart, createStringYAxis, formatDate, areArraysEqual, } from '../../utilities/index';
+import { toImage } from '../../utilities/image-export-utils';
 var getClassNames = classNamesFunction();
 var PointSize;
 (function (PointSize) {
@@ -59,9 +61,21 @@ var LineChartBase = /** @class */ (function (_super) {
         _this_1._yAxisScale = '';
         _this_1.eventLabelHeight = 36;
         _this_1._isRTL = getRTL();
+        _this_1._xMin = Number.NEGATIVE_INFINITY;
+        _this_1._yMin = Number.NEGATIVE_INFINITY;
+        _this_1._xMax = Number.POSITIVE_INFINITY;
+        _this_1._xPadding = 0;
+        _this_1._yPadding = 0;
+        _this_1.toImage = function (opts) {
+            var _a, _b;
+            return toImage((_a = _this_1._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this_1._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this_1._isRTL, opts);
+        };
         _this_1._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
             var domainNRangeValue;
-            if (xAxisType === XAxisTypes.NumericAxis) {
+            if (_this_1.props.lineMode === 'scatter' && xAxisType === XAxisTypes.NumericAxis) {
+                domainNRangeValue = _this_1._getDomainNRangeValuesWithPadding(points, margins, width, isRTL);
+            }
+            else if (xAxisType === XAxisTypes.NumericAxis) {
                 domainNRangeValue = domainRangeOfNumericForAreaChart(points, margins, width, isRTL);
             }
             else if (xAxisType === XAxisTypes.DateAxis) {
@@ -105,6 +119,18 @@ var LineChartBase = /** @class */ (function (_super) {
                     ? _this_1.props.onRenderCalloutPerDataPoint(_this_1.state.dataPointCalloutProps)
                     : null;
         };
+        _this_1._getNumericMinMaxOfY = function (points) {
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            var _a = findNumericMinMaxOfY(points), startValue = _a.startValue, endValue = _a.endValue;
+            _this_1._yMin = startValue;
+            if (_this_1.props.lineMode === 'scatter') {
+                _this_1._yPadding = (endValue - startValue) * 0.1;
+            }
+            return {
+                startValue: startValue - _this_1._yPadding,
+                endValue: endValue + _this_1._yPadding,
+            };
+        };
         _this_1._getMargins = function (margins) {
             _this_1.margins = margins;
         };
@@ -548,6 +574,34 @@ var LineChartBase = /** @class */ (function (_super) {
             var yValue = point.yAxisCalloutData || point.y;
             return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
         };
+        _this_1._getDomainNRangeValuesWithPadding = function (points, margins, width, isRTL) {
+            _this_1._xMin = d3Min(points, function (point) {
+                return d3Min(point.data, function (item) { return item.x; });
+            });
+            _this_1._xMax = d3Max(points, function (point) {
+                return d3Max(point.data, function (item) {
+                    return item.x;
+                });
+            });
+            if (_this_1.props.lineMode === 'scatter') {
+                _this_1._xPadding = (_this_1._xMax - _this_1._xMin) * 0.1;
+            }
+            var rStartValue = margins.left;
+            var rEndValue = width - margins.right;
+            return isRTL
+                ? {
+                    dStartValue: _this_1._xMax + _this_1._xPadding,
+                    dEndValue: _this_1._xMin - _this_1._xPadding,
+                    rStartValue: rStartValue,
+                    rEndValue: rEndValue,
+                }
+                : {
+                    dStartValue: _this_1._xMin - _this_1._xPadding,
+                    dEndValue: _this_1._xMax + _this_1._xPadding,
+                    rStartValue: rStartValue,
+                    rEndValue: rEndValue,
+                };
+        };
         _this_1._getChartTitle = function () {
             var _a = _this_1.props.data, chartTitle = _a.chartTitle, lineChartData = _a.lineChartData;
             return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Line chart with ".concat((lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0, " lines. ");
@@ -583,6 +637,7 @@ var LineChartBase = /** @class */ (function (_super) {
         _this_1._firstRenderOptimization = true;
         _this_1._emptyChartId = getId('_LineChart_empty');
         _this_1._cartesianChartRef = React.createRef();
+        _this_1._legendsRef = React.createRef();
         props.eventAnnotationProps &&
             props.eventAnnotationProps.labelHeight &&
             (_this_1.eventLabelHeight = props.eventAnnotationProps.labelHeight);
@@ -632,7 +687,7 @@ var LineChartBase = /** @class */ (function (_super) {
             tickValues: tickValues,
             tickFormat: tickFormat,
         };
-        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: findNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef, 
+        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: this._getNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef, 
             /* eslint-disable react/jsx-no-bind */
             // eslint-disable-next-line react/no-children-prop
             children: function (props) {
@@ -712,7 +767,14 @@ var LineChartBase = /** @class */ (function (_super) {
                 return legend;
             })
             : [];
-        return (React.createElement(Legends, __assign({ legends: __spreadArray(__spreadArray([], legendDataItems, true), colorFillBarsLegendDataItems, true), enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: this._onHoverCardHide }), this.props.legendProps)));
+        return (React.createElement(Legends, __assign({ legends: __spreadArray(__spreadArray([], legendDataItems, true), colorFillBarsLegendDataItems, true), enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: this._onHoverCardHide }), this.props.legendProps, { ref: this._legendsRef })));
+    };
+    LineChartBase.prototype._getRangeForScatterMarkerSize = function () {
+        var extraXPixels = this._isRTL
+            ? this._xAxisScale(this._xMax - this._xPadding) - this._xAxisScale(this._xMax)
+            : this._xAxisScale(this._xMin + this._xPadding) - this._xAxisScale(this._xMin);
+        var extraYPixels = this._yAxisScale(this._yMin) - this._yAxisScale(this._yMin + this._yPadding);
+        return Math.min(extraXPixels, extraYPixels);
     };
     LineChartBase.prototype._createLines = function (xElement, containerHeight) {
         var _this_1 = this;
@@ -724,6 +786,12 @@ var LineChartBase = /** @class */ (function (_super) {
         else {
             this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
         }
+        var extraMaxPixels = this.props.lineMode === 'scatter' ? this._getRangeForScatterMarkerSize() : 0;
+        var maxMarkerSize = d3Max(this._points, function (point) {
+            return d3Max(point.data, function (item) {
+                return item.markerSize;
+            });
+        });
         var _loop_1 = function (i) {
             var linesForLine = [];
             var bordersForLine = [];
@@ -737,7 +805,12 @@ var LineChartBase = /** @class */ (function (_super) {
                 var _2 = this_1._points[i].data[0], x1_1 = _2.x, y1 = _2.y, xAxisCalloutData_1 = _2.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _2.xAxisCalloutAccessibilityData;
                 var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
                 var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
-                pointsForLine.push(React.createElement("circle", __assign({ id: circleId_1, key: circleId_1, r: activePoint === circleId_1 ? 5.5 : 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(y1), fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": isLegendSelected, ref: function (e) {
+                var currentMarkerSize = this_1._points[i].data[0].markerSize;
+                pointsForLine.push(React.createElement("circle", __assign({ id: circleId_1, key: circleId_1, r: currentMarkerSize
+                        ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
+                        : activePoint === circleId_1
+                            ? 5.5
+                            : 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(y1), fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": isLegendSelected, ref: function (e) {
                         _this_1._refCallback(e, circleId_1);
                     }, onFocus: function () { return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))));
             }
@@ -793,7 +866,8 @@ var LineChartBase = /** @class */ (function (_super) {
                     var strokeWidth = ((_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                     var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                     var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
-                    pointsForLine.push(React.createElement("path", __assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) })));
+                    var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
+                    pointsForLine.push(this_1.props.lineMode === 'scatter' ? (React.createElement("circle", __assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: this_1._yAxisScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))) : (React.createElement("path", __assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))));
                     if (j + 1 === this_1._points[i].data.length) {
                         // If this is last point of the line segment.
                         var lastCircleId_1 = "".concat(circleId).concat(j, "L");
@@ -801,30 +875,34 @@ var LineChartBase = /** @class */ (function (_super) {
                         var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
                         path = this_1._getPath(this_1._xAxisScale(x2), this_1._yAxisScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
                         var _5 = this_1._points[i].data[j], lastCirlceXCallout_1 = _5.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _5.xAxisCalloutAccessibilityData;
+                        currentMarkerSize = this_1._points[i].data[j].markerSize;
                         pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
-                            React.createElement("path", __assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                            this_1.props.lineMode === 'scatter' ? (React.createElement("circle", __assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: this_1._yAxisScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
+                                    return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
+                                }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))) : (React.createElement("path", __assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                     return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
-                                }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) })),
+                                }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))),
                             React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: this_1._xAxisScale(x2), cy: this_1._yAxisScale(y2), opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
-                        /* eslint-enable react/jsx-no-bind */
                     }
-                    if (isLegendSelected) {
-                        // don't draw line if it is in a gap
-                        if (!isInGap) {
-                            var lineBorderWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.lineBorderWidth)
-                                ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
-                                : 0;
-                            if (lineBorderWidth > 0) {
-                                bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeLinecap: (_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.strokeLinecap) !== null && _s !== void 0 ? _s : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
+                    if (this_1.props.lineMode !== 'scatter') {
+                        if (isLegendSelected) {
+                            // don't draw line if it is in a gap
+                            if (!isInGap) {
+                                var lineBorderWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.lineBorderWidth)
+                                    ? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
+                                    : 0;
+                                if (lineBorderWidth > 0) {
+                                    bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeLinecap: (_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.strokeLinecap) !== null && _s !== void 0 ? _s : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
+                                }
+                                linesForLine.push(React.createElement("line", __assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
+                                        _this_1._refCallback(e, lineId);
+                                    }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeLinecap) !== null && _v !== void 0 ? _v : 'round', strokeDasharray: (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.strokeDasharray, strokeDashoffset: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
                             }
-                            linesForLine.push(React.createElement("line", __assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
-                                    _this_1._refCallback(e, lineId);
-                                }, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeLinecap) !== null && _v !== void 0 ? _v : 'round', strokeDasharray: (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.strokeDasharray, strokeDashoffset: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
                         }
-                    }
-                    else {
-                        if (!isInGap) {
-                            linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeLinecap) !== null && _z !== void 0 ? _z : 'round', strokeDasharray: (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.strokeDasharray, strokeDashoffset: (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeDashoffset, opacity: 0.1 }));
+                        else {
+                            if (!isInGap) {
+                                linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeLinecap) !== null && _z !== void 0 ? _z : 'round', strokeDasharray: (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.strokeDasharray, strokeDashoffset: (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeDashoffset, opacity: 0.1 }));
+                            }
                         }
                     }
                 };