fix(react-charts): Make legends of dotted line as dotted (#34947)

Co-authored-by: Anush <anushgupta@microsoft.com>

Author: Anush2303

change/@fluentui-react-charts-5d1a7c9a-0619-4534-8f8b-810b32cf95da.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "make legends of dotted lines dotted",
+  "packageName": "@fluentui/react-charts",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -1127,6 +1127,7 @@ export interface LineDataInVerticalStackedBarChart {
     data?: number;
     // (undocumented)
     legend: string;
+    legendShape?: LegendShape;
     lineOptions?: LineChartLineOptions;
     useSecondaryYScale?: boolean;
     // (undocumented)

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

@@ -286,8 +286,12 @@ export const transformPlotlyJsonToVSBCProps = (
       } else if (series.type === 'scatter' || !!fallbackVSBC) {
         const color = getColor(legend, colorMap, isDarkTheme);
         const lineOptions = getLineOptions(series.line);
+        const dashType = series.line?.dash || 'solid';
+        const legendShape =
+          dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
         mapXToDataPoints[x].lineData!.push({
           legend,
+          legendShape,
           y: yVal,
           color,
           ...(lineOptions ? { lineOptions } : {}),
@@ -463,9 +467,12 @@ export const transformPlotlyJsonToScatterChartProps = (
     const lineColor = getColor(legend, colorMap, isDarkTheme);
     mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
     const lineOptions = getLineOptions(series.line);
+    const dashType = series.line?.dash || 'solid';
+    const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
 
     return {
       legend,
+      legendShape,
       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],

packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap

@@ -3178,6 +3178,7 @@ Object {
           },
         ],
         "legend": "a",
+        "legendShape": "default",
         "lineOptions": Object {
           "curve": "linear",
         },
@@ -3228,6 +3229,7 @@ Object {
           },
         ],
         "legend": "b",
+        "legendShape": "default",
         "lineOptions": Object {
           "curve": "linear",
         },
@@ -3278,6 +3280,7 @@ Object {
           },
         ],
         "legend": "c",
+        "legendShape": "default",
         "lineOptions": Object {
           "curve": "linear",
         },
@@ -3328,6 +3331,7 @@ Object {
           },
         ],
         "legend": "d",
+        "legendShape": "default",
         "lineOptions": Object {
           "curve": "linear",
         },
@@ -3757,6 +3761,7 @@ Object {
           },
         ],
         "legend": "Trace 0",
+        "legendShape": "default",
         "lineOptions": Object {
           "curve": "linear",
         },
@@ -4167,6 +4172,7 @@ Object {
           },
         ],
         "legend": "Trace 1",
+        "legendShape": "default",
         "lineOptions": Object {
           "curve": "linear",
         },
@@ -4577,6 +4583,7 @@ Object {
           },
         ],
         "legend": "Trace 2",
+        "legendShape": "default",
         "lineOptions": Object {
           "curve": "linear",
         },

packages/charts/react-charts/library/src/types/DataPoint.ts

@@ -616,6 +616,11 @@ export interface LineDataInVerticalStackedBarChart {
   y: number;
   color: string;
   legend: string;
+  /**
+   * The shape for the legend
+   * default: show the rect legend
+   */
+  legendShape?: LegendShape;
   /**
    * Data to show in callout
    */