@fluentui/react-charts 0.0.0-nightly-20250819-0407.1 → 0.0.0-nightly-20250820-0406.1

package/lib/components/GanttChart/useGanttChartStyles.styles.js

@@ -14,7 +14,8 @@
   shapeStyles: '',
   chartWrapper: '',
   svgTooltip: '',
-  chart: ''
+  chart: '',
+  axisAnnotation: ''
 };
 /**
  * Apply styling to the GanttChart component

package/lib/components/GanttChart/useGanttChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["ganttClassNames","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useGanttChartStyles","props"],"sources":["useGanttChartStyles.styles.js"],"sourcesContent":["/**\n * @internal\n */ export const ganttClassNames = {\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    tooltip: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: ''\n};\n/**\n * Apply styling to the GanttChart component\n */ export const useGanttChartStyles = (props)=>{\n    return {};\n};\n"],"mappings":"AAAA;AACA;AACA,GAAI,OAAO,MAAMA,eAAe,GAAG;EAC/BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,OAAO,CAAC,CAAC;AACb,CAAC","ignoreList":[]}
+{"version":3,"names":["ganttClassNames","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useGanttChartStyles","props"],"sources":["useGanttChartStyles.styles.js"],"sourcesContent":["/**\n * @internal\n */ export const ganttClassNames = {\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    tooltip: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Apply styling to the GanttChart component\n */ export const useGanttChartStyles = (props)=>{\n    return {};\n};\n"],"mappings":"AAAA;AACA;AACA,GAAI,OAAO,MAAMA,eAAe,GAAG;EAC/BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,OAAO,CAAC,CAAC;AACb,CAAC","ignoreList":[]}

package/lib/components/GanttChart/useGanttChartStyles.styles.raw.js

@@ -14,7 +14,8 @@
     shapeStyles: '',
     chartWrapper: '',
     svgTooltip: '',
-    chart: ''
+    chart: '',
+    axisAnnotation: ''
 };
 /**
  * Apply styling to the GanttChart component

package/lib/components/GanttChart/useGanttChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/GanttChart/useGanttChartStyles.styles.ts"],"sourcesContent":["import { GanttChartStyles, GanttChartProps } from '../../index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport const ganttClassNames: SlotClassNames<GanttChartStyles> = {\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  tooltip: '',\n  axisTitle: '',\n  chartTitle: '',\n  opacityChangeOnHover: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n};\n\n/**\n * Apply styling to the GanttChart component\n */\nexport const useGanttChartStyles = (props: GanttChartProps): GanttChartStyles => {\n  return {};\n};\n"],"names":["ganttClassNames","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useGanttChartStyles","props"],"mappings":"AAGA;;CAEC,GACD,OAAO,MAAMA,kBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC;IAClC,OAAO,CAAC;AACV,EAAE"}
+{"version":3,"sources":["../src/components/GanttChart/useGanttChartStyles.styles.ts"],"sourcesContent":["import { GanttChartStyles, GanttChartProps } from '../../index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport const ganttClassNames: SlotClassNames<GanttChartStyles> = {\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  tooltip: '',\n  axisTitle: '',\n  chartTitle: '',\n  opacityChangeOnHover: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Apply styling to the GanttChart component\n */\nexport const useGanttChartStyles = (props: GanttChartProps): GanttChartStyles => {\n  return {};\n};\n"],"names":["ganttClassNames","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useGanttChartStyles","props"],"mappings":"AAGA;;CAEC,GACD,OAAO,MAAMA,kBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC;IAClC,OAAO,CAAC;AACV,EAAE"}

package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js

@@ -15,7 +15,8 @@ export const groupedVerticalBarChartClassNames = {
   shapeStyles: '',
   chartWrapper: '',
   svgTooltip: '',
-  chart: ''
+  chart: '',
+  axisAnnotation: ''
 };
 const useStyles = /*#__PURE__*/__styles({
   opacityChangeOnHover: {

package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","Bceei9c","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Bgh53k4","B2eet1l","De3pzq","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bvjb7m6","d","p","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"sources":["useGroupedVerticalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const groupedVerticalBarChartClassNames = {\n    opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n    tooltip: 'fui-gvbc**tooltip',\n    barLabel: 'fui-gvbc**barLabel',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {\n        cursor: 'default'\n    },\n    tooltip: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        background: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none',\n        color: tokens.colorNeutralForeground1\n    },\n    barLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    }\n});\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */ export const useGroupedVerticalBarChartStyles_unstable = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(groupedVerticalBarChartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,iCAAiC,GAAG;EAC7CC,oBAAoB,EAAE,gCAAgC;EACtDC,OAAO,EAAE,mBAAmB;EAC5BC,QAAQ,EAAE,oBAAoB;EAC9BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAM,oBAAA;IAAAgB,OAAA;EAAA;EAAAf,OAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA9C,QAAA;IAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAU,OAAA;IAAAmB,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAuBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yCAAyC,GAAIC,KAAK,IAAG;EAClE,MAAMC,UAAU,GAAGvC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHf,oBAAoB,EAAEL,YAAY,CAACI,iCAAiC,CAACC,oBAAoB,EAAEsD,UAAU,CAACtD,oBAAoB,CAAC,sCAAuC,CAAC;IACnKC,OAAO,EAAEN,YAAY,CAACI,iCAAiC,CAACE,OAAO,EAAEqD,UAAU,CAACrD,OAAO,CAAC,yBAA0B,CAAC;IAC/GC,QAAQ,EAAEP,YAAY,CAACI,iCAAiC,CAACG,QAAQ,EAAEoD,UAAU,CAACpD,QAAQ,CAAC,0BAA2B;EACtH,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bceei9c","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Bgh53k4","B2eet1l","De3pzq","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bvjb7m6","d","p","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"sources":["useGroupedVerticalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const groupedVerticalBarChartClassNames = {\n    opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n    tooltip: 'fui-gvbc**tooltip',\n    barLabel: 'fui-gvbc**barLabel',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {\n        cursor: 'default'\n    },\n    tooltip: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        background: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none',\n        color: tokens.colorNeutralForeground1\n    },\n    barLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    }\n});\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */ export const useGroupedVerticalBarChartStyles_unstable = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(groupedVerticalBarChartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,iCAAiC,GAAG;EAC7CC,oBAAoB,EAAE,gCAAgC;EACtDC,OAAO,EAAE,mBAAmB;EAC5BC,QAAQ,EAAE,oBAAoB;EAC9BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,gBAAGtB,QAAA;EAAAM,oBAAA;IAAAiB,OAAA;EAAA;EAAAhB,OAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA/C,QAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAU,OAAA;IAAAmB,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAuBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yCAAyC,GAAIC,KAAK,IAAG;EAClE,MAAMC,UAAU,GAAGvC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHhB,oBAAoB,EAAEL,YAAY,CAACI,iCAAiC,CAACC,oBAAoB,EAAEuD,UAAU,CAACvD,oBAAoB,CAAC,sCAAuC,CAAC;IACnKC,OAAO,EAAEN,YAAY,CAACI,iCAAiC,CAACE,OAAO,EAAEsD,UAAU,CAACtD,OAAO,CAAC,yBAA0B,CAAC;IAC/GC,QAAQ,EAAEP,YAAY,CAACI,iCAAiC,CAACG,QAAQ,EAAEqD,UAAU,CAACrD,QAAQ,CAAC,0BAA2B;EACtH,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js

@@ -15,7 +15,8 @@ export const groupedVerticalBarChartClassNames = {
     shapeStyles: '',
     chartWrapper: '',
     svgTooltip: '',
-    chart: ''
+    chart: '',
+    axisAnnotation: ''
 };
 const useStyles = makeStyles({
     opacityChangeOnHover: {

package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { GroupedVerticalBarChartProps, GroupedVerticalBarChartStyles } from '../../index';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const groupedVerticalBarChartClassNames: SlotClassNames<GroupedVerticalBarChartStyles> = {\n  opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n  tooltip: 'fui-gvbc**tooltip',\n  barLabel: 'fui-gvbc**barLabel',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n};\n\nconst useStyles = makeStyles({\n  opacityChangeOnHover: {\n    cursor: 'default',\n  },\n  tooltip: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    fill: tokens.colorNeutralBackground1, //Check this\n    background: tokens.colorNeutralBackground1, //Fill or background\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n    color: tokens.colorNeutralForeground1, //Confirm this\n  },\n  barLabel: {\n    ...typographyStyles.caption1Strong, // Confirm styles\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n});\n\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */\nexport const useGroupedVerticalBarChartStyles_unstable = (\n  props: GroupedVerticalBarChartProps,\n): GroupedVerticalBarChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    opacityChangeOnHover: mergeClasses(\n      groupedVerticalBarChartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","cursor","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","background","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","caption1Strong","forcedColorAdjust","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,oCAAmF;IAC9FC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AAEF,MAAMC,YAAYrB,WAAW;IAC3BM,sBAAsB;QACpBgB,QAAQ;IACV;IACAf,SAAS;QACP,GAAGH,iBAAiBmB,KAAK;QACzBC,SAAS;QACTC,eAAe;QACf,GAAGvB,WAAWwB,OAAO,CAACvB,OAAOwB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK3B,OAAO4B,mBAAmB;QAC/BC,MAAM7B,OAAO8B,uBAAuB;QACpCC,YAAY/B,OAAO8B,uBAAuB;QAC1CE,cAAchC,OAAOiC,iBAAiB;QACtCC,eAAe;QACfC,OAAOnC,OAAOoC,uBAAuB;IACvC;IACA/B,UAAU;QACR,GAAGJ,iBAAiBoC,cAAc;QAClCR,MAAM7B,OAAOoC,uBAAuB;QACpCE,mBAAmB;IACrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA,MAAMC,aAAavB;IAEnB,OAAO;QACLf,sBAAsBL,aACpBI,kCAAkCC,oBAAoB,EACtDsC,WAAWtC,oBAAoB,CAAC,oCAAoC;QAEtEC,SAASN,aAAaI,kCAAkCE,OAAO,EAAEqC,WAAWrC,OAAO,CAAC,uBAAuB;QAC3GC,UAAUP,aAAaI,kCAAkCG,QAAQ,EAAEoC,WAAWpC,QAAQ,CAAC,wBAAwB;IACjH;AACF,EAAE"}
+{"version":3,"sources":["../src/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { GroupedVerticalBarChartProps, GroupedVerticalBarChartStyles } from '../../index';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const groupedVerticalBarChartClassNames: SlotClassNames<GroupedVerticalBarChartStyles> = {\n  opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n  tooltip: 'fui-gvbc**tooltip',\n  barLabel: 'fui-gvbc**barLabel',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\nconst useStyles = makeStyles({\n  opacityChangeOnHover: {\n    cursor: 'default',\n  },\n  tooltip: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    fill: tokens.colorNeutralBackground1, //Check this\n    background: tokens.colorNeutralBackground1, //Fill or background\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n    color: tokens.colorNeutralForeground1, //Confirm this\n  },\n  barLabel: {\n    ...typographyStyles.caption1Strong, // Confirm styles\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n});\n\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */\nexport const useGroupedVerticalBarChartStyles_unstable = (\n  props: GroupedVerticalBarChartProps,\n): GroupedVerticalBarChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    opacityChangeOnHover: mergeClasses(\n      groupedVerticalBarChartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","cursor","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","background","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","caption1Strong","forcedColorAdjust","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,oCAAmF;IAC9FC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,YAAYtB,WAAW;IAC3BM,sBAAsB;QACpBiB,QAAQ;IACV;IACAhB,SAAS;QACP,GAAGH,iBAAiBoB,KAAK;QACzBC,SAAS;QACTC,eAAe;QACf,GAAGxB,WAAWyB,OAAO,CAACxB,OAAOyB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK5B,OAAO6B,mBAAmB;QAC/BC,MAAM9B,OAAO+B,uBAAuB;QACpCC,YAAYhC,OAAO+B,uBAAuB;QAC1CE,cAAcjC,OAAOkC,iBAAiB;QACtCC,eAAe;QACfC,OAAOpC,OAAOqC,uBAAuB;IACvC;IACAhC,UAAU;QACR,GAAGJ,iBAAiBqC,cAAc;QAClCR,MAAM9B,OAAOqC,uBAAuB;QACpCE,mBAAmB;IACrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA,MAAMC,aAAavB;IAEnB,OAAO;QACLhB,sBAAsBL,aACpBI,kCAAkCC,oBAAoB,EACtDuC,WAAWvC,oBAAoB,CAAC,oCAAoC;QAEtEC,SAASN,aAAaI,kCAAkCE,OAAO,EAAEsC,WAAWtC,OAAO,CAAC,uBAAuB;QAC3GC,UAAUP,aAAaI,kCAAkCG,QAAQ,EAAEqC,WAAWrC,QAAQ,CAAC,wBAAwB;IACjH;AACF,EAAE"}

package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js

@@ -16,7 +16,8 @@ export const heatmapChartClassNames = {
   shapeStyles: '',
   chartWrapper: '',
   svgTooltip: '',
-  chart: ''
+  chart: '',
+  axisAnnotation: ''
 };
 const useStyles = /*#__PURE__*/__styles({
   root: {},

package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkecrkj","B2u0y6b","d","useHeatMapChartStyles","props","baseStyles"],"sources":["useHeatMapChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const heatmapChartClassNames = {\n    root: 'fui-hmc__root',\n    text: 'fui-hmc__text',\n    calloutContentRoot: 'fui-hmc__calloutContentRoot',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    tooltip: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: ''\n};\nconst useStyles = makeStyles({\n    root: {},\n    text: {\n        ...typographyStyles.body1Strong,\n        pointerEvents: 'none'\n    },\n    calloutContentRoot: {\n        maxWidth: '238px'\n    }\n});\nexport const useHeatMapChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/ ),\n        text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/ ),\n        calloutContentRoot: mergeClasses(heatmapChartClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,eAAe;EACrBC,IAAI,EAAE,eAAe;EACrBC,kBAAkB,EAAE,6BAA6B;EACjDC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGpB,QAAA;EAAAI,IAAA;EAAAC,IAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAnB,kBAAA;IAAAoB,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF,OAAO,MAAMC,qBAAqB,GAAIC,KAAK,IAAG;EAC1C,MAAMC,UAAU,GAAGV,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHhB,IAAI,EAAEH,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAE0B,UAAU,CAAC1B,IAAI,CAAC,wBAAyB,CAAC;IAC1FC,IAAI,EAAEJ,YAAY,CAACE,sBAAsB,CAACE,IAAI,EAAEyB,UAAU,CAACzB,IAAI,CAAC,wBAAyB,CAAC;IAC1FC,kBAAkB,EAAEL,YAAY,CAACE,sBAAsB,CAACG,kBAAkB,EAAEwB,UAAU,CAACxB,kBAAkB,CAAC,sCAAuC;EACrJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkecrkj","B2u0y6b","d","useHeatMapChartStyles","props","baseStyles"],"sources":["useHeatMapChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const heatmapChartClassNames = {\n    root: 'fui-hmc__root',\n    text: 'fui-hmc__text',\n    calloutContentRoot: 'fui-hmc__calloutContentRoot',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    tooltip: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n    root: {},\n    text: {\n        ...typographyStyles.body1Strong,\n        pointerEvents: 'none'\n    },\n    calloutContentRoot: {\n        maxWidth: '238px'\n    }\n});\nexport const useHeatMapChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/ ),\n        text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/ ),\n        calloutContentRoot: mergeClasses(heatmapChartClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,eAAe;EACrBC,IAAI,EAAE,eAAe;EACrBC,kBAAkB,EAAE,6BAA6B;EACjDC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAI,IAAA;EAAAC,IAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAApB,kBAAA;IAAAqB,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF,OAAO,MAAMC,qBAAqB,GAAIC,KAAK,IAAG;EAC1C,MAAMC,UAAU,GAAGV,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,IAAI,EAAEH,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAE2B,UAAU,CAAC3B,IAAI,CAAC,wBAAyB,CAAC;IAC1FC,IAAI,EAAEJ,YAAY,CAACE,sBAAsB,CAACE,IAAI,EAAE0B,UAAU,CAAC1B,IAAI,CAAC,wBAAyB,CAAC;IAC1FC,kBAAkB,EAAEL,YAAY,CAACE,sBAAsB,CAACG,kBAAkB,EAAEyB,UAAU,CAACzB,kBAAkB,CAAC,sCAAuC;EACrJ,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js

@@ -16,7 +16,8 @@ export const heatmapChartClassNames = {
     shapeStyles: '',
     chartWrapper: '',
     svgTooltip: '',
-    chart: ''
+    chart: '',
+    axisAnnotation: ''
 };
 const useStyles = makeStyles({
     root: {},

package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/HeatMapChart/useHeatMapChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { HeatMapChartProps, HeatMapChartStyles } from './HeatMapChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const heatmapChartClassNames: SlotClassNames<HeatMapChartStyles> = {\n  root: 'fui-hmc__root',\n  text: 'fui-hmc__text',\n  calloutContentRoot: 'fui-hmc__calloutContentRoot',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  tooltip: '',\n  axisTitle: '',\n  chartTitle: '',\n  opacityChangeOnHover: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n};\nconst useStyles = makeStyles({\n  root: {},\n  text: {\n    ...typographyStyles.body1Strong,\n    pointerEvents: 'none',\n  },\n  calloutContentRoot: {\n    maxWidth: '238px',\n  },\n});\n\nexport const useHeatMapChartStyles = (props: HeatMapChartProps): HeatMapChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/),\n    text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/),\n    calloutContentRoot: mergeClasses(\n      heatmapChartClassNames.calloutContentRoot,\n      baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","body1Strong","pointerEvents","maxWidth","useHeatMapChartStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,yBAA6D;IACxEC,MAAM;IACNC,MAAM;IACNC,oBAAoB;IACpBC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AACF,MAAMC,YAAYpB,WAAW;IAC3BI,MAAM,CAAC;IACPC,MAAM;QACJ,GAAGH,iBAAiBmB,WAAW;QAC/BC,eAAe;IACjB;IACAhB,oBAAoB;QAClBiB,UAAU;IACZ;AACF;AAEA,OAAO,MAAMC,wBAAwB,CAACC;IACpC,MAAMC,aAAaN;IAEnB,OAAO;QACLhB,MAAMH,aAAaE,uBAAuBC,IAAI,EAAEsB,WAAWtB,IAAI,CAAC,sBAAsB;QACtFC,MAAMJ,aAAaE,uBAAuBE,IAAI,EAAEqB,WAAWrB,IAAI,CAAC,sBAAsB;QACtFC,oBAAoBL,aAClBE,uBAAuBG,kBAAkB,EACzCoB,WAAWpB,kBAAkB,CAAC,oCAAoC;IAEtE;AACF,EAAE"}
+{"version":3,"sources":["../src/components/HeatMapChart/useHeatMapChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { HeatMapChartProps, HeatMapChartStyles } from './HeatMapChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const heatmapChartClassNames: SlotClassNames<HeatMapChartStyles> = {\n  root: 'fui-hmc__root',\n  text: 'fui-hmc__text',\n  calloutContentRoot: 'fui-hmc__calloutContentRoot',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  tooltip: '',\n  axisTitle: '',\n  chartTitle: '',\n  opacityChangeOnHover: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\nconst useStyles = makeStyles({\n  root: {},\n  text: {\n    ...typographyStyles.body1Strong,\n    pointerEvents: 'none',\n  },\n  calloutContentRoot: {\n    maxWidth: '238px',\n  },\n});\n\nexport const useHeatMapChartStyles = (props: HeatMapChartProps): HeatMapChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/),\n    text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/),\n    calloutContentRoot: mergeClasses(\n      heatmapChartClassNames.calloutContentRoot,\n      baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","body1Strong","pointerEvents","maxWidth","useHeatMapChartStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,yBAA6D;IACxEC,MAAM;IACNC,MAAM;IACNC,oBAAoB;IACpBC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AACF,MAAMC,YAAYrB,WAAW;IAC3BI,MAAM,CAAC;IACPC,MAAM;QACJ,GAAGH,iBAAiBoB,WAAW;QAC/BC,eAAe;IACjB;IACAjB,oBAAoB;QAClBkB,UAAU;IACZ;AACF;AAEA,OAAO,MAAMC,wBAAwB,CAACC;IACpC,MAAMC,aAAaN;IAEnB,OAAO;QACLjB,MAAMH,aAAaE,uBAAuBC,IAAI,EAAEuB,WAAWvB,IAAI,CAAC,sBAAsB;QACtFC,MAAMJ,aAAaE,uBAAuBE,IAAI,EAAEsB,WAAWtB,IAAI,CAAC,sBAAsB;QACtFC,oBAAoBL,aAClBE,uBAAuBG,kBAAkB,EACzCqB,WAAWrB,kBAAkB,CAAC,oCAAoC;IAEtE;AACF,EAAE"}

package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js

@@ -20,7 +20,8 @@ export const hbcWithAxisClassNames = {
   shapeStyles: '',
   chartWrapper: '',
   svgTooltip: '',
-  chart: ''
+  chart: '',
+  axisAnnotation: ''
 };
 const useStyles = /*#__PURE__*/__styles({
   opacityChangeOnHover: {

package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","hbcWithAxisClassNames","opacityChangeOnHover","xAxisTicks","tooltip","chartLabel","xAxisDomain","xAxisText","yAxisDomain","yAxisTicks","yAxisText","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","abs64n","d","useHorizontalBarChartWithAxisStyles","props","baseStyles"],"sources":["useHorizontalBarChartWithAxisStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const hbcWithAxisClassNames = {\n    opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',\n    xAxisTicks: 'fui-hbcwa__xAxisTicks',\n    tooltip: 'fui-hbcwa__tooltip',\n    chartLabel: '',\n    xAxisDomain: '',\n    xAxisText: '',\n    yAxisDomain: '',\n    yAxisTicks: '',\n    yAxisText: '',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {\n        opacity: 0.1\n    },\n    xAxisTicks: {}\n});\n/**\n * Apply styling to the HorizontalBarChartWithAxis slots based on the state\n */ export const useHorizontalBarChartWithAxisStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),\n        xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,oBAAoB,EAAE,iCAAiC;EACvDC,UAAU,EAAE,uBAAuB;EACnCC,OAAO,EAAE,oBAAoB;EAC7BC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,SAAS,EAAE,EAAE;EACbC,WAAW,EAAE,EAAE;EACfC,UAAU,EAAE,EAAE;EACdC,SAAS,EAAE,EAAE;EACbC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGxB,QAAA;EAAAG,oBAAA;IAAAsB,MAAA;EAAA;EAAArB,UAAA;AAAA;EAAAsB,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHrB,oBAAoB,EAAEF,YAAY,CAACC,qBAAqB,CAACC,oBAAoB,EAAE0B,UAAU,CAAC1B,oBAAoB,CAAC;IAC/GC,UAAU,EAAEH,YAAY,CAACC,qBAAqB,CAACE,UAAU,EAAEyB,UAAU,CAACzB,UAAU;EACpF,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","hbcWithAxisClassNames","opacityChangeOnHover","xAxisTicks","tooltip","chartLabel","xAxisDomain","xAxisText","yAxisDomain","yAxisTicks","yAxisText","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","abs64n","d","useHorizontalBarChartWithAxisStyles","props","baseStyles"],"sources":["useHorizontalBarChartWithAxisStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const hbcWithAxisClassNames = {\n    opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',\n    xAxisTicks: 'fui-hbcwa__xAxisTicks',\n    tooltip: 'fui-hbcwa__tooltip',\n    chartLabel: '',\n    xAxisDomain: '',\n    xAxisText: '',\n    yAxisDomain: '',\n    yAxisTicks: '',\n    yAxisText: '',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {\n        opacity: 0.1\n    },\n    xAxisTicks: {}\n});\n/**\n * Apply styling to the HorizontalBarChartWithAxis slots based on the state\n */ export const useHorizontalBarChartWithAxisStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),\n        xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,oBAAoB,EAAE,iCAAiC;EACvDC,UAAU,EAAE,uBAAuB;EACnCC,OAAO,EAAE,oBAAoB;EAC7BC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,SAAS,EAAE,EAAE;EACbC,WAAW,EAAE,EAAE;EACfC,UAAU,EAAE,EAAE;EACdC,SAAS,EAAE,EAAE;EACbC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,gBAAGzB,QAAA;EAAAG,oBAAA;IAAAuB,MAAA;EAAA;EAAAtB,UAAA;AAAA;EAAAuB,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHtB,oBAAoB,EAAEF,YAAY,CAACC,qBAAqB,CAACC,oBAAoB,EAAE2B,UAAU,CAAC3B,oBAAoB,CAAC;IAC/GC,UAAU,EAAEH,YAAY,CAACC,qBAAqB,CAACE,UAAU,EAAE0B,UAAU,CAAC1B,UAAU;EACpF,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js

@@ -20,7 +20,8 @@ export const hbcWithAxisClassNames = {
     shapeStyles: '',
     chartWrapper: '',
     svgTooltip: '',
-    chart: ''
+    chart: '',
+    axisAnnotation: ''
 };
 const useStyles = makeStyles({
     opacityChangeOnHover: {

package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { HorizontalBarChartWithAxisProps, HorizontalBarChartWithAxisStyles } from './index';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const hbcWithAxisClassNames: SlotClassNames<HorizontalBarChartWithAxisStyles> = {\n  opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',\n  xAxisTicks: 'fui-hbcwa__xAxisTicks',\n  tooltip: 'fui-hbcwa__tooltip',\n  chartLabel: '',\n  xAxisDomain: '',\n  xAxisText: '',\n  yAxisDomain: '',\n  yAxisTicks: '',\n  yAxisText: '',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n};\n\nconst useStyles = makeStyles({\n  opacityChangeOnHover: {\n    opacity: 0.1, // supports custom opacity\n  },\n\n  xAxisTicks: {},\n});\n\n/**\n * Apply styling to the HorizontalBarChartWithAxis slots based on the state\n */\nexport const useHorizontalBarChartWithAxisStyles = (\n  props: HorizontalBarChartWithAxisProps,\n): HorizontalBarChartWithAxisStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),\n    xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks),\n  };\n};\n"],"names":["makeStyles","mergeClasses","hbcWithAxisClassNames","opacityChangeOnHover","xAxisTicks","tooltip","chartLabel","xAxisDomain","xAxisText","yAxisDomain","yAxisTicks","yAxisText","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","opacity","useHorizontalBarChartWithAxisStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,wBAA0E;IACrFC,sBAAsB;IACtBC,YAAY;IACZC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,WAAW;IACXC,aAAa;IACbC,YAAY;IACZC,WAAW;IACXC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AAEF,MAAMC,YAAYxB,WAAW;IAC3BG,sBAAsB;QACpBsB,SAAS;IACX;IAEArB,YAAY,CAAC;AACf;AAEA;;CAEC,GACD,OAAO,MAAMsB,sCAAsC,CACjDC;IAEA,MAAMC,aAAaJ;IAEnB,OAAO;QACLrB,sBAAsBF,aAAaC,sBAAsBC,oBAAoB,EAAEyB,WAAWzB,oBAAoB;QAC9GC,YAAYH,aAAaC,sBAAsBE,UAAU,EAAEwB,WAAWxB,UAAU;IAClF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { HorizontalBarChartWithAxisProps, HorizontalBarChartWithAxisStyles } from './index';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const hbcWithAxisClassNames: SlotClassNames<HorizontalBarChartWithAxisStyles> = {\n  opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',\n  xAxisTicks: 'fui-hbcwa__xAxisTicks',\n  tooltip: 'fui-hbcwa__tooltip',\n  chartLabel: '',\n  xAxisDomain: '',\n  xAxisText: '',\n  yAxisDomain: '',\n  yAxisTicks: '',\n  yAxisText: '',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\nconst useStyles = makeStyles({\n  opacityChangeOnHover: {\n    opacity: 0.1, // supports custom opacity\n  },\n\n  xAxisTicks: {},\n});\n\n/**\n * Apply styling to the HorizontalBarChartWithAxis slots based on the state\n */\nexport const useHorizontalBarChartWithAxisStyles = (\n  props: HorizontalBarChartWithAxisProps,\n): HorizontalBarChartWithAxisStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),\n    xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks),\n  };\n};\n"],"names":["makeStyles","mergeClasses","hbcWithAxisClassNames","opacityChangeOnHover","xAxisTicks","tooltip","chartLabel","xAxisDomain","xAxisText","yAxisDomain","yAxisTicks","yAxisText","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","opacity","useHorizontalBarChartWithAxisStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,wBAA0E;IACrFC,sBAAsB;IACtBC,YAAY;IACZC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,WAAW;IACXC,aAAa;IACbC,YAAY;IACZC,WAAW;IACXC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,YAAYzB,WAAW;IAC3BG,sBAAsB;QACpBuB,SAAS;IACX;IAEAtB,YAAY,CAAC;AACf;AAEA;;CAEC,GACD,OAAO,MAAMuB,sCAAsC,CACjDC;IAEA,MAAMC,aAAaJ;IAEnB,OAAO;QACLtB,sBAAsBF,aAAaC,sBAAsBC,oBAAoB,EAAE0B,WAAW1B,oBAAoB;QAC9GC,YAAYH,aAAaC,sBAAsBE,UAAU,EAAEyB,WAAWzB,UAAU;IAClF;AACF,EAAE"}

package/lib/components/LineChart/useLineChartStyles.styles.js

@@ -20,7 +20,8 @@ export const linechartClassNames = {
   shapeStyles: 'fui-line__shapeStyles',
   chartWrapper: 'fui-line__chartWrapper',
   svgTooltip: '',
-  chart: ''
+  chart: '',
+  axisAnnotation: ''
 };
 /**
  * Base Styles

package/lib/components/LineChart/useLineChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","ojy3ng","Bpvj6i6","jzqdnp","d","p","m","useLineChartStyles","props","baseStyles"],"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    lineBorder: 'fui-line_lineBorder',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: {\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    },\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    },\n    markerLabel: {\n        fill: tokens.colorNeutralForeground1,\n        textAnchor: 'middle',\n        selectors: {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\n            }\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n        markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGtB,QAAA;EAAAM,OAAA;IAAAiB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA/B,UAAA;IAAAgC,MAAA;IAAAC,OAAA;EAAA;EAAAhC,WAAA;IAAAwB,OAAA;IAAAS,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA2BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGzB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHhB,OAAO,EAAEL,YAAY,CAACI,mBAAmB,CAACC,OAAO,EAAEyC,UAAU,CAACzC,OAAO,CAAC,yBAA0B,CAAC;IACjGC,UAAU,EAAEN,YAAY,CAACI,mBAAmB,CAACE,UAAU,EAAEwC,UAAU,CAACxC,UAAU,CAAC,4BAA6B,CAAC;IAC7GC,WAAW,EAAEP,YAAY,CAACI,mBAAmB,CAACG,WAAW,EAAEuC,UAAU,CAACvC,WAAW,CAAC,6BAA8B;EACpH,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","ojy3ng","Bpvj6i6","jzqdnp","d","p","m","useLineChartStyles","props","baseStyles"],"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    lineBorder: 'fui-line_lineBorder',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: {\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    },\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    },\n    markerLabel: {\n        fill: tokens.colorNeutralForeground1,\n        textAnchor: 'middle',\n        selectors: {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\n            }\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n        markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGvB,QAAA;EAAAM,OAAA;IAAAkB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAhC,UAAA;IAAAiC,MAAA;IAAAC,OAAA;EAAA;EAAAjC,WAAA;IAAAyB,OAAA;IAAAS,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA2BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGzB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEL,YAAY,CAACI,mBAAmB,CAACC,OAAO,EAAE0C,UAAU,CAAC1C,OAAO,CAAC,yBAA0B,CAAC;IACjGC,UAAU,EAAEN,YAAY,CAACI,mBAAmB,CAACE,UAAU,EAAEyC,UAAU,CAACzC,UAAU,CAAC,4BAA6B,CAAC;IAC7GC,WAAW,EAAEP,YAAY,CAACI,mBAAmB,CAACG,WAAW,EAAEwC,UAAU,CAACxC,WAAW,CAAC,6BAA8B;EACpH,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/LineChart/useLineChartStyles.styles.raw.js

@@ -19,7 +19,8 @@ import { HighContrastSelector } from '../../utilities/index';
     shapeStyles: 'fui-line__shapeStyles',
     chartWrapper: 'fui-line__chartWrapper',
     svgTooltip: '',
-    chart: ''
+    chart: '',
+    axisAnnotation: ''
 };
 /**
  * Base Styles

package/lib/components/LineChart/useLineChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  lineBorder: 'fui-line_lineBorder',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    fill: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n  },\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n  markerLabel: {\n    fill: tokens.colorNeutralForeground1,\n    textAnchor: 'middle',\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n    markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","stroke","colorNeutralForeground1","textAnchor","selectors","useLineChartStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYtB,WAAW;IAC3BM,SAAS;QACPiB,SAAS;QACTC,eAAe;QACf,GAAGtB,WAAWuB,OAAO,CAACtB,OAAOuB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK1B,OAAO2B,mBAAmB;QAC/BC,MAAM5B,OAAO6B,uBAAuB;QACpCC,cAAc9B,OAAO+B,iBAAiB;QACtCC,eAAe;IACjB;IACA5B,YAAY;QACV6B,QAAQjC,OAAO6B,uBAAuB;QACtC,CAAC5B,qBAAqB,EAAE;YACtBgC,QAAQ;QACV;IACF;IACA5B,aAAa;QACXuB,MAAM5B,OAAOkC,uBAAuB;QACpCC,YAAY;QACZC,WAAW;YACT,CAACnC,qBAAqB,EAAE;gBACtB2B,MAAM;YACR;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMS,qBAAqB,CAACC;IACjC,MAAMC,aAAapB;IACnB,OAAO;QACLhB,SAASL,aAAaI,oBAAoBC,OAAO,EAAEoC,WAAWpC,OAAO,CAAC,uBAAuB;QAC7FC,YAAYN,aAAaI,oBAAoBE,UAAU,EAAEmC,WAAWnC,UAAU,CAAC,0BAA0B;QACzGC,aAAaP,aAAaI,oBAAoBG,WAAW,EAAEkC,WAAWlC,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}
+{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  lineBorder: 'fui-line_lineBorder',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    fill: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n  },\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n  markerLabel: {\n    fill: tokens.colorNeutralForeground1,\n    textAnchor: 'middle',\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n    markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","stroke","colorNeutralForeground1","textAnchor","selectors","useLineChartStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYvB,WAAW;IAC3BM,SAAS;QACPkB,SAAS;QACTC,eAAe;QACf,GAAGvB,WAAWwB,OAAO,CAACvB,OAAOwB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK3B,OAAO4B,mBAAmB;QAC/BC,MAAM7B,OAAO8B,uBAAuB;QACpCC,cAAc/B,OAAOgC,iBAAiB;QACtCC,eAAe;IACjB;IACA7B,YAAY;QACV8B,QAAQlC,OAAO8B,uBAAuB;QACtC,CAAC7B,qBAAqB,EAAE;YACtBiC,QAAQ;QACV;IACF;IACA7B,aAAa;QACXwB,MAAM7B,OAAOmC,uBAAuB;QACpCC,YAAY;QACZC,WAAW;YACT,CAACpC,qBAAqB,EAAE;gBACtB4B,MAAM;YACR;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMS,qBAAqB,CAACC;IACjC,MAAMC,aAAapB;IACnB,OAAO;QACLjB,SAASL,aAAaI,oBAAoBC,OAAO,EAAEqC,WAAWrC,OAAO,CAAC,uBAAuB;QAC7FC,YAAYN,aAAaI,oBAAoBE,UAAU,EAAEoC,WAAWpC,UAAU,CAAC,0BAA0B;QACzGC,aAAaP,aAAaI,oBAAoBG,WAAW,EAAEmC,WAAWnC,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}

package/lib/components/ScatterChart/ScatterChart.js

@@ -157,21 +157,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;
@@ -209,6 +218,12 @@ import { toImage } from '../../utilities/image-export-utils';
             return seriesColor;
         }
     }
+    function _getRangeForScatterMarkerSize(yScale, yPadding, xMin, xMax, xPadding) {
+        const extraXPixels = _isRTL ? _xAxisScale(xMax - xPadding) - _xAxisScale(xMax) : _xAxisScale(xMin + xPadding) - _xAxisScale(xMin);
+        const yMin = yScale.domain()[0];
+        const extraYPixels = yScale(yMin) - yScale(yMin + yPadding);
+        return Math.min(extraXPixels, extraYPixels);
+    }
     function _createPlot(xElement, containerHeight) {
         const series = [];
         if (isSelectedLegend) {
@@ -223,36 +238,32 @@ import { toImage } from '../../utilities/image-export-utils';
             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;
+        let xPadding = 0;
+        let xMin = 0;
+        let xMax = 0;
         if (_xAxisType === XAxisTypes.StringAxis) {
             _xBandwidth = _xAxisScale.bandwidth() / 2;
-            xPaddingRange = _xBandwidth;
         } else if (_xAxisType === XAxisTypes.DateAxis) {
-            const xMin = d3Min(points, (point)=>{
+            xMin = d3Min(_points, (point)=>{
                 return d3Min(point.data, (item)=>item.x);
-            });
-            const xMax = d3Max(points, (point)=>{
+            }).getTime();
+            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));
+            }).getTime();
+            xPadding = (xMax - xMin) * 0.1;
         } else {
-            const xMin = d3Min(points, (point)=>{
+            xMin = d3Min(_points, (point)=>{
                 return d3Min(point.data, (item)=>item.x);
             });
-            const xMax = d3Max(points, (point)=>{
+            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));
+            xPadding = (xMax - xMin) * 0.1;
         }
-        maxMarkerRange = Math.min(maxMarkerRange, Math.min(xPaddingRange, yPaddingRange));
         const maxMarkerSize = d3Max(_points, (point)=>{
             return d3Max(point.data, (item)=>{
                 return item.markerSize;
@@ -264,20 +275,20 @@ import { toImage } from '../../utilities/image-export-utils';
             const seriesColor = _points[i].color;
             const verticaLineHeight = containerHeight - margins.bottom + 6;
             for(let j = 0; j < _points[i].data.length; j++){
+                var _points_i_data_j;
                 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 extraMaxPixels = _xAxisType !== XAxisTypes.StringAxis ? _getRangeForScatterMarkerSize(_yAxisScale, yPadding, xMin, xMax, xPadding) : 0;
+                const circleRadius = pointMarkerSize ? pointMarkerSize * extraMaxPixels / maxMarkerSize : activePoint === circleId ? 6 : 4;
                 const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                 const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
-                pointsForSeries.push(/*#__PURE__*/ React.createElement("circle", {
+                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;
+                pointsForSeries.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
                     id: circleId,
                     key: circleId,
-                    r: circleRadius,
+                    r: Math.max(circleRadius, 4),
                     cx: _xAxisScale(x) + _xBandwidth,
                     cy: _yAxisScale(y),
                     "data-is-focusable": isLegendSelected,
@@ -293,7 +304,12 @@ import { toImage } from '../../utilities/image-export-utils';
                     role: "img",
                     "aria-label": _getAriaLabel(i, j),
                     tabIndex: isLegendSelected ? 0 : undefined
-                }));
+                }), ",", text && /*#__PURE__*/ React.createElement("text", {
+                    key: `${circleId}-label`,
+                    x: _xAxisScale(x) + _xBandwidth,
+                    y: _yAxisScale(y) + Math.max(circleRadius + 8, 16),
+                    className: classes.markerLabel
+                }, text)));
             }
             series.push(/*#__PURE__*/ React.createElement("g", {
                 key: `series_${i}`,
@@ -420,6 +436,7 @@ import { toImage } from '../../utilities/image-export-utils';
     function _isChartEmpty() {
         return !(props.data && props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData.filter((item)=>item.data.length).length > 0);
     }
+    const _getMinMaxofXAxis = React.useCallback((points, yAxisType)=>_getNumericMinMaxOfY(points, yAxisType), []);
     const { legendProps, tickValues, tickFormat } = props;
     _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
     let points = _points;
@@ -467,7 +484,7 @@ import { toImage } from '../../utilities/image-export-utils';
         getmargins: _getMargins,
         getGraphData: _initializeScatterChartData,
         xAxisType: _xAxisType,
-        getMinMaxOfYAxis: _getNumericMinMaxOfY,
+        getMinMaxOfYAxis: _getMinMaxofXAxis,
         getDomainNRangeValues: _getDomainNRangeValues,
         createYAxis: createNumericYAxis,
         createStringYAxis: createStringYAxis,