@fluentui/react-charts 9.2.2 → 9.2.4

package/lib/components/SankeyChart/useSankeyChartStyles.styles.js

@@ -1,6 +1,7 @@
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/index';
+import { getTooltipStyle } from '../../utilities/index';
 export const sankeyChartClassNames = {
   root: 'fui-sc__root',
   nodes: 'fui-sc__nodes',
@@ -40,31 +41,21 @@ const useStyles = /*#__PURE__*/__styles({
     Bg96gwp: "f1i3iumi",
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62",
-    Byoj8tv: 0,
-    uwmqm3: 0,
-    z189sj: 0,
-    z8tnut: 0,
-    B0ocmuz: "f1t756mo",
+    z8tnut: "f17mpqex",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "fdvome7",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
     qhf8xq: "f1euv43f",
     fsow6f: "f17mccla",
-    Bhzewxz: "f113wtx2",
-    Bgh53k4: 0,
-    B2eet1l: 0,
-    De3pzq: 0,
-    Bcmaq0h: 0,
-    gk0gix: 0,
-    B20660r: 0,
-    B8a6bjv: 0,
-    Bpptf2m: 0,
-    e5kdtc: 0,
-    Bkjc3bi: 0,
-    ayd6f0: "fcm7iae",
+    Bhzewxz: "fr6rvge",
+    De3pzq: "fxugw4r",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
     B7oj6ja: 0,
-    Dimara: "fl4tsp0",
-    Bkecrkj: "f1aehjj5"
+    Dimara: "fq9zq91",
+    Bkecrkj: "f1aehjj5",
+    sj55zd: "f19n0e5"
   },
   nodeTextContainer: {
     B3gqxw3: "fk6oafs",
@@ -84,13 +75,9 @@ const useStyles = /*#__PURE__*/__styles({
 }, {
   d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1vx9l62{flex-direction:column;}", [".f1a3p1vp{overflow:hidden;}", {
     p: -1
-  }], ".f5q6cfr{fill:var(--colorNeutralBackground1);}", ".fu2q8de{stroke-width:3px;}", ".f1yc5x8p{fill:#F5F5F5;}", [".f1t756mo{padding:8px;}", {
+  }], ".f5q6cfr{fill:var(--colorNeutralBackground1);}", ".fu2q8de{stroke-width:3px;}", ".f1yc5x8p{fill:#F5F5F5;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
     p: -1
-  }], ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".f113wtx2{top:0px;}", [".fcm7iae{background:var(--colorNeutralBackground1);}", {
-    p: -2
-  }], [".fl4tsp0{border-radius:2px;}", {
-    p: -1
-  }], ".f1aehjj5{pointer-events:none;}", ".fvjh0tl{margin-top:4px;}", ".ff9s3yw{margin-left:8px;}", ".f1phki43{margin-right:8px;}", ".fd1gkq{margin-bottom:4px;}", [".f1enuhaj{overflow:auto;}", {
+  }], ".f1aehjj5{pointer-events:none;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fvjh0tl{margin-top:4px;}", ".ff9s3yw{margin-left:8px;}", ".f1phki43{margin-right:8px;}", ".fd1gkq{margin-bottom:4px;}", [".f1enuhaj{overflow:auto;}", {
     p: -1
   }], ".ftgm304{display:block;}"],
   m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f14egcv9{fill:Canvas;}}", {

package/lib/components/SankeyChart/useSankeyChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","Bkfmm31","Be5yapy","a6j6cd","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","Bgh53k4","B2eet1l","De3pzq","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","B3gqxw3","B6of3ja","Frg6f3","jrapky","t21cq0","d","p","m","useSankeyChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","baseStyles","styles","reflowProps","mode"],"sources":["useSankeyChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nexport const sankeyChartClassNames = {\n    root: 'fui-sc__root',\n    nodes: 'fui-sc__nodes',\n    links: 'fui-sc__links',\n    nodeTextContainer: 'fui-sc__nodeTextContainer',\n    toolTip: 'fui-sc__toolTip',\n    chartWrapper: 'fui-sc__chartWrapper',\n    chart: 'fui-sc__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden'\n    },\n    links: {\n        fill: tokens.colorNeutralBackground1,\n        strokeWidth: '3px',\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    nodes: {\n        fill: '#F5F5F5',\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    toolTip: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        padding: '8px',\n        position: 'absolute',\n        textAlign: 'center',\n        top: '0px',\n        background: tokens.colorNeutralBackground1,\n        borderRadius: '2px',\n        pointerEvents: 'none'\n    },\n    nodeTextContainer: {\n        '& text': {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\n            }\n        },\n        marginTop: '4px',\n        marginLeft: '8px',\n        marginBottom: '4px',\n        marginRight: '8px'\n    },\n    chartWrapper: {\n        overflow: 'auto'\n    },\n    chart: {\n        display: 'block'\n    }\n});\nexport const useSankeyChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/ ),\n        links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/ ),\n        nodeTextContainer: mergeClasses(sankeyChartClassNames.nodeTextContainer, baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/ ),\n        toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/ ),\n        chartWrapper: mergeClasses(sankeyChartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n        chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart)\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","getTooltipStyle","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","Bkfmm31","Be5yapy","a6j6cd","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","B3gqxw3","B6of3ja","Frg6f3","jrapky","t21cq0","d","p","m","useSankeyChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","baseStyles","styles","reflowProps","mode"],"sources":["useSankeyChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const sankeyChartClassNames = {\n    root: 'fui-sc__root',\n    nodes: 'fui-sc__nodes',\n    links: 'fui-sc__links',\n    nodeTextContainer: 'fui-sc__nodeTextContainer',\n    toolTip: 'fui-sc__toolTip',\n    chartWrapper: 'fui-sc__chartWrapper',\n    chart: 'fui-sc__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden'\n    },\n    links: {\n        fill: tokens.colorNeutralBackground1,\n        strokeWidth: '3px',\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    nodes: {\n        fill: '#F5F5F5',\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    toolTip: getTooltipStyle(),\n    nodeTextContainer: {\n        '& text': {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\n            }\n        },\n        marginTop: '4px',\n        marginLeft: '8px',\n        marginBottom: '4px',\n        marginRight: '8px'\n    },\n    chartWrapper: {\n        overflow: 'auto'\n    },\n    chart: {\n        display: 'block'\n    }\n});\nexport const useSankeyChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/ ),\n        links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/ ),\n        nodeTextContainer: mergeClasses(sankeyChartClassNames.nodeTextContainer, baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/ ),\n        toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/ ),\n        chartWrapper: mergeClasses(sankeyChartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n        chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart)\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/SankeyChart/useSankeyChartStyles.styles.raw.js

@@ -1,6 +1,7 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/index';
+import { getTooltipStyle } from '../../utilities/index';
 export const sankeyChartClassNames = {
     root: 'fui-sc__root',
     nodes: 'fui-sc__nodes',
@@ -32,18 +33,7 @@ const useStyles = makeStyles({
             fill: 'Canvas'
         }
     },
-    toolTip: {
-        ...typographyStyles.body1,
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '8px',
-        position: 'absolute',
-        textAlign: 'center',
-        top: '0px',
-        background: tokens.colorNeutralBackground1,
-        borderRadius: '2px',
-        pointerEvents: 'none'
-    },
+    toolTip: getTooltipStyle(),
     nodeTextContainer: {
         '& text': {
             [HighContrastSelector]: {

package/lib/components/SankeyChart/useSankeyChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SankeyChart/useSankeyChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SankeyChartProps, SankeyChartStyles } from './SankeyChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n\nexport const sankeyChartClassNames: SlotClassNames<SankeyChartStyles> = {\n  root: 'fui-sc__root',\n  nodes: 'fui-sc__nodes',\n  links: 'fui-sc__links',\n  nodeTextContainer: 'fui-sc__nodeTextContainer',\n  toolTip: 'fui-sc__toolTip',\n  chartWrapper: 'fui-sc__chartWrapper',\n  chart: 'fui-sc__chart',\n};\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n  },\n  links: {\n    fill: tokens.colorNeutralBackground1,\n    strokeWidth: '3px',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  nodes: {\n    fill: '#F5F5F5',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  toolTip: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    padding: '8px',\n    position: 'absolute',\n    textAlign: 'center',\n    top: '0px',\n    background: tokens.colorNeutralBackground1,\n    borderRadius: '2px',\n    pointerEvents: 'none',\n  },\n  nodeTextContainer: {\n    '& text': {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n\n    marginTop: '4px',\n    marginLeft: '8px',\n    marginBottom: '4px',\n    marginRight: '8px',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  chart: {\n    display: 'block',\n  },\n});\n\nexport const useSankeyChartStyles = (props: SankeyChartProps): SankeyChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, props.styles?.root),\n    nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/),\n    links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/),\n    nodeTextContainer: mergeClasses(\n      sankeyChartClassNames.nodeTextContainer,\n      baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/,\n    ),\n    toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/),\n    chartWrapper: mergeClasses(\n      sankeyChartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","body1","display","width","height","flexDirection","overflow","fill","colorNeutralBackground1","strokeWidth","padding","position","textAlign","top","background","borderRadius","pointerEvents","marginTop","marginLeft","marginBottom","marginRight","useSankeyChartStyles","props","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,OAAO,MAAMC,wBAA2D;IACtEC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;IACdC,OAAO;AACT,EAAE;AACF,MAAMC,YAAYb,WAAW;IAC3BM,MAAM;QACJ,GAAGH,iBAAiBW,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;IACZ;IACAX,OAAO;QACLY,MAAMlB,OAAOmB,uBAAuB;QACpCC,aAAa;QACb,CAAClB,qBAAqB,EAAE;YACtBgB,MAAM;QACR;IACF;IACAb,OAAO;QACLa,MAAM;QACN,CAAChB,qBAAqB,EAAE;YACtBgB,MAAM;QACR;IACF;IACAV,SAAS;QACP,GAAGP,iBAAiBW,KAAK;QACzBC,SAAS;QACTG,eAAe;QACfK,SAAS;QACTC,UAAU;QACVC,WAAW;QACXC,KAAK;QACLC,YAAYzB,OAAOmB,uBAAuB;QAC1CO,cAAc;QACdC,eAAe;IACjB;IACApB,mBAAmB;QACjB,UAAU;YACR,CAACL,qBAAqB,EAAE;gBACtBgB,MAAM;YACR;QACF;QAEAU,WAAW;QACXC,YAAY;QACZC,cAAc;QACdC,aAAa;IACf;IACAtB,cAAc;QACZQ,UAAU;IACZ;IACAP,OAAO;QACLG,SAAS;IACX;AACF;AAEA,OAAO,MAAMmB,uBAAuB,CAACC;QAI+BA,eAU9DA,oBACAA,gBAEiEA;IAhBrE,MAAMC,aAAavB;IAEnB,OAAO;QACLP,MAAML,aAAaI,sBAAsBC,IAAI,EAAE8B,WAAW9B,IAAI,GAAE6B,gBAAAA,MAAME,MAAM,cAAZF,oCAAAA,cAAc7B,IAAI;QAClFC,OAAON,aAAaI,sBAAsBE,KAAK,EAAE6B,WAAW7B,KAAK,CAAC,uBAAuB;QACzFC,OAAOP,aAAaI,sBAAsBG,KAAK,EAAE4B,WAAW5B,KAAK,CAAC,uBAAuB;QACzFC,mBAAmBR,aACjBI,sBAAsBI,iBAAiB,EACvC2B,WAAW3B,iBAAiB,CAAC,mCAAmC;QAElEC,SAAST,aAAaI,sBAAsBK,OAAO,EAAE0B,WAAW1B,OAAO,CAAC,yBAAyB;QACjGC,cAAcV,aACZI,sBAAsBM,YAAY,EAClCwB,EAAAA,qBAAAA,MAAMG,WAAW,cAAjBH,yCAAAA,mBAAmBI,IAAI,MAAK,cAAcH,WAAWzB,YAAY,GAAG,KACpEwB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcxB,YAAY;QAE5BC,OAAOX,aAAaI,sBAAsBO,KAAK,EAAEwB,WAAWxB,KAAK,GAAEuB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcvB,KAAK;IACxF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SankeyChart/useSankeyChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SankeyChartProps, SankeyChartStyles } from './SankeyChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getTooltipStyle } from '../../utilities/index';\n\nexport const sankeyChartClassNames: SlotClassNames<SankeyChartStyles> = {\n  root: 'fui-sc__root',\n  nodes: 'fui-sc__nodes',\n  links: 'fui-sc__links',\n  nodeTextContainer: 'fui-sc__nodeTextContainer',\n  toolTip: 'fui-sc__toolTip',\n  chartWrapper: 'fui-sc__chartWrapper',\n  chart: 'fui-sc__chart',\n};\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n  },\n  links: {\n    fill: tokens.colorNeutralBackground1,\n    strokeWidth: '3px',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  nodes: {\n    fill: '#F5F5F5',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  toolTip: getTooltipStyle() as GriffelStyle,\n  nodeTextContainer: {\n    '& text': {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n\n    marginTop: '4px',\n    marginLeft: '8px',\n    marginBottom: '4px',\n    marginRight: '8px',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  chart: {\n    display: 'block',\n  },\n});\n\nexport const useSankeyChartStyles = (props: SankeyChartProps): SankeyChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, props.styles?.root),\n    nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/),\n    links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/),\n    nodeTextContainer: mergeClasses(\n      sankeyChartClassNames.nodeTextContainer,\n      baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/,\n    ),\n    toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/),\n    chartWrapper: mergeClasses(\n      sankeyChartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","getTooltipStyle","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","body1","display","width","height","flexDirection","overflow","fill","colorNeutralBackground1","strokeWidth","marginTop","marginLeft","marginBottom","marginRight","useSankeyChartStyles","props","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,eAAe,QAAQ,wBAAwB;AAExD,OAAO,MAAMC,wBAA2D;IACtEC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;IACdC,OAAO;AACT,EAAE;AACF,MAAMC,YAAYd,WAAW;IAC3BO,MAAM;QACJ,GAAGJ,iBAAiBY,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;IACZ;IACAX,OAAO;QACLY,MAAMnB,OAAOoB,uBAAuB;QACpCC,aAAa;QACb,CAACnB,qBAAqB,EAAE;YACtBiB,MAAM;QACR;IACF;IACAb,OAAO;QACLa,MAAM;QACN,CAACjB,qBAAqB,EAAE;YACtBiB,MAAM;QACR;IACF;IACAV,SAASN;IACTK,mBAAmB;QACjB,UAAU;YACR,CAACN,qBAAqB,EAAE;gBACtBiB,MAAM;YACR;QACF;QAEAG,WAAW;QACXC,YAAY;QACZC,cAAc;QACdC,aAAa;IACf;IACAf,cAAc;QACZQ,UAAU;IACZ;IACAP,OAAO;QACLG,SAAS;IACX;AACF;AAEA,OAAO,MAAMY,uBAAuB,CAACC;QAI+BA,eAU9DA,oBACAA,gBAEiEA;IAhBrE,MAAMC,aAAahB;IAEnB,OAAO;QACLP,MAAMN,aAAaK,sBAAsBC,IAAI,EAAEuB,WAAWvB,IAAI,GAAEsB,gBAAAA,MAAME,MAAM,cAAZF,oCAAAA,cAActB,IAAI;QAClFC,OAAOP,aAAaK,sBAAsBE,KAAK,EAAEsB,WAAWtB,KAAK,CAAC,uBAAuB;QACzFC,OAAOR,aAAaK,sBAAsBG,KAAK,EAAEqB,WAAWrB,KAAK,CAAC,uBAAuB;QACzFC,mBAAmBT,aACjBK,sBAAsBI,iBAAiB,EACvCoB,WAAWpB,iBAAiB,CAAC,mCAAmC;QAElEC,SAASV,aAAaK,sBAAsBK,OAAO,EAAEmB,WAAWnB,OAAO,CAAC,yBAAyB;QACjGC,cAAcX,aACZK,sBAAsBM,YAAY,EAClCiB,EAAAA,qBAAAA,MAAMG,WAAW,cAAjBH,yCAAAA,mBAAmBI,IAAI,MAAK,cAAcH,WAAWlB,YAAY,GAAG,KACpEiB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcjB,YAAY;QAE5BC,OAAOZ,aAAaK,sBAAsBO,KAAK,EAAEiB,WAAWjB,KAAK,GAAEgB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAchB,KAAK;IACxF;AACF,EAAE"}

package/lib/components/ScatterChart/ScatterChart.js

@@ -2,13 +2,14 @@ import * as React from 'react';
 import { useScatterChartStyles } from './useScatterChartStyles.styles';
 import { select as d3Select } from 'd3-selection';
 import { Legends } from '../Legends/index';
-import { max as d3Max, min as d3Min } from 'd3-array';
+import { max as d3Max } from 'd3-array';
 import { useId } from '@fluentui/react-utilities';
-import { areArraysEqual, createNumericYAxis, createStringYAxis, domainRangeOfDateForScatterChart, domainRangeOfNumericForScatterChart, domainRangeOfXStringAxis, find, findNumericMinMaxOfY, useRtl } from '../../utilities/index';
+import { areArraysEqual, createNumericYAxis, createStringYAxis, getDomainPaddingForMarkers, domainRangeOfXStringAxis, find, findNumericMinMaxOfY, YAxisType, useRtl, isTextMode, isScatterPolarSeries, isPlottable, getRangeForScatterMarkerSize, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, sortAxisCategories } from '../../utilities/index';
 import { CartesianChart } from '../../index';
 import { tokens } from '@fluentui/react-theme';
 import { calloutData, ChartTypes, XAxisTypes, tooltipOfAxislabels, getTypeOfAxis, getNextColor, getColorFromToken, formatDate } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
+import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
 // Create a ScatterChart variant which uses these default styles and this styled subcomponent.
 /**
  * ScatterChart component
@@ -21,7 +22,7 @@ import { toImage } from '../../utilities/image-export-utils';
     const _tooltipId = useId('ScatterChartTooltipId_');
     const _firstRenderOptimization = true;
     const _emptyChartId = useId('_ScatterChart_empty');
-    let _points = _injectIndexPropertyInScatterChartData(props.data.lineChartData);
+    let _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _calloutPoints = calloutData(_points) || [];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -54,6 +55,8 @@ import { toImage } from '../../utilities/image-export-utils';
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
     const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const prevSelectedLegendsRef = React.useRef(undefined);
+    const _isTextMode = React.useRef(false);
+    const _isScatterPolarRef = React.useRef(false);
     React.useEffect(()=>{
         var _props_legendProps, _props_legendProps1;
         if (prevSelectedLegendsRef.current && !areArraysEqual(prevSelectedLegendsRef.current, (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends)) {
@@ -75,15 +78,17 @@ import { toImage } from '../../utilities/image-export-utils';
             }
         };
     }, []);
-    const _xAxisType = props.data.lineChartData && props.data.lineChartData.length > 0 && props.data.lineChartData[0].data && props.data.lineChartData[0].data.length > 0 ? getTypeOfAxis(props.data.lineChartData[0].data[0].x, true) : XAxisTypes.StringAxis;
+    const _xAxisType = props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData[0].data && props.data.scatterChartData[0].data.length > 0 ? getTypeOfAxis(props.data.scatterChartData[0].data[0].x, true) : XAxisTypes.StringAxis;
+    // Detect y axis type (numeric or string)
+    const _yAxisType = props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData[0].data && props.data.scatterChartData[0].data.length > 0 ? typeof props.data.scatterChartData[0].data[0].y === 'string' ? YAxisType.StringAxis : YAxisType.NumericAxis : YAxisType.NumericAxis;
     const pointsRef = React.useRef([]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const calloutPointsRef = React.useRef([]);
     React.useEffect(()=>{
         /** note that height and width are not used to resize or set as dimesions of the chart,
      * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart
-     */ if (_points !== _injectIndexPropertyInScatterChartData(props.data.lineChartData) || props.data !== _points) {
-            pointsRef.current = _injectIndexPropertyInScatterChartData(props.data.lineChartData);
+     */ if (_points !== _injectIndexPropertyInScatterChartData(props.data.scatterChartData) || props.data !== _points) {
+            pointsRef.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
             calloutPointsRef.current = calloutData(pointsRef.current);
         }
     }, [
@@ -124,19 +129,18 @@ import { toImage } from '../../utilities/image-export-utils';
     function _getNumericMinMaxOfY(points, yAxisType) {
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const { startValue, endValue } = findNumericMinMaxOfY(points, yAxisType);
-        let yPadding = 0;
-        yPadding = (endValue - startValue) * 0.1;
+        const yPadding = getDomainPaddingForMarkers(startValue, endValue, props.yScaleType);
         return {
-            startValue: startValue - yPadding,
-            endValue: endValue + yPadding
+            startValue: startValue - yPadding.start,
+            endValue: endValue + yPadding.end
         };
     }
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
         let domainNRangeValue;
         if (xAxisType === XAxisTypes.NumericAxis) {
-            domainNRangeValue = domainRangeOfNumericForScatterChart(points, margins, width, isRTL);
+            domainNRangeValue = domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, props.xScaleType, true);
         } else if (xAxisType === XAxisTypes.DateAxis) {
-            domainNRangeValue = domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues);
+            domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType);
         } else {
             domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
         }
@@ -148,6 +152,8 @@ import { toImage } from '../../utilities/image-export-utils';
     function _initializeScatterChartData(xScale, yScale, containerHeight, containerWidth, xElement) {
         _xAxisScale = xScale;
         _yAxisScale = yScale;
+        _isTextMode.current = isTextMode(_points);
+        _isScatterPolarRef.current = isScatterPolarSeries(_points);
         renderSeries = _createPlot(xElement, containerHeight);
     }
     function _onHoverCardHide() {
@@ -157,21 +163,30 @@ import { toImage } from '../../utilities/image-export-utils';
     function _createLegends(data) {
         const { legendProps } = props;
         const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
-        const legendDataItems = data.map((point)=>{
-            const color = point.color;
+        const mapLegendToPoints = {};
+        data.forEach((point)=>{
+            if (point.legend) {
+                if (!mapLegendToPoints[point.legend]) {
+                    mapLegendToPoints[point.legend] = [];
+                }
+                mapLegendToPoints[point.legend].push(point);
+            }
+        });
+        const legendDataItems = Object.entries(mapLegendToPoints).map(([legendTitle, points])=>{
+            const representativePoint = points[0];
             // mapping data to the format Legends component needs
             const legend = {
-                title: point.legend,
-                color,
+                title: legendTitle,
+                color: representativePoint.color,
                 onMouseOutAction: ()=>{
                     setActiveLegend('');
                 },
                 hoverAction: ()=>{
                     _handleChartMouseLeave();
-                    setActiveLegend(point.legend);
+                    setActiveLegend(legendTitle);
                 },
-                ...point.legendShape && {
-                    shape: point.legendShape
+                ...representativePoint.legendShape && {
+                    shape: representativePoint.legendShape
                 }
             };
             return legend;
@@ -191,6 +206,43 @@ import { toImage } from '../../utilities/image-export-utils';
             legendRef: _legendsRef
         });
     }
+    function _getOrderedYAxisLabels() {
+        const shouldOrderYAxisLabelsByCategoryOrder = _yAxisType === YAxisType.StringAxis && props.yAxisCategoryOrder !== 'default';
+        if (!shouldOrderYAxisLabelsByCategoryOrder) {
+            // Collect all unique string y values from all data points in all series, in reverse order
+            const yLabelsSet = new Set();
+            for(let i = _points.length - 1; i >= 0; i--){
+                const point = _points[i];
+                if (point.data && Array.isArray(point.data)) {
+                    for (const d of point.data){
+                        if (typeof d.y === 'string') {
+                            yLabelsSet.add(d.y);
+                        }
+                    }
+                }
+            }
+            return Array.from(yLabelsSet);
+        }
+        return sortAxisCategories(_mapCategoryToValues(), props.yAxisCategoryOrder);
+    }
+    function _mapCategoryToValues() {
+        const categoryToValues = {};
+        _points.forEach((point)=>{
+            if (point.data && Array.isArray(point.data)) {
+                point.data.forEach((d)=>{
+                    if (typeof d.y === 'string') {
+                        if (!categoryToValues[d.y]) {
+                            categoryToValues[d.y] = [];
+                        }
+                        if (typeof d.x === 'number') {
+                            categoryToValues[d.y].push(d.x);
+                        }
+                    }
+                });
+            }
+        });
+        return categoryToValues;
+    }
     function _onLegendSelectionChange(legendsSelected, event, currentLegend) {
         var _props_legendProps, _props_legendProps1;
         if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends) {
@@ -214,85 +266,81 @@ import { toImage } from '../../utilities/image-export-utils';
         if (isSelectedLegend) {
             _points = selectedLegendPoints;
         } else {
-            _points = _injectIndexPropertyInScatterChartData(props.data.lineChartData);
+            _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
         }
-        const yMax = d3Max(points, (point)=>{
-            return d3Max(point.data, (item)=>item.y);
-        });
-        const yMin = d3Min(points, (point)=>{
-            return d3Min(point.data, (item)=>item.y);
-        });
-        const yPadding = (yMax - yMin) * 0.1;
-        const yPaddingRange = Math.abs(_yAxisScale(yMin + yPadding) - _yAxisScale(yMin));
-        let maxMarkerRange = 40;
-        let xPaddingRange = 0;
         if (_xAxisType === XAxisTypes.StringAxis) {
             _xBandwidth = _xAxisScale.bandwidth() / 2;
-            xPaddingRange = _xBandwidth;
-        } else if (_xAxisType === XAxisTypes.DateAxis) {
-            const xMin = d3Min(points, (point)=>{
-                return d3Min(point.data, (item)=>item.x);
-            });
-            const xMax = d3Max(points, (point)=>{
-                return d3Max(point.data, (item)=>{
-                    return item.x;
-                });
-            });
-            const xPadding = (xMax.getTime() - xMin.getTime()) * 0.1;
-            xPaddingRange = Math.abs(_xAxisScale(new Date(xMin.getTime() + xPadding)) - _xAxisScale(xMin));
-        } else {
-            const xMin = d3Min(points, (point)=>{
-                return d3Min(point.data, (item)=>item.x);
-            });
-            const xMax = d3Max(points, (point)=>{
-                return d3Max(point.data, (item)=>{
-                    return item.x;
-                });
-            });
-            const xPadding = (xMax - xMin) * 0.1;
-            xPaddingRange = Math.abs(_xAxisScale(xMin + xPadding) - _xAxisScale(xMin));
         }
-        maxMarkerRange = Math.min(maxMarkerRange, Math.min(xPaddingRange, yPaddingRange));
         const maxMarkerSize = d3Max(_points, (point)=>{
             return d3Max(point.data, (item)=>{
                 return item.markerSize;
             });
         });
+        const extraMaxPixels = _xAxisType !== XAxisTypes.StringAxis && _yAxisType !== YAxisType.StringAxis ? getRangeForScatterMarkerSize({
+            data: _points,
+            xScale: _xAxisScale,
+            yScalePrimary: _yAxisScale,
+            xScaleType: props.xScaleType,
+            yScaleType: props.yScaleType
+        }) : 0;
         for(let i = _points.length - 1; i >= 0; i--){
             const pointsForSeries = [];
             const legendVal = _points[i].legend;
             const seriesColor = _points[i].color;
             const verticaLineHeight = containerHeight - margins.bottom + 6;
             for(let j = 0; j < _points[i].data.length; j++){
+                var _points_i, _points_i_data_j;
+                const { x, y, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points === null || _points === void 0 ? void 0 : (_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.data[j];
+                const xPoint = _xAxisScale === null || _xAxisScale === void 0 ? void 0 : _xAxisScale(x);
+                // Use string y axis scale if needed
+                const yPoint = _yAxisType === YAxisType.StringAxis ? (_yAxisScale === null || _yAxisScale === void 0 ? void 0 : _yAxisScale(y)) + ((_yAxisScale === null || _yAxisScale === void 0 ? void 0 : _yAxisScale.bandwidth) ? _yAxisScale.bandwidth() / 2 : 0) : _yAxisScale === null || _yAxisScale === void 0 ? void 0 : _yAxisScale(y);
+                if (!isPlottable(xPoint, yPoint)) {
+                    continue;
+                }
                 const seriesId = `${_seriesId}_${i}_${j}`;
                 const circleId = `${_circleId}_${i}_${j}`;
-                const { x, y, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[j];
-                let circleRadius = 3.5;
                 const pointMarkerSize = _points[i].data[j].markerSize;
-                if (pointMarkerSize !== undefined) {
-                    circleRadius = Math.min(pointMarkerSize * maxMarkerRange / maxMarkerSize, pointMarkerSize);
-                }
+                const minPixel = 4;
+                const maxPixel = 16;
+                const circleRadius = pointMarkerSize && maxMarkerSize !== 0 ? _xAxisType !== XAxisTypes.StringAxis ? pointMarkerSize * extraMaxPixels / maxMarkerSize : minPixel + (pointMarkerSize - minPixel) / (maxMarkerSize - minPixel) * (maxPixel - minPixel) : activePoint === circleId ? 6 : 4;
                 const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                 const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
-                pointsForSeries.push(/*#__PURE__*/ React.createElement("circle", {
-                    id: circleId,
-                    key: circleId,
-                    r: circleRadius,
-                    cx: _xAxisScale(x) + _xBandwidth,
-                    cy: _yAxisScale(y),
-                    "data-is-focusable": isLegendSelected,
-                    onMouseOver: (event)=>_handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
-                    onMouseMove: (event)=>_handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
-                    onMouseOut: _handleMouseOut,
-                    onFocus: (event)=>_handleFocus(event, seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
-                    onBlur: _handleMouseOut,
-                    ..._getClickHandler(_points[i].data[j].onDataPointClick),
-                    opacity: isLegendSelected && !currentPointHidden ? 1 : 0.1,
-                    fill: _getPointFill(seriesColor, circleId, j, false),
-                    stroke: seriesColor,
-                    role: "img",
-                    "aria-label": _getAriaLabel(i, j),
-                    tabIndex: isLegendSelected ? 0 : undefined
+                const text = _points === null || _points === void 0 ? void 0 : (_points_i_data_j = _points[i].data[j]) === null || _points_i_data_j === void 0 ? void 0 : _points_i_data_j.text;
+                if (!_isTextMode.current) {
+                    pointsForSeries.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
+                        id: circleId,
+                        key: circleId,
+                        r: Math.max(circleRadius, 4),
+                        cx: xPoint + _xBandwidth,
+                        cy: yPoint,
+                        "data-is-focusable": isLegendSelected,
+                        onMouseOver: (event)=>_handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
+                        onMouseMove: (event)=>_handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
+                        onMouseOut: _handleMouseOut,
+                        onFocus: (event)=>_handleFocus(event, seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
+                        onBlur: _handleMouseOut,
+                        ..._getClickHandler(_points[i].data[j].onDataPointClick),
+                        opacity: isLegendSelected && !currentPointHidden ? 1 : 0.1,
+                        fill: _getPointFill(seriesColor, circleId, j, false),
+                        stroke: seriesColor,
+                        role: "img",
+                        "aria-label": _getAriaLabel(i, j),
+                        tabIndex: isLegendSelected ? 0 : undefined
+                    }), ",", text && /*#__PURE__*/ React.createElement("text", {
+                        key: `${circleId}-label`,
+                        x: xPoint + _xBandwidth,
+                        y: yPoint + Math.max(circleRadius + 12, 16),
+                        className: classes.markerLabel
+                    }, text)));
+                }
+            }
+            if (_isScatterPolarRef.current) {
+                var _points_i1;
+                pointsForSeries.push(...renderScatterPolarCategoryLabels({
+                    xAxisScale: _xAxisScale,
+                    yAxisScale: _yAxisScale,
+                    className: classes.markerLabel || '',
+                    lineOptions: _points === null || _points === void 0 ? void 0 : (_points_i1 = _points[i]) === null || _points_i1 === void 0 ? void 0 : _points_i1.lineOptions
                 }));
             }
             series.push(/*#__PURE__*/ React.createElement("g", {
@@ -418,10 +466,10 @@ import { toImage } from '../../utilities/image-export-utils';
         return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
     }
     function _isChartEmpty() {
-        return !(props.data && props.data.lineChartData && props.data.lineChartData.length > 0 && props.data.lineChartData.filter((item)=>item.data.length).length > 0);
+        return !(props.data && props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData.filter((item)=>item.data.length).length > 0);
     }
     const { legendProps, tickValues, tickFormat } = props;
-    _points = _injectIndexPropertyInScatterChartData(props.data.lineChartData);
+    _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
     let points = _points;
     if (legendProps && !!legendProps.canSelectMultipleLegends) {
         points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;
@@ -431,7 +479,7 @@ import { toImage } from '../../utilities/image-export-utils';
     // reduce computation cost by only creating legendBars
     // if when hideLegend is false.
     // NOTE: they are rendered only when hideLegend is false in CartesianChart.
-    if (!props.hideLegend) {
+    if (!props.hideLegend && !_isTextMode.current) {
         legendBars = _createLegends(_points); // ToDo: Memoize legends to improve performance.
     }
     var _props_culture;
@@ -456,6 +504,8 @@ import { toImage } from '../../utilities/image-export-utils';
     _xAxisLabels = [
         ...new Set(xAxisLabels)
     ];
+    // Compute unique y axis labels for string y axis
+    const _yAxisLabels = _getOrderedYAxisLabels();
     return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
         ...props,
         chartTitle: props.data.chartTitle,
@@ -467,6 +517,10 @@ import { toImage } from '../../utilities/image-export-utils';
         getmargins: _getMargins,
         getGraphData: _initializeScatterChartData,
         xAxisType: _xAxisType,
+        yAxisType: _yAxisType,
+        ..._yAxisType === YAxisType.StringAxis ? {
+            stringDatasetForYAxisDomain: _yAxisLabels
+        } : {},
         getMinMaxOfYAxis: _getNumericMinMaxOfY,
         getDomainNRangeValues: _getDomainNRangeValues,
         createYAxis: createNumericYAxis,
@@ -475,6 +529,10 @@ import { toImage } from '../../utilities/image-export-utils';
         enableFirstRenderOptimization: _firstRenderOptimization,
         datasetForXAxisDomain: _xAxisLabels,
         componentRef: cartesianChartRef,
+        ..._isScatterPolarRef.current ? {
+            yMaxValue: 1,
+            yMinValue: -1
+        } : {},
         /* eslint-disable react/jsx-no-bind */ // eslint-disable-next-line react/no-children-prop
         children: (props)=>{
             _xAxisScale = props.xScale;