@fluentui/react-charts 0.0.0-nightly-20250815-0407.1 → 0.0.0-nightly-20250819-0407.1

package/CHANGELOG.md

@@ -1,28 +1,28 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Fri, 15 Aug 2025 04:22:10 GMT and should not be manually modified.
+This log was last generated on Tue, 19 Aug 2025 04:22:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250815-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250815-0407.1)
+## [0.0.0-nightly-20250819-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250819-0407.1)
 
-Fri, 15 Aug 2025 04:22:10 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v0.0.0-nightly-20250815-0407.1)
+Tue, 19 Aug 2025 04:22:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v0.0.0-nightly-20250819-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-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
-- Bump @fluentui/react-overflow to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
-- Bump @fluentui/react-popover to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
-- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-overflow to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-popover to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
 
 ## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.2)
 

package/dist/index.d.ts

@@ -680,6 +680,10 @@ export declare interface ChartProps {
      * data for the points in the line chart
      */
     lineChartData?: LineChartPoints[];
+    /**
+     * data for the points in the scatter chart
+     */
+    scatterChartData?: ScatterChartPoints[];
     /**
      * data for the points in the line chart
      */
@@ -2621,6 +2625,10 @@ export declare interface LineChartDataPoint extends BaseDataPoint {
      * Dependent value of the data point, rendered along the y-axis.
      */
     y: number;
+    /**
+     * text labels of marker points
+     */
+    text?: string;
 }
 
 /**
@@ -2804,6 +2812,10 @@ export declare interface LineChartStyles extends CartesianChartStyles {
      * styles for line border
      */
     lineBorder?: string;
+    /**
+     * styles for marker label
+     */
+    markerLabel?: string;
 }
 
 /**
@@ -3331,6 +3343,50 @@ export declare interface ScatterChartDataPoint extends BaseDataPoint {
      * Marker size of the points
      */
     markerSize?: number;
+    /**
+     * text labels of marker points
+     */
+    text?: string;
+}
+
+/**
+ * {@docCategory IChartData}
+ */
+export declare interface ScatterChartPoints {
+    /**
+     * Legend text for the datapoint in the chart
+     */
+    legend: string;
+    /**
+     * The shape for the legend
+     * default: show the rect legend
+     */
+    legendShape?: LegendShape;
+    /**
+     * dataPoints for the line chart
+     */
+    data: ScatterChartDataPoint[];
+    /**
+     * color for the legend in the chart
+     */
+    color?: string;
+    /**
+     * opacity for chart fill color
+     */
+    opacity?: number;
+    /**
+     * hide dots for points that are not active
+     */
+    hideNonActiveDots?: boolean;
+    /**
+     * Defines the function that is executed on clicking this legend
+     */
+    onLegendClick?: (selectedLegend: string | null | string[]) => void;
+    /**
+     * Whether to use the secondary y scale or not
+     * False by default.
+     */
+    useSecondaryYScale?: boolean;
 }
 
 /**

package/lib/components/DeclarativeChart/DeclarativeChart.js

@@ -99,24 +99,27 @@ const useIsDarkTheme = ()=>{
         legendProps: multiSelectLegendProps,
         componentRef: chartRef
     };
-    const renderLineAreaScatter = (plotlyData, isAreaChart)=>{
+    const renderLineAreaScatter = (plotlyData, isAreaChart, isScatterChart)=>{
         var _plotlyData_;
         const isScatterMarkers = [
-            'markers',
             'text+markers',
-            'markers+text'
+            'markers+text',
+            'lines+markers',
+            'markers+line',
+            'text+lines+markers'
         ].includes((_plotlyData_ = plotlyData[0]) === null || _plotlyData_ === void 0 ? void 0 : _plotlyData_.mode);
+        const chartType = isAreaChart ? 'area' : isScatterChart ? 'scatter' : 'line';
         const chartProps = {
             ...transformPlotlyJsonToScatterChartProps({
                 data: plotlyData,
                 layout: plotlyInput.layout
-            }, isAreaChart, isScatterMarkers, colorMap, props.colorwayType, isDarkTheme),
+            }, chartType, isScatterMarkers, colorMap, props.colorwayType, isDarkTheme),
             ...commonProps
         };
         if (isAreaChart) {
             return /*#__PURE__*/ React.createElement(ResponsiveAreaChart, chartProps);
         }
-        if (isScatterMarkers) {
+        if (isScatterChart) {
             return /*#__PURE__*/ React.createElement(ResponsiveScatterChart, chartProps);
         }
         return /*#__PURE__*/ React.createElement(ResponsiveLineChart, chartProps);
@@ -133,14 +136,18 @@ const useIsDarkTheme = ()=>{
         // in time and brings additional complexity of handling timezone and locale
         // formatting given the current design of the charting library
         const isXYear = isYearArray(xValues);
-        if ((isXDate || isXNumber) && !isXYear && !isYString) {
-            return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);
+        const allModes = plotlyInputWithValidData.data.map((data)=>data.mode);
+        const isScatterChart = allModes.every((mode)=>mode === 'markers');
+        // If x is date or number and y is not string, render as Line/Area Chart
+        // If x is month, correct the year and render as Line/Area Chart
+        if ((isXDate || isXNumber) && !isXYear && !isYString || isScatterChart && !isYString) {
+            return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart, isScatterChart);
         } else if (isXMonth) {
             const updatedData = plotlyInputWithValidData.data.map((dataPoint)=>({
                     ...dataPoint,
                     x: correctYearMonth(dataPoint.x)
                 }));
-            return renderLineAreaScatter(updatedData, isAreaChart);
+            return renderLineAreaScatter(updatedData, isAreaChart, isScatterChart);
         }
         // Unsupported schema, render as VerticalStackedBarChart
         fallbackVSBC = true;
@@ -219,6 +226,7 @@ const useIsDarkTheme = ()=>{
         case 'line':
         case 'fallback':
         case 'scatterpolar':
+        case 'scatter':
             if (chart.type === 'scatterpolar') {
                 const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);
                 plotlyInputWithValidData.data = cartesianProjection.data;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  decodeBase64Fields,\n  isArrayOrTypedArray,\n  isDateArray,\n  isMonthArray,\n  isNumberArray,\n  isYearArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\nimport {\n  correctYearMonth,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n  transformPlotlyJsonToChartTableProps,\n  projectPolarToCartesian,\n  isStringArray,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n  /**\n   * Plotly schema represented as JSON object\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * The schema representing the chart data, layout and configuration\n   */\n  chartSchema: Schema;\n\n  /**\n   * Callback when an event occurs\n   */\n  onSchemaChange?: (eventData: Schema) => void;\n\n  /**\n   * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<IDeclarativeChart>;\n\n  /**\n   * Optional prop to specify the colorway type of the chart.\n   * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n   * - 'builtin': Use Fluent UI colorway.\n   * - 'others': Reserved for future colorways.\n   * @default 'default'\n   */\n  colorwayType?: ColorwayType;\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n  exportAsImage: (opts?: ImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n  const colorMap = React.useRef(new Map<string, string>());\n  return colorMap;\n};\n\nconst useIsDarkTheme = (): boolean => {\n  const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n  const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n  // Get background and foreground colors\n  const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n  const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n  const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n  return isDarkTheme;\n};\n\n/**\n * DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n  HTMLDivElement,\n  DeclarativeChartProps\n>((props, forwardedRef) => {\n  const { plotlySchema } = sanitizeJson(props.chartSchema);\n  const chart: OutputChartType = mapFluentChart(plotlySchema);\n  if (!chart.isValid) {\n    throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n  }\n  let plotlyInput = plotlySchema as PlotlySchema;\n  try {\n    plotlyInput = decodeBase64Fields(plotlyInput);\n  } catch (error) {\n    throw new Error(`Failed to decode plotly schema: ${error}`);\n  }\n  const plotlyInputWithValidData: PlotlySchema = {\n    ...plotlyInput,\n    data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n  };\n\n  let { selectedLegends } = plotlySchema;\n  const colorMap = useColorMapping();\n  const isDarkTheme = useIsDarkTheme();\n  const chartRef = React.useRef<Chart>(null);\n\n  if (!isArrayOrTypedArray(selectedLegends)) {\n    selectedLegends = [];\n  }\n\n  const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n  const onActiveLegendsChange = (keys: string[]) => {\n    setActiveLegends(keys);\n    if (props.onSchemaChange) {\n      props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n    }\n  };\n\n  React.useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { plotlySchema } = sanitizeJson(props.chartSchema);\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { selectedLegends } = plotlySchema;\n    setActiveLegends(selectedLegends ?? []);\n  }, [props.chartSchema]);\n\n  const multiSelectLegendProps = {\n    canSelectMultipleLegends: true,\n    onChange: onActiveLegendsChange,\n    selectedLegends: activeLegends,\n  };\n\n  const commonProps = {\n    legendProps: multiSelectLegendProps,\n    componentRef: chartRef,\n  };\n\n  const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean): JSXElement => {\n    const isScatterMarkers = ['markers', 'text+markers', 'markers+text'].includes((plotlyData[0] as PlotData)?.mode);\n    const chartProps: LineChartProps | AreaChartProps = {\n      ...transformPlotlyJsonToScatterChartProps(\n        { data: plotlyData, layout: plotlyInput.layout },\n        isAreaChart,\n        isScatterMarkers,\n        colorMap,\n        props.colorwayType,\n        isDarkTheme,\n      ),\n      ...commonProps,\n    };\n    if (isAreaChart) {\n      return <ResponsiveAreaChart {...chartProps} />;\n    }\n    if (isScatterMarkers) {\n      return <ResponsiveScatterChart {...chartProps} />;\n    }\n    return <ResponsiveLineChart {...chartProps} />;\n  };\n\n  const checkAndRenderChart = (isAreaChart: boolean = false) => {\n    let fallbackVSBC = false;\n    const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n    const isXDate = isDateArray(xValues);\n    const isXNumber = isNumberArray(xValues);\n    const isXMonth = isMonthArray(xValues);\n    const isYString = isStringArray((plotlyInputWithValidData.data[0] as Partial<PlotData>).y);\n\n    // Consider year as categorical variable not numeric continuous variable\n    // Also year is not considered a date variable as it is represented as a point\n    // in time and brings additional complexity of handling timezone and locale\n    // formatting given the current design of the charting library\n    const isXYear = isYearArray(xValues);\n\n    if ((isXDate || isXNumber) && !isXYear && !isYString) {\n      return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);\n    } else if (isXMonth) {\n      const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n        ...dataPoint,\n        x: correctYearMonth(dataPoint.x),\n      }));\n      return renderLineAreaScatter(updatedData, isAreaChart);\n    }\n    // Unsupported schema, render as VerticalStackedBarChart\n    fallbackVSBC = true;\n    return (\n      <ResponsiveVerticalStackedBarChart\n        {...transformPlotlyJsonToVSBCProps(\n          plotlyInputWithValidData,\n          colorMap,\n          props.colorwayType,\n          isDarkTheme,\n          fallbackVSBC,\n        )}\n        {...commonProps}\n      />\n    );\n  };\n\n  // TODO\n  const exportAsImage = React.useCallback((opts?: ImageExportOptions): Promise<string> => {\n    return new Promise((resolve, reject) => {\n      if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n        return reject(Error('Chart cannot be exported as image'));\n      }\n\n      chartRef.current\n        .toImage({\n          background: tokens.colorNeutralBackground1,\n          scale: 5,\n          ...opts,\n        })\n        .then(resolve)\n        .catch(reject);\n    });\n  }, []);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  switch (chart.type) {\n    case 'donut':\n      return (\n        <ResponsiveDonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <ResponsiveHorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(\n            plotlyInputWithValidData,\n            colorMap,\n            props.colorwayType,\n            isDarkTheme,\n          )}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <ResponsiveGroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <ResponsiveVerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'heatmap':\n      return (\n        <ResponsiveHeatMapChart\n          {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n          {...commonProps}\n          legendProps={{}}\n        />\n      );\n    case 'sankey':\n      return (\n        <ResponsiveSankeyChart\n          {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <ResponsiveGaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <ResponsiveVerticalBarChart\n          {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'table':\n      return (\n        <ResponsiveChartTable\n          {...transformPlotlyJsonToChartTableProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    // TODO: Add 'scatter' as a separate chart type\n    case 'area':\n    case 'line':\n    case 'fallback':\n    case 'scatterpolar':\n      if (chart.type === 'scatterpolar') {\n        const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n        plotlyInputWithValidData.data = cartesianProjection.data;\n      }\n      // Need recheck for area chart as we don't have ability to check for valid months in previous step\n      const isAreaChart = plotlyInputWithValidData.data.some(\n        (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup,\n      );\n      return checkAndRenderChart(isAreaChart);\n    default:\n      throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n  }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n  colorwayType: 'default',\n};\n"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isDateArray","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","projectPolarToCartesian","isStringArray","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","useColorMapping","colorMap","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","plotlyInput","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","index","selectedLegends","chartRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterMarkers","includes","mode","chartProps","layout","colorwayType","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isXNumber","isXMonth","isYString","y","isXYear","updatedData","dataPoint","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","type","cartesianProjection","some","series","fill","stackgroup","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  decodeBase64Fields,\n  isArrayOrTypedArray,\n  isDateArray,\n  isMonthArray,\n  isNumberArray,\n  isYearArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\nimport {\n  correctYearMonth,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n  transformPlotlyJsonToChartTableProps,\n  projectPolarToCartesian,\n  isStringArray,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart, ScatterChartProps } from '../ScatterChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n  /**\n   * Plotly schema represented as JSON object\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * The schema representing the chart data, layout and configuration\n   */\n  chartSchema: Schema;\n\n  /**\n   * Callback when an event occurs\n   */\n  onSchemaChange?: (eventData: Schema) => void;\n\n  /**\n   * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<IDeclarativeChart>;\n\n  /**\n   * Optional prop to specify the colorway type of the chart.\n   * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n   * - 'builtin': Use Fluent UI colorway.\n   * - 'others': Reserved for future colorways.\n   * @default 'default'\n   */\n  colorwayType?: ColorwayType;\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n  exportAsImage: (opts?: ImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n  const colorMap = React.useRef(new Map<string, string>());\n  return colorMap;\n};\n\nconst useIsDarkTheme = (): boolean => {\n  const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n  const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n  // Get background and foreground colors\n  const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n  const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n  const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n  return isDarkTheme;\n};\n\n/**\n * DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n  HTMLDivElement,\n  DeclarativeChartProps\n>((props, forwardedRef) => {\n  const { plotlySchema } = sanitizeJson(props.chartSchema);\n  const chart: OutputChartType = mapFluentChart(plotlySchema);\n  if (!chart.isValid) {\n    throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n  }\n  let plotlyInput = plotlySchema as PlotlySchema;\n  try {\n    plotlyInput = decodeBase64Fields(plotlyInput);\n  } catch (error) {\n    throw new Error(`Failed to decode plotly schema: ${error}`);\n  }\n  const plotlyInputWithValidData: PlotlySchema = {\n    ...plotlyInput,\n    data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n  };\n\n  let { selectedLegends } = plotlySchema;\n  const colorMap = useColorMapping();\n  const isDarkTheme = useIsDarkTheme();\n  const chartRef = React.useRef<Chart>(null);\n\n  if (!isArrayOrTypedArray(selectedLegends)) {\n    selectedLegends = [];\n  }\n\n  const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n  const onActiveLegendsChange = (keys: string[]) => {\n    setActiveLegends(keys);\n    if (props.onSchemaChange) {\n      props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n    }\n  };\n\n  React.useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { plotlySchema } = sanitizeJson(props.chartSchema);\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { selectedLegends } = plotlySchema;\n    setActiveLegends(selectedLegends ?? []);\n  }, [props.chartSchema]);\n\n  const multiSelectLegendProps = {\n    canSelectMultipleLegends: true,\n    onChange: onActiveLegendsChange,\n    selectedLegends: activeLegends,\n  };\n\n  const commonProps = {\n    legendProps: multiSelectLegendProps,\n    componentRef: chartRef,\n  };\n\n  const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean, isScatterChart: boolean): JSXElement => {\n    const isScatterMarkers = [\n      'text+markers',\n      'markers+text',\n      'lines+markers',\n      'markers+line',\n      'text+lines+markers',\n    ].includes((plotlyData[0] as PlotData)?.mode);\n    const chartType = isAreaChart ? 'area' : isScatterChart ? 'scatter' : 'line';\n    const chartProps: LineChartProps | AreaChartProps | ScatterChartProps = {\n      ...transformPlotlyJsonToScatterChartProps(\n        { data: plotlyData, layout: plotlyInput.layout },\n        chartType,\n        isScatterMarkers,\n        colorMap,\n        props.colorwayType,\n        isDarkTheme,\n      ),\n      ...commonProps,\n    };\n    if (isAreaChart) {\n      return <ResponsiveAreaChart {...chartProps} />;\n    }\n    if (isScatterChart) {\n      return <ResponsiveScatterChart {...(chartProps as ScatterChartProps)} />;\n    }\n    return <ResponsiveLineChart {...chartProps} />;\n  };\n\n  const checkAndRenderChart = (isAreaChart: boolean = false) => {\n    let fallbackVSBC = false;\n    const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n    const isXDate = isDateArray(xValues);\n    const isXNumber = isNumberArray(xValues);\n    const isXMonth = isMonthArray(xValues);\n    const isYString = isStringArray((plotlyInputWithValidData.data[0] as Partial<PlotData>).y);\n\n    // Consider year as categorical variable not numeric continuous variable\n    // Also year is not considered a date variable as it is represented as a point\n    // in time and brings additional complexity of handling timezone and locale\n    // formatting given the current design of the charting library\n    const isXYear = isYearArray(xValues);\n\n    const allModes = plotlyInputWithValidData.data.map((data: PlotData) => data.mode);\n    const isScatterChart = allModes.every((mode: string) => mode === 'markers');\n    // If x is date or number and y is not string, render as Line/Area Chart\n    // If x is month, correct the year and render as Line/Area Chart\n    if (((isXDate || isXNumber) && !isXYear && !isYString) || (isScatterChart && !isYString)) {\n      return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart, isScatterChart);\n    } else if (isXMonth) {\n      const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n        ...dataPoint,\n        x: correctYearMonth(dataPoint.x),\n      }));\n      return renderLineAreaScatter(updatedData, isAreaChart, isScatterChart);\n    }\n    // Unsupported schema, render as VerticalStackedBarChart\n    fallbackVSBC = true;\n    return (\n      <ResponsiveVerticalStackedBarChart\n        {...transformPlotlyJsonToVSBCProps(\n          plotlyInputWithValidData,\n          colorMap,\n          props.colorwayType,\n          isDarkTheme,\n          fallbackVSBC,\n        )}\n        {...commonProps}\n      />\n    );\n  };\n\n  // TODO\n  const exportAsImage = React.useCallback((opts?: ImageExportOptions): Promise<string> => {\n    return new Promise((resolve, reject) => {\n      if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n        return reject(Error('Chart cannot be exported as image'));\n      }\n\n      chartRef.current\n        .toImage({\n          background: tokens.colorNeutralBackground1,\n          scale: 5,\n          ...opts,\n        })\n        .then(resolve)\n        .catch(reject);\n    });\n  }, []);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  switch (chart.type) {\n    case 'donut':\n      return (\n        <ResponsiveDonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <ResponsiveHorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(\n            plotlyInputWithValidData,\n            colorMap,\n            props.colorwayType,\n            isDarkTheme,\n          )}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <ResponsiveGroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <ResponsiveVerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'heatmap':\n      return (\n        <ResponsiveHeatMapChart\n          {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n          {...commonProps}\n          legendProps={{}}\n        />\n      );\n    case 'sankey':\n      return (\n        <ResponsiveSankeyChart\n          {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <ResponsiveGaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <ResponsiveVerticalBarChart\n          {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'table':\n      return (\n        <ResponsiveChartTable\n          {...transformPlotlyJsonToChartTableProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    // TODO: Add 'scatter' as a separate chart type\n    case 'area':\n    case 'line':\n    case 'fallback':\n    case 'scatterpolar':\n    case 'scatter':\n      if (chart.type === 'scatterpolar') {\n        const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n        plotlyInputWithValidData.data = cartesianProjection.data;\n      }\n      // Need recheck for area chart as we don't have ability to check for valid months in previous step\n      const isAreaChart = plotlyInputWithValidData.data.some(\n        (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup,\n      );\n      return checkAndRenderChart(isAreaChart);\n    default:\n      throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n  }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n  colorwayType: 'default',\n};\n"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isDateArray","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","projectPolarToCartesian","isStringArray","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","useColorMapping","colorMap","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","plotlyInput","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","index","selectedLegends","chartRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterChart","isScatterMarkers","includes","mode","chartType","chartProps","layout","colorwayType","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isXNumber","isXMonth","isYString","y","isXYear","allModes","every","updatedData","dataPoint","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","type","cartesianProjection","some","series","fill","stackgroup","displayName","defaultProps"],"mappings":"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"}

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -216,14 +216,18 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
     let yMaxValue = 0;
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    let colorScale = undefined;
     let yMinValue = 0;
     input.data.forEach((series, index1)=>{
-        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_line;
+        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;
+        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') {
+            colorScale = createColorScale(input.layout, series);
+        }
         const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
         // extract bar colors for each series only once
-        const extractedBarColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+        const extractedBarColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
         // extract line colors for each series only once
-        const extractedLineColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
+        const extractedLineColors = extractColor((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_template1 = _input_layout2.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
         const xValues = series.x;
         const isXDate = isDateArray(xValues);
         const isXString = isStringArray(xValues);
@@ -233,6 +237,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
             const rangeXValues = series.x.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
             rangeXValues.forEach((x, index2)=>{
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = {
                         xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -241,8 +246,8 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
                     };
                 }
                 const legend = legends[index1];
-                // resolve color for each legend's bars from the extracted colors
-                const color = resolveColor(extractedBarColors, index1, legend, colorMap, isDarkTheme);
+                // 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(extractedBarColors, index2, legend, colorMap, isDarkTheme);
                 const yVal = rangeYValues[index2];
                 if (series.type === 'bar') {
                     mapXToDataPoints[x].chartData.push({
@@ -254,19 +259,20 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
                         yMaxValue = Math.max(yMaxValue, yVal);
                     }
                 } else if (series.type === 'scatter' || !!fallbackVSBC) {
-                    var _series_line;
+                    var _series_mode, _series_line, _series_mode1;
                     const lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
-                    const lineOptions = getLineOptions(series.line);
+                    const lineOptions = !((_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('text')) ? getLineOptions(series.line) : undefined;
                     const dashType = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) || 'solid';
-                    const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
+                    const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : ((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('markers')) ? 'circle' : 'default';
                     mapXToDataPoints[x].lineData.push({
                         legend: legend + (validXYRanges.length > 1 ? `.${rangeIdx + 1}` : ''),
                         legendShape,
                         y: yVal,
                         color: lineColor,
-                        ...lineOptions ? {
-                            lineOptions
-                        } : {},
+                        lineOptions: {
+                            ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
+                            mode: series.mode
+                        },
                         useSecondaryYScale: usesSecondaryYScale(series)
                     });
                     if (!usesSecondaryYScale(series) && typeof yVal === 'number') {
@@ -303,11 +309,18 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
         showYAxisLablesTooltip: true
     };
 };
-const createColorScale = (colorscale, domain)=>{
-    const [dMin, dMax] = domain;
+const createColorScale = (layout, series)=>{
+    var _layout_coloraxis, _series_marker, _layout_coloraxis1, _layout_coloraxis2;
+    const scale = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis = layout.coloraxis) === null || _layout_coloraxis === void 0 ? void 0 : _layout_coloraxis.colorscale;
+    const colorValues = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color;
+    var _layout_coloraxis_cmin, _layout_coloraxis_cmax;
+    const [dMin, dMax] = [
+        (_layout_coloraxis_cmin = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis1 = layout.coloraxis) === null || _layout_coloraxis1 === void 0 ? void 0 : _layout_coloraxis1.cmin) !== null && _layout_coloraxis_cmin !== void 0 ? _layout_coloraxis_cmin : Math.min(...colorValues),
+        (_layout_coloraxis_cmax = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis2 = layout.coloraxis) === null || _layout_coloraxis2 === void 0 ? void 0 : _layout_coloraxis2.cmax) !== null && _layout_coloraxis_cmax !== void 0 ? _layout_coloraxis_cmax : Math.max(...colorValues)
+    ];
     // Normalize colorscale domain to actual data domain
-    const scaleDomain = colorscale.map(([pos])=>dMin + pos * (dMax - dMin));
-    const scaleColors = colorscale.map((item)=>item[1]);
+    const scaleDomain = scale.map(([pos])=>dMin + pos * (dMax - dMin));
+    const scaleColors = scale.map((item)=>item[1]);
     return d3ScaleLinear().domain(scaleDomain).range(scaleColors);
 };
 export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
@@ -319,18 +332,7 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, is
     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') {
-            var _series_marker4, _input_layout_coloraxis1, _input_layout_coloraxis2;
-            const scale = input.layout.coloraxis.colorscale;
-            const colorValues = (_series_marker4 = series.marker) === null || _series_marker4 === void 0 ? void 0 : _series_marker4.color;
-            var _input_layout_coloraxis_cmin, _input_layout_coloraxis_cmax;
-            const [dMin, dMax] = [
-                (_input_layout_coloraxis_cmin = (_input_layout_coloraxis1 = input.layout.coloraxis) === null || _input_layout_coloraxis1 === void 0 ? void 0 : _input_layout_coloraxis1.cmin) !== null && _input_layout_coloraxis_cmin !== void 0 ? _input_layout_coloraxis_cmin : Math.min(...colorValues),
-                (_input_layout_coloraxis_cmax = (_input_layout_coloraxis2 = input.layout.coloraxis) === null || _input_layout_coloraxis2 === void 0 ? void 0 : _input_layout_coloraxis2.cmax) !== null && _input_layout_coloraxis_cmax !== void 0 ? _input_layout_coloraxis_cmax : Math.max(...colorValues)
-            ];
-            colorScale = createColorScale(scale, [
-                dMin,
-                dMax
-            ]);
+            colorScale = createColorScale(input.layout, series);
         }
         // extract colors for each series only once
         const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
@@ -346,10 +348,10 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, is
                 };
             }
             if (series.type === 'bar') {
-                var _series_marker, _series_marker_color, _series_marker1;
+                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_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : (_series_marker_color = _series_marker1.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2] : 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, index1, legend, colorMap, isDarkTheme);
                 mapXToDataPoints[x].series.push({
                     key: legend,
                     data: series.y[index2],
@@ -384,13 +386,17 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isD
     var _input_layout, _input_layout1, _vbcData_;
     const vbcData = [];
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    let colorScale = undefined;
     input.data.forEach((series, seriesIdx)=>{
-        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_xbins, _series_xbins1, _series_xbins2;
+        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_xbins, _series_xbins1, _series_xbins2;
         if (!series.x) {
             return;
         }
+        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') {
+            colorScale = createColorScale(input.layout, series);
+        }
         // extract colors for each series only once
-        const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+        const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
         const xValues = [];
         const yValues = [];
         series.x.forEach((xVal, index)=>{
@@ -419,9 +425,10 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isD
             return yVal;
         });
         xBins.forEach((bin, index)=>{
+            var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
             const legend = legends[seriesIdx];
-            // resolve color for each legend's bars from the extracted colors
-            const color = resolveColor(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
+            // 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[index % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
             const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             vbcData.push({
                 x: isXString ? bin.join(', ') : getBinCenter(bin),
@@ -451,12 +458,14 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isD
         roundCorners: true
     };
 };
-export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isScatterMarkers, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatterMarkers, colorMap, colorwayType, isDarkTheme)=>{
+    const isAreaChart = chartType === 'area';
+    const isScatterChart = chartType === 'scatter';
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, 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_line2;
+        var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_mode1, _series_line2, _series_mode2;
         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;
         // extract colors for each series only once
         const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, colors, colorMap, isDarkTheme);
@@ -464,21 +473,21 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
         const isXString = isStringArray(xValues);
         const isXDate = isDateArray(xValues);
         const isXNumber = isNumberArray(xValues);
-        // string case is not possible for scatter chart as it is already filtered out in declarative chart
-        const isXYearCategory = false;
+        const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
         const legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
         const seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
-        const lineOptions = getLineOptions(series.line);
+        const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) ? getLineOptions(series.line) : undefined;
         const dashType = ((_series_line2 = series.line) === null || _series_line2 === void 0 ? void 0 : _series_line2.dash) || 'solid';
-        const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
+        const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : ((_series_mode2 = series.mode) === null || _series_mode2 === void 0 ? void 0 : _series_mode2.includes('markers')) ? 'circle' : 'default';
         const validXYRanges = getValidXYRanges(series);
         return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
             var _series_marker;
             const rangeXValues = xValues.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
             const markerSizes = isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? series.marker.size.slice(rangeStart, rangeEnd) : [];
+            const textValues = Array.isArray(series.text) ? series.text.slice(rangeStart, rangeEnd) : undefined;
             return {
                 legend,
                 legendShape,
@@ -491,13 +500,17 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
                             markerSize: markerSizes[i]
                         } : typeof ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.size) === 'number' ? {
                             markerSize: series.marker.size
+                        } : {},
+                        ...textValues ? {
+                            text: textValues[i]
                         } : {}
                     };
                 }),
                 color: seriesColor,
-                ...lineOptions ? {
-                    lineOptions
-                } : {},
+                lineOptions: {
+                    ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
+                    mode: series.mode
+                },
                 useSecondaryYScale: usesSecondaryYScale(series)
             };
         });
@@ -509,6 +522,10 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
         chartTitle,
         lineChartData: chartData
     };
+    const scatterChartProps = {
+        chartTitle,
+        scatterChartData: chartData
+    };
     if (isAreaChart) {
         var _input_layout, _input_layout1;
         var _input_layout_height;
@@ -530,7 +547,7 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
         var _input_layout2, _input_layout3;
         var _input_layout_height1;
         return {
-            data: chartProps,
+            data: isScatterChart ? scatterChartProps : chartProps,
             supportNegativeData: true,
             xAxisTitle,
             yAxisTitle,
@@ -550,18 +567,22 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
 export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout_margin, _input_layout1, _input_layout_margin1, _input_layout2, _input_layout_yaxis2, _input_layout3, _input_layout_yaxis21, _input_layout4, _input_layout_yaxis2_title, _input_layout_yaxis22, _input_layout5, _input_layout6;
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    let colorScale = undefined;
     const chartData = input.data.map((series, index)=>{
-        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker;
+        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;
+        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') {
+            colorScale = createColorScale(input.layout, series);
+        }
         // extract colors for each series only once
-        const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+        const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
         const legend = legends[index];
-        // resolve color for each legend's bars from the extracted colors
-        const color = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         return series.y.map((yValue, i)=>{
-            var _series_x;
+            var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2;
             if (isInvalidValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || isInvalidValue(yValue)) {
                 return null;
             }
+            // 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[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
             return {
                 x: series.x[i],
                 y: yValue,