resolve comments

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

@@ -228,7 +228,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
       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`,
+          , xAxisType: String or Date`,
         );
       }
       const isAreaChart = plotlyInput.data.some(
@@ -239,7 +239,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
         if (isAreaChart) {
           return <AreaChart {...chartProps} />;
         }
-        return <LineChart {...chartProps} scatterMarkersMode={isScatterMarkers} />;
+        return <LineChart {...chartProps} mode={isScatterMarkers ? 'scatter' : 'default'} />;
       };
       return checkAndRenderChart(renderChartJsx, isAreaChart);
     case 'heatmap':

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

@@ -511,7 +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,
+        ...(Array.isArray(series.marker?.size) ? { markerSize: series.marker.size[i] } : {}),
       })),
       color: lineColor,
     } as ILineChartPoints;

packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx

@@ -820,7 +820,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
 
           const currentPointHidden = this._points[i].hideNonActiveDots && activePoint !== circleId;
           pointsForLine.push(
-            this.props.scatterMarkersMode ? (
+            this.props.mode === 'scatter' ? (
               <circle
                 id={circleId}
                 key={circleId}
@@ -913,7 +913,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
             } = this._points[i].data[j];
             pointsForLine.push(
               <React.Fragment key={`${lastCircleId}_container`}>
-                {this.props.scatterMarkersMode ? (
+                {this.props.mode === 'scatter' ? (
                   <circle
                     id={lastCircleId}
                     key={lastCircleId}
@@ -1039,7 +1039,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
             );
           }
 
-          if (!this.props.scatterMarkersMode) {
+          if (this.props.mode !== 'scatter') {
             if (isLegendSelected) {
               // don't draw line if it is in a gap
               if (!isInGap) {

packages/charts/react-charting/src/components/LineChart/LineChart.types.ts

@@ -92,7 +92,7 @@ export interface ILineChartProps extends ICartesianChartProps {
    * @default false
    * The prop used to handle scatter plot
    */
-  scatterMarkersMode?: boolean;
+  mode?: 'default' | 'scatter';
 }
 
 /**

packages/charts/react-charting/src/utilities/utilities.ts

@@ -446,15 +446,15 @@ export function createNumericYAxis(
     : yMinMaxValues.startValue < yMinValue
     ? 0
     : yMinValue!;
-  const maxMarkerSizeInPixelsForYAxis = maxMarkerSize
+  const maxMarkerSizeForYAxis = maxMarkerSize
     ? Math.abs(
         (maxMarkerSize * (finalYmin - finalYmax)) /
           (margins.top! - containerHeight + margins.bottom! + 2 * maxMarkerSize),
       )
     : 0;
   const domainValues = prepareDatapoints(
-    finalYmax + maxMarkerSizeInPixelsForYAxis,
-    finalYmin - maxMarkerSizeInPixelsForYAxis,
+    finalYmax + maxMarkerSizeForYAxis,
+    finalYmin - maxMarkerSizeForYAxis,
     yAxisTickCount,
     isIntegralDataset,
     roundedTicks,
@@ -924,22 +924,22 @@ export function domainRangeOfNumericForAreaChart(
       return item.markerSize as number;
     });
   })!;
-  const maxMarkerSizeInPixelsForXAxis = maxMarkerSize
+  const maxMarkerSizeForXAxis = maxMarkerSize
     ? Math.abs((maxMarkerSize * (xMax - xMin)) / (width - margins.right! - margins.left! - 2 * maxMarkerSize))
     : 0;
   const rStartValue = margins.left!;
   const rEndValue = width - margins.right!;
 
   return isRTL
     ? {
-        dStartValue: xMax + maxMarkerSizeInPixelsForXAxis,
-        dEndValue: xMin - maxMarkerSizeInPixelsForXAxis,
+        dStartValue: xMax + maxMarkerSizeForXAxis,
+        dEndValue: xMin - maxMarkerSizeForXAxis,
         rStartValue,
         rEndValue,
       }
     : {
-        dStartValue: xMin - maxMarkerSizeInPixelsForXAxis,
-        dEndValue: xMax + maxMarkerSizeInPixelsForXAxis,
+        dStartValue: xMin - maxMarkerSizeForXAxis,
+        dEndValue: xMax + maxMarkerSizeForXAxis,
         rStartValue,
         rEndValue,
       };