create scatter plot from points in line chart

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -225,17 +225,21 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
         );
       }
     case 'scatter':
-      if (plotlyInput.data[0].mode === 'markers') {
-        throw new Error(`Unsupported chart - type :${plotlyInput.data[0]?.type}, mode: ${plotlyInput.data[0]?.mode}`);
+      if (plotlyInput.data[0].mode === 'markers' && !isNumberArray(plotlyInput.data[0].y!)) {
+        throw new Error(
+          `Unsupported chart - type :${plotlyInput.data[0]?.type}, mode: ${plotlyInput.data[0]?.mode}
+          , xAxisType: String`,
+        );
       }
       const isAreaChart = plotlyInput.data.some(
         (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy',
       );
+      const isScatterMarkers = plotlyInput.data[0]?.mode?.includes('markers');
       const renderChartJsx = (chartProps: ILineChartProps | IAreaChartProps) => {
         if (isAreaChart) {
           return <AreaChart {...chartProps} />;
         }
-        return <LineChart {...chartProps} />;
+        return <LineChart {...chartProps} scatterMarkersMode={isScatterMarkers} />;
       };
       return checkAndRenderChart(renderChartJsx, isAreaChart);
     case 'heatmap':

packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -511,6 +511,7 @@ export const transformPlotlyJsonToScatterChartProps = (
       data: xValues.map((x, i: number) => ({
         x: isString ? (isXDate ? new Date(x as string) : isXNumber ? parseFloat(x as string) : x) : x,
         y: series.y[i],
+        markerSize: Array.isArray(series.marker?.size) ? series.marker.size[i] : undefined,
       })),
       color: lineColor,
     } as ILineChartPoints;