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

package/CHANGELOG.md

@@ -1,28 +1,61 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Wed, 20 Aug 2025 04:21:02 GMT and should not be manually modified.
+This log was last generated on Fri, 22 Aug 2025 04:22:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250820-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250820-0406.1)
+## [0.0.0-nightly-20250822-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250822-0407.1)
 
-Wed, 20 Aug 2025 04:21:02 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v0.0.0-nightly-20250820-0406.1)
+Fri, 22 Aug 2025 04:22:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.3..@fluentui/react-charts_v0.0.0-nightly-20250822-0407.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-button to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
-- Bump @fluentui/react-overflow to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
-- Bump @fluentui/react-popover to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
-- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250820-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1c2a7adf08d34834453a168af7ede24dc249d38) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+- Bump @fluentui/react-overflow to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+- Bump @fluentui/react-popover to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/9214ada4ffc741f67015ead61a4ac0b9a7f2d2a1) by beachball)
+
+## [9.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.3)
+
+Thu, 21 Aug 2025 12:25:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v9.2.3)
+
+### Patches
+
+- add labels for text+markers ([PR #35025](https://github.com/microsoft/fluentui/pull/35025) by anushgupta@microsoft.com)
+- fix scatter chart bugs ([PR #35047](https://github.com/microsoft/fluentui/pull/35047) by anushgupta@microsoft.com)
+- update validation to tolerate invalid traces ([PR #34998](https://github.com/microsoft/fluentui/pull/34998) by anushgupta@microsoft.com)
+- support for ordering tick labels ([PR #35053](https://github.com/microsoft/fluentui/pull/35053) by anushgupta@microsoft.com)
+- colorscale support for bar charts ([PR #35026](https://github.com/microsoft/fluentui/pull/35026) by anushgupta@microsoft.com)
+- pie chart fix ([PR #35013](https://github.com/microsoft/fluentui/pull/35013) by anushgupta@microsoft.com)
+- use piecolorway for donut chart ([PR #34999](https://github.com/microsoft/fluentui/pull/34999) by anushgupta@microsoft.com)
+- enable scatter chart in v9 declatative ([PR #35036](https://github.com/microsoft/fluentui/pull/35036) by anushgupta@microsoft.com)
+- support for using opacity provided in plotly schema ([PR #35045](https://github.com/microsoft/fluentui/pull/35045) by anushgupta@microsoft.com)
+- add date axis support in vsbc ([PR #35018](https://github.com/microsoft/fluentui/pull/35018) by anushgupta@microsoft.com)
+- add support for multiplot declarative chart ([PR #35038](https://github.com/microsoft/fluentui/pull/35038) by anushgupta@microsoft.com)
+- add styles to tables ([PR #35012](https://github.com/microsoft/fluentui/pull/35012) by anushgupta@microsoft.com)
+- remove duplicated legends in line chart ([PR #34991](https://github.com/microsoft/fluentui/pull/34991) by anushgupta@microsoft.com)
+- fix color issue in gvbc ([PR #35050](https://github.com/microsoft/fluentui/pull/35050) by anushgupta@microsoft.com)
+- support for lines+markers ([PR #34997](https://github.com/microsoft/fluentui/pull/34997) by anushgupta@microsoft.com)
+- use schema colorscale for gvbc ([PR #35011](https://github.com/microsoft/fluentui/pull/35011) by anushgupta@microsoft.com)
+- add support for string y axis in VSBC ([PR #35016](https://github.com/microsoft/fluentui/pull/35016) by anushgupta@microsoft.com)
+- Bump @fluentui/react-button to v9.6.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-overflow to v9.5.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-popover to v9.12.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.2)
 

package/lib/components/DeclarativeChart/PlotlyColorAdapter.js

@@ -84,7 +84,7 @@ export const extractColor = (colorway, colorwayType, colors, colorMap, isDarkThe
 };
 export const resolveColor = (extractedColors, index, legend, colorMap, isDarkTheme)=>{
     let color = '';
-    if (extractedColors && isArrayOrTypedArray(extractedColors)) {
+    if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {
         color = extractedColors[index % extractedColors.length];
     } else if (typeof extractedColors === 'string') {
         color = extractedColors;

package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DeclarativeChart/PlotlyColorAdapter.ts"],"sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color, PlotData } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\n\ntype PlotlyColorway = 'plotly' | 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' | 'builtin' | 'others' | undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n  '#636efa', //1\n  '#ef553b', //2\n  '#00cc96', //3\n  '#ab63fa', //4\n  '#ffa15a', //5\n  '#19d3f3', //6\n  '#ff6692', //7\n  '#b6e880', //8\n  '#ff97ff', //9\n  '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n  DataVizPalette.color1, //1\n  DataVizPalette.warning, //2\n  DataVizPalette.color8, //3\n  DataVizPalette.color4, //4\n  DataVizPalette.color7, //5\n  DataVizPalette.color6, //6\n  DataVizPalette.color2, //7\n  DataVizPalette.color5, //8\n  DataVizPalette.color9, //9\n  DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {\n  const isPlotlyColorway =\n    isArrayOrTypedArray(colorway) &&\n    areArraysEqual(\n      colorway?.map(c => c.toLowerCase()),\n      DEFAULT_PLOTLY_COLORWAY,\n    );\n\n  return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n  if (templateColorway !== 'plotly') {\n    return hexColor;\n  }\n  const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n  if (index !== -1) {\n    return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n  }\n  return hexColor;\n}\n\nexport const getColor = (\n  legendLabel: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  if (!colorMap.current.has(legendLabel)) {\n    let nextColor: string;\n    if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n      // Get first 10 colors from plotly-fluentviz colorway mapping\n      nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n    } else {\n      nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n    }\n    colorMap.current.set(legendLabel, nextColor);\n    return nextColor;\n  }\n\n  return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n  colorway: string[] | undefined,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string[] | string | undefined => {\n  const hexColors: string[] = [];\n  if (!colors) {\n    return undefined;\n  }\n  const templateColorway = getPlotlyColorway(colorway);\n  if (isArrayOrTypedArray(colors)) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (colors as any[]).forEach((element, index) => {\n      const colorString = element?.toString().trim();\n      const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n      if (colorString) {\n        const parsedColor = d3Color(colorString);\n        hexColors.push(\n          parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n        );\n      } else {\n        hexColors.push(nextFluentColor);\n      }\n    });\n  } else if (typeof colors === 'string') {\n    const parsedColor = d3Color(colors);\n    return parsedColor\n      ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n      : getColor('Label_0', colorMap, isDarkTheme);\n  }\n  return hexColors;\n};\n\nexport const extractColor = (\n  colorway: string[] | undefined,\n  colorwayType: ColorwayType,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string | string[] | undefined => {\n  return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n  extractedColors: string[] | string | null | undefined,\n  index: number,\n  legend: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  let color = '';\n  if (extractedColors && isArrayOrTypedArray(extractedColors)) {\n    color = extractedColors[index % extractedColors.length];\n  } else if (typeof extractedColors === 'string') {\n    color = extractedColors;\n  } else {\n    color = getColor(legend, colorMap, isDarkTheme);\n  }\n  return color;\n};\n\nexport const getOpacity = (series: Partial<PlotData>, index: number): number => {\n  return series.marker?.opacity\n    ? isArrayOrTypedArray(series.marker?.opacity)\n      ? (series.marker?.opacity as number[])[index % (series.marker?.opacity as number[]).length]\n      : (series.marker?.opacity as number)\n    : series.opacity ?? 1;\n};\n"],"names":["React","color","d3Color","isArrayOrTypedArray","areArraysEqual","DataVizPalette","getColorFromToken","getNextColor","DEFAULT_PLOTLY_COLORWAY","PLOTLY_FLUENTVIZ_COLORWAY_MAPPING","color1","warning","color8","color4","color7","color6","color2","color5","color9","color10","getPlotlyColorway","colorway","isPlotlyColorway","map","c","toLowerCase","tryMapFluentDataViz","hexColor","templateColorway","isDarkTheme","index","indexOf","getColor","legendLabel","colorMap","current","has","nextColor","size","length","set","get","getSchemaColors","colors","hexColors","undefined","forEach","element","colorString","toString","trim","nextFluentColor","parsedColor","push","formatHex","extractColor","colorwayType","resolveColor","extractedColors","legend","getOpacity","series","marker","opacity"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DeclarativeChart/PlotlyColorAdapter.ts"],"sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color, PlotData } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\n\ntype PlotlyColorway = 'plotly' | 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' | 'builtin' | 'others' | undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n  '#636efa', //1\n  '#ef553b', //2\n  '#00cc96', //3\n  '#ab63fa', //4\n  '#ffa15a', //5\n  '#19d3f3', //6\n  '#ff6692', //7\n  '#b6e880', //8\n  '#ff97ff', //9\n  '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n  DataVizPalette.color1, //1\n  DataVizPalette.warning, //2\n  DataVizPalette.color8, //3\n  DataVizPalette.color4, //4\n  DataVizPalette.color7, //5\n  DataVizPalette.color6, //6\n  DataVizPalette.color2, //7\n  DataVizPalette.color5, //8\n  DataVizPalette.color9, //9\n  DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {\n  const isPlotlyColorway =\n    isArrayOrTypedArray(colorway) &&\n    areArraysEqual(\n      colorway?.map(c => c.toLowerCase()),\n      DEFAULT_PLOTLY_COLORWAY,\n    );\n\n  return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n  if (templateColorway !== 'plotly') {\n    return hexColor;\n  }\n  const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n  if (index !== -1) {\n    return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n  }\n  return hexColor;\n}\n\nexport const getColor = (\n  legendLabel: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  if (!colorMap.current.has(legendLabel)) {\n    let nextColor: string;\n    if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n      // Get first 10 colors from plotly-fluentviz colorway mapping\n      nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n    } else {\n      nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n    }\n    colorMap.current.set(legendLabel, nextColor);\n    return nextColor;\n  }\n\n  return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n  colorway: string[] | undefined,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string[] | string | undefined => {\n  const hexColors: string[] = [];\n  if (!colors) {\n    return undefined;\n  }\n  const templateColorway = getPlotlyColorway(colorway);\n  if (isArrayOrTypedArray(colors)) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (colors as any[]).forEach((element, index) => {\n      const colorString = element?.toString().trim();\n      const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n      if (colorString) {\n        const parsedColor = d3Color(colorString);\n        hexColors.push(\n          parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n        );\n      } else {\n        hexColors.push(nextFluentColor);\n      }\n    });\n  } else if (typeof colors === 'string') {\n    const parsedColor = d3Color(colors);\n    return parsedColor\n      ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n      : getColor('Label_0', colorMap, isDarkTheme);\n  }\n  return hexColors;\n};\n\nexport const extractColor = (\n  colorway: string[] | undefined,\n  colorwayType: ColorwayType,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string | string[] | undefined => {\n  return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n  extractedColors: string[] | string | null | undefined,\n  index: number,\n  legend: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  let color = '';\n  if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {\n    color = extractedColors[index % extractedColors.length];\n  } else if (typeof extractedColors === 'string') {\n    color = extractedColors;\n  } else {\n    color = getColor(legend, colorMap, isDarkTheme);\n  }\n  return color;\n};\n\nexport const getOpacity = (series: Partial<PlotData>, index: number): number => {\n  return series.marker?.opacity\n    ? isArrayOrTypedArray(series.marker?.opacity)\n      ? (series.marker?.opacity as number[])[index % (series.marker?.opacity as number[]).length]\n      : (series.marker?.opacity as number)\n    : series.opacity ?? 1;\n};\n"],"names":["React","color","d3Color","isArrayOrTypedArray","areArraysEqual","DataVizPalette","getColorFromToken","getNextColor","DEFAULT_PLOTLY_COLORWAY","PLOTLY_FLUENTVIZ_COLORWAY_MAPPING","color1","warning","color8","color4","color7","color6","color2","color5","color9","color10","getPlotlyColorway","colorway","isPlotlyColorway","map","c","toLowerCase","tryMapFluentDataViz","hexColor","templateColorway","isDarkTheme","index","indexOf","getColor","legendLabel","colorMap","current","has","nextColor","size","length","set","get","getSchemaColors","colors","hexColors","undefined","forEach","element","colorString","toString","trim","nextFluentColor","parsedColor","push","formatHex","extractColor","colorwayType","resolveColor","extractedColors","legend","getOpacity","series","marker","opacity"],"mappings":"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"}

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -4,7 +4,7 @@ import { scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { format as d3Format } from 'd3-format';
 import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 import { findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS } from '../../utilities/utilities';
-import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue } from '@fluentui/chart-utilities';
+import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { getOpacity, extractColor, resolveColor } from './PlotlyColorAdapter';
 import { rgb } from 'd3-color';
@@ -56,6 +56,47 @@ function getTitles(layout) {
     };
     return titles;
 }
+const getXAxisTickFormat = (series, layout)=>{
+    const xAxis = getXAxisProperties(series, layout);
+    if (xAxis === null || xAxis === void 0 ? void 0 : xAxis.tickformat) {
+        return {
+            tickFormat: xAxis === null || xAxis === void 0 ? void 0 : xAxis.tickformat
+        };
+    }
+    return {};
+};
+const getYAxisTickFormat = (series, layout)=>{
+    const yAxis = getYAxisProperties(series, layout);
+    if (yAxis === null || yAxis === void 0 ? void 0 : yAxis.tickformat) {
+        return {
+            yAxisTickFormat: d3Format(yAxis === null || yAxis === void 0 ? void 0 : yAxis.tickformat)
+        };
+    }
+    return {};
+};
+const getYMinMaxValues = (series, layout)=>{
+    var _getYAxisProperties;
+    const range = (_getYAxisProperties = getYAxisProperties(series, layout)) === null || _getYAxisProperties === void 0 ? void 0 : _getYAxisProperties.range;
+    if (range && range.length === 2) {
+        return {
+            yMinValue: range[0],
+            yMaxValue: range[1]
+        };
+    }
+    return {};
+};
+const getYAxisProperties = (series, layout)=>{
+    return layout === null || layout === void 0 ? void 0 : layout.yaxis;
+};
+const getXAxisProperties = (series, layout)=>{
+    return layout === null || layout === void 0 ? void 0 : layout.xaxis;
+};
+const getFormattedCalloutYData = (yVal, yAxisFormat)=>{
+    if (typeof (yAxisFormat === null || yAxisFormat === void 0 ? void 0 : yAxisFormat.yAxisTickFormat) === 'function' && typeof yVal === 'number') {
+        return yAxisFormat.yAxisTickFormat(yVal);
+    }
+    return formatToLocaleString(yVal);
+};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const correctYearMonth = (xValues)=>{
     const presentYear = new Date().getFullYear();
@@ -219,6 +260,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
+    const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     let yMinValue = 0;
     input.data.forEach((series, index1)=>{
         var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _input_layout_template_layout1, _input_layout_template1, _input_layout2, _series_line;
@@ -252,6 +294,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                 const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedBarColors, index2, legend, colorMap, isDarkTheme);
                 const opacity = getOpacity(series, index2);
                 const yVal = rangeYValues[index2];
+                const yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
                 if (series.type === 'bar') {
                     var _rgb_copy_formatHex8;
                     mapXToDataPoints[x].chartData.push({
@@ -259,7 +302,8 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                         data: yVal,
                         color: (_rgb_copy_formatHex8 = rgb(color).copy({
                             opacity
-                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
+                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
+                        yAxisCalloutData
                     });
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -281,7 +325,8 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                             ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
                             mode: series.mode
                         },
-                        useSecondaryYScale: usesSecondaryYScale(series, input.layout)
+                        useSecondaryYScale: usesSecondaryYScale(series, input.layout),
+                        yAxisCalloutData
                     });
                     if (!usesSecondaryYScale(series, input.layout) && typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -292,7 +337,6 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
             });
         });
     });
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     const vsbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
@@ -302,9 +346,6 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         barWidth: 'auto',
         yMaxValue,
         yMinValue,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         mode: 'plotly',
         ...secondaryYAxisValues,
         wrapXAxisLables: typeof ((_vsbcData_ = vsbcData[0]) === null || _vsbcData_ === void 0 ? void 0 : _vsbcData_.xAxisPoint) === 'string',
@@ -314,7 +355,11 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         roundCorners: true,
         showYAxisLables: true,
         noOfCharsToTruncate: 20,
-        showYAxisLablesTooltip: true
+        showYAxisLablesTooltip: true,
+        ...getTitles(input.layout),
+        ...getXAxisTickFormat(input.data[0], input.layout),
+        ...yAxisTickFormat,
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
 const createColorScale = (layout, series)=>{
@@ -337,6 +382,7 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
+    const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     input.data.forEach((series, index1)=>{
         var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_x;
         if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[0]) === 'number') {
@@ -359,23 +405,24 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
                 var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
                 const legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
-                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
+                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index2, legend, colorMap, isDarkTheme);
                 const opacity = getOpacity(series, index2);
+                const yVal = series.y[index2];
                 var _rgb_copy_formatHex8;
                 mapXToDataPoints[x].series.push({
                     key: legend,
-                    data: series.y[index2],
+                    data: yVal,
                     xAxisCalloutData: x,
                     color: (_rgb_copy_formatHex8 = rgb(color).copy({
                         opacity
                     }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
                     legend,
-                    useSecondaryYScale: usesSecondaryYScale(series, input.layout)
+                    useSecondaryYScale: usesSecondaryYScale(series, input.layout),
+                    yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat)
                 });
             }
         });
     });
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     const gvbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
@@ -383,15 +430,17 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
         width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         barWidth: 'auto',
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
         wrapXAxisLables: typeof ((_gvbcData_ = gvbcData[0]) === null || _gvbcData_ === void 0 ? void 0 : _gvbcData_.name) === 'string',
         hideLegend,
-        roundCorners: true
+        roundCorners: true,
+        ...getTitles(input.layout),
+        ...getYMinMaxValues(input.data[0], input.layout),
+        ...getXAxisTickFormat(input.data[0], input.layout),
+        ...yAxisTickFormat,
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
 export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -457,21 +506,20 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
             });
         });
     });
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     var _input_layout_height;
     return {
         data: vbcData,
         width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         mode: 'histogram',
         hideTickOverlap: true,
         wrapXAxisLables: typeof ((_vbcData_ = vbcData[0]) === null || _vbcData_ === void 0 ? void 0 : _vbcData_.x) === 'string',
         maxBarWidth: 50,
         hideLegend,
-        roundCorners: true
+        roundCorners: true,
+        ...getTitles(input.layout),
+        ...getYMinMaxValues(input.data[0], input.layout),
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
 export const transformPlotlyJsonToAreaChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -484,7 +532,7 @@ export const transformPlotlyJsonToScatterChartProps = (input, isMultiPlot, color
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
 };
 const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme)=>{
-    var _input_data_;
+    var _input_data_, _input_layout, _input_layout1;
     const isScatterMarkers = [
         'markers',
         'text+markers',
@@ -498,6 +546,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
+    const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     const chartData = input.data.map((series, index)=>{
         var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_mode1;
         const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color : (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
@@ -538,7 +587,8 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
                         } : {},
                         ...textValues ? {
                             text: textValues[i]
-                        } : {}
+                        } : {},
+                        yAxisCalloutData: getFormattedCalloutYData(rangeYValues[i], yAxisTickFormat)
                     };
                 }),
                 color: (_rgb_copy_formatHex8 = rgb(seriesColor).copy({
@@ -552,52 +602,45 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
             };
         });
     }).flat();
-    const yMinMaxValues = findNumericMinMaxOfY(chartData);
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    const yMinMax = getYMinMaxValues(input.data[0], input.layout);
+    if (yMinMax.yMinValue === undefined && yMinMax.yMaxValue === undefined) {
+        const yMinMaxValues = findNumericMinMaxOfY(chartData);
+        yMinMax.yMinValue = yMinMaxValues.startValue;
+        yMinMax.yMaxValue = yMinMaxValues.endValue;
+    }
     const numDataPoints = chartData.reduce((total, lineChartPoints)=>total + lineChartPoints.data.length, 0);
     const chartProps = {
-        chartTitle,
         lineChartData: chartData
     };
     const scatterChartProps = {
-        chartTitle,
         scatterChartData: chartData
     };
+    var _input_layout_height;
+    const commonProps = {
+        supportNegativeData: true,
+        ...secondaryYAxisValues,
+        width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
+        height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
+        hideTickOverlap: true,
+        hideLegend,
+        useUTC: false,
+        optimizeLargeData: numDataPoints > 1000,
+        ...getTitles(input.layout),
+        ...getXAxisTickFormat(input.data[0], input.layout),
+        ...yAxisTickFormat
+    };
     if (isAreaChart) {
-        var _input_layout, _input_layout1;
-        var _input_layout_height;
         return {
             data: chartProps,
-            supportNegativeData: true,
-            xAxisTitle,
-            yAxisTitle,
-            ...secondaryYAxisValues,
             mode,
-            width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
-            height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
-            hideTickOverlap: true,
-            useUTC: false,
-            hideLegend,
-            optimizeLargeData: numDataPoints > 1000
+            ...commonProps
         };
     } else {
-        var _input_layout2, _input_layout3;
-        var _input_layout_height1;
         return {
             data: isScatterChart ? scatterChartProps : chartProps,
-            supportNegativeData: true,
-            xAxisTitle,
-            yAxisTitle,
-            ...secondaryYAxisValues,
             roundedTicks: true,
-            yMinValue: yMinMaxValues.startValue,
-            yMaxValue: yMinMaxValues.endValue,
-            width: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.width,
-            height: (_input_layout_height1 = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.height) !== null && _input_layout_height1 !== void 0 ? _input_layout_height1 : 350,
-            hideTickOverlap: true,
-            useUTC: false,
-            hideLegend,
-            optimizeLargeData: numDataPoints > 1000
+            ...commonProps,
+            ...yMinMax
         };
     }
 };
@@ -631,8 +674,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
                 }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
             };
         }).filter((point)=>point !== null);
-    }).reverse().flat()//reversing the order to invert the Y bars order as required by plotly.
-    .reverse();
+    }).flat();
     var _input_layout_height;
     const chartHeight = (_input_layout_height = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 450;
     var _input_layout_margin_l;
@@ -644,12 +686,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
     const scalingFactor = 0.01;
     const gapFactor = 1 / (1 + scalingFactor * numberOfRows);
     const barHeight = availableHeight / (numberOfRows * (1 + gapFactor));
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     return {
         data: chartData,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         secondaryYAxistitle: typeof ((_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_yaxis2 = _input_layout3.yaxis2) === null || _input_layout_yaxis2 === void 0 ? void 0 : _input_layout_yaxis2.title) === 'string' ? (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_yaxis21 = _input_layout4.yaxis2) === null || _input_layout_yaxis21 === void 0 ? void 0 : _input_layout_yaxis21.title : ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_yaxis22 = _input_layout5.yaxis2) === null || _input_layout_yaxis22 === void 0 ? void 0 : (_input_layout_yaxis2_title = _input_layout_yaxis22.title) === null || _input_layout_yaxis2_title === void 0 ? void 0 : _input_layout_yaxis2_title.text) || '',
         barHeight,
         showYAxisLables: true,
@@ -659,7 +697,9 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
         hideLegend,
-        roundCorners: true
+        roundCorners: true,
+        ...getTitles(input.layout),
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
 export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -773,7 +813,6 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
     }
     const domainValuesForColorScale = Array.isArray(colorscale) ? colorscale.map((arr)=>arr[0] * (zMax - zMin) + zMin) : defaultDomain;
     const rangeValuesForColorScale = Array.isArray(colorscale) ? colorscale.map((arr)=>arr[1]) : defaultRange;
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     var _input_layout_height;
     return {
         data: [
@@ -783,16 +822,17 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         rangeValuesForColorScale,
         hideLegend: true,
         showYAxisLables: true,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         sortOrder: 'none',
         width: (_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.width,
         height: (_input_layout_height = (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
-        wrapXAxisLables: true
+        wrapXAxisLables: true,
+        ...getTitles(input.layout),
+        ...getAxisCategoryOrderProps([
+            firstData
+        ], input.layout)
     };
 };
 export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -1518,3 +1558,42 @@ export const getGridProperties = (layout, isMultiPlot)=>{
         layout: reversedGridLayout
     };
 };
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/category_order_defaults.js#L50}
+ */ const getAxisCategoryOrderProps = (data, layout)=>{
+    const result = {};
+    const axesById = {
+        x: layout === null || layout === void 0 ? void 0 : layout.xaxis,
+        y: layout === null || layout === void 0 ? void 0 : layout.yaxis
+    };
+    Object.keys(axesById).forEach((axId)=>{
+        const ax = axesById[axId];
+        const axLetter = axId[0];
+        const propName = `${axLetter}AxisCategoryOrder`;
+        const values = [];
+        data.forEach((series)=>{
+            var _series_axLetter;
+            (_series_axLetter = series[axLetter]) === null || _series_axLetter === void 0 ? void 0 : _series_axLetter.forEach((val)=>{
+                if (!isInvalidValue(val)) {
+                    values.push(val);
+                }
+            });
+        });
+        const isAxisTypeCategory = (ax === null || ax === void 0 ? void 0 : ax.type) === 'category' || isStringArray(values) && !isNumberArray(values) && !isDateArray(values);
+        if (!isAxisTypeCategory) {
+            return;
+        }
+        const isValidArray = isArrayOrTypedArray(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
+        if (isValidArray && (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'array')) {
+            result[propName] = ax.categoryarray;
+            return;
+        }
+        if (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
+            const categoriesInTraceOrder = Array.from(new Set(values));
+            result[propName] = categoriesInTraceOrder;
+            return;
+        }
+        result[propName] = ax.categoryorder;
+    });
+    return result;
+};