fix(react-charting): Fixing markers appearing as lines (microsoft#35170)

Author: srmukher

change/@fluentui-react-charting-ac20735c-0380-468d-b9ce-1fb7d2f5232d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-charting): Fixing markers appearing as lines",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/etc/react-charting.api.md

@@ -246,6 +246,7 @@ export interface IAreaChartStyles extends ICartesianChartStyles {
 export interface IBaseDataPoint {
     callOutAccessibilityData?: IAccessibilityProps;
     hideCallout?: boolean;
+    markerColor?: string;
     markerSize?: number;
     onDataPointClick?: () => void;
     text?: string;

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

@@ -1084,6 +1084,11 @@ const transformPlotlyJsonToScatterTraceProps = (
         const markerSizes = isArrayOrTypedArray(series.marker?.size)
           ? (series.marker!.size as number[]).slice(rangeStart, rangeEnd)
           : [];
+        const markerColors = isArrayOrTypedArray(series.marker?.color)
+          ? (series.marker!.color as string[]).slice(rangeStart, rangeEnd)
+          : Array.isArray(series.marker?.color)
+          ? (series.marker!.color as string[]).slice(rangeStart, rangeEnd)
+          : undefined;
         const textValues = Array.isArray(series.text) ? series.text.slice(rangeStart, rangeEnd) : undefined;
 
         return {
@@ -1097,6 +1102,7 @@ const transformPlotlyJsonToScatterTraceProps = (
               : typeof series.marker?.size === 'number'
               ? { markerSize: series.marker.size }
               : {}),
+            ...(markerColors ? { markerColor: markerColors[i] } : {}),
             ...(textValues ? { text: textValues[i] } : {}),
             yAxisCalloutData: getFormattedCalloutYData(rangeYValues[i] as number, yAxisTickFormat),
           })),

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

@@ -880,7 +880,10 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           ]);
         }
 
-        if (isLegendSelected) {
+        // Check if lines should be drawn based on mode
+        const lineMode = this._points[i].lineOptions?.mode;
+        const shouldDrawLines = lineMode !== 'markers';
+        if (shouldDrawLines && isLegendSelected) {
           const lineBorderWidth = this._points[i].lineOptions?.lineBorderWidth
             ? Number.parseFloat(this._points[i].lineOptions!.lineBorderWidth!.toString())
             : 0;
@@ -917,7 +920,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
               opacity={1}
             />,
           );
-        } else {
+        } else if (shouldDrawLines) {
           linesForLine.push(
             <path
               id={lineId}
@@ -935,6 +938,8 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
         }
 
         const isPointHighlighted = this.state.activeLine !== null && this.state.activeLine === i;
+
+        // Always add the highlight circle for large dataset hover
         pointsForLine.push(
           <circle
             id={`${this._staticHighlightCircle}_${i}`}
@@ -951,6 +956,46 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
             onMouseOut={this._handleMouseOut}
           />,
         );
+
+        // Add individual markers if mode includes 'markers'
+        const showMarkers = lineMode?.includes('markers') || !lineMode; // Show markers by default if no mode specified
+        if (showMarkers) {
+          for (let k = 0; k < this._points[i].data.length; k++) {
+            const { x, y } = this._points[i].data[k];
+            const xPoint = this._xAxisScale(x instanceof Date ? x.getTime() : x);
+            const yPoint = yScale(y);
+
+            if (isPlottable(xPoint, yPoint)) {
+              const markerSize = this._points[i].data[k].markerSize;
+              const perPointColor = this._points[i].data[k]?.markerColor;
+              pointsForLine.push(
+                <circle
+                  key={`${this._circleId}_${i}_${k}_marker`}
+                  r={
+                    markerSize
+                      ? (markerSize! * extraMaxPixels * 0.3) / maxMarkerSize
+                      : activePoint === this._circleId
+                      ? 5.5
+                      : 3.5
+                  }
+                  cx={xPoint}
+                  cy={yPoint}
+                  fill={
+                    activePoint === this._circleId
+                      ? theme!.semanticColors.bodyBackground
+                      : perPointColor || this._points[i]?.color || lineColor
+                  }
+                  stroke={perPointColor || lineColor}
+                  strokeWidth={1}
+                  opacity={isLegendSelected ? 1 : 0.1}
+                  onMouseMove={this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight, yScale)}
+                  onMouseOver={this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight, yScale)}
+                  onMouseOut={this._handleMouseOut}
+                />,
+              );
+            }
+          }
+        }
       } else if (!this.props.optimizeLargeData) {
         for (let j = 1; j < this._points[i].data.length; j++) {
           const gapResult = this._checkInGap(j, gaps, gapIndex);
@@ -1019,8 +1064,8 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                     onBlur={this._handleMouseOut}
                     {...this._getClickHandler(this._points[i].data[j - 1].onDataPointClick)}
                     opacity={isLegendSelected && !currentPointHidden ? 1 : 0.01}
-                    fill={this._getPointFill(lineColor, circleId, j, false)}
-                    stroke={lineColor}
+                    fill={this._points[i].data[j - 1]?.markerColor || this._getPointFill(lineColor, circleId, j, false)}
+                    stroke={this._points[i].data[j - 1]?.markerColor || lineColor}
                     strokeWidth={strokeWidth}
                     role="img"
                     aria-label={this._points[i].data[j - 1].text ?? this._getAriaLabel(i, j - 1)}
@@ -1078,8 +1123,8 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                   onBlur={this._handleMouseOut}
                   {...this._getClickHandler(this._points[i].data[j - 1].onDataPointClick)}
                   opacity={isLegendSelected && !currentPointHidden ? 1 : 0.01}
-                  fill={this._getPointFill(lineColor, circleId, j, false)}
-                  stroke={lineColor}
+                  fill={this._points[i].data[j - 1]?.markerColor || this._getPointFill(lineColor, circleId, j, false)}
+                  stroke={this._points[i].data[j - 1]?.markerColor || lineColor}
                   strokeWidth={strokeWidth}
                   role="img"
                   aria-label={this._getAriaLabel(i, j - 1)}
@@ -1214,8 +1259,10 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                       onBlur={this._handleMouseOut}
                       {...this._getClickHandler(this._points[i].data[j].onDataPointClick)}
                       opacity={isLegendSelected && !lastPointHidden ? 1 : 0.01}
-                      fill={this._getPointFill(lineColor, lastCircleId, j, true)}
-                      stroke={lineColor}
+                      fill={
+                        this._points[i].data[j]?.markerColor || this._getPointFill(lineColor, lastCircleId, j, true)
+                      }
+                      stroke={this._points[i].data[j]?.markerColor || lineColor}
                       strokeWidth={strokeWidth}
                       role="img"
                       aria-label={this._getAriaLabel(i, j)}

packages/charts/react-charting/src/types/IDataPoint.ts

@@ -340,6 +340,11 @@ export interface IBaseDataPoint {
    * text labels of marker points
    */
   text?: string;
+
+  /**
+   * Per-point marker color (overrides series color when present)
+   */
+  markerColor?: string;
 }
 
 /**