Add strokeDasharray property when optimizeLargeData is true (#32494)

Co-authored-by: kaelens <kaelens@microsoft.com>
microsoft · Sep 10, 2024 · b1c2ab6 · b1c2ab6
1 parent ee0406b
commit b1c2ab6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/change/@fluentui-react-charting-fbf8562f-4d14-45f5-b74e-75304b828612.json b/change/@fluentui-react-charting-fbf8562f-4d14-45f5-b74e-75304b828612.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add strokeDasharray for line charts with large datasets",
+  "packageName": "@fluentui/react-charting",
+  "email": "kaelens@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -709,6 +709,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
               stroke={lineColor}
               strokeWidth={strokeWidth}
               strokeLinecap={this._points[i].lineOptions?.strokeLinecap ?? 'round'}
+              strokeDasharray={this._points[i].lineOptions?.strokeDasharray}
               onMouseMove={this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight)}
               onMouseOver={this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight)}
               onMouseOut={this._handleMouseOut}
@@ -727,6 +728,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
               stroke={lineColor}
               strokeWidth={strokeWidth}
               strokeLinecap={this._points[i].lineOptions?.strokeLinecap ?? 'round'}
+              strokeDasharray={this._points[i].lineOptions?.strokeDasharray}
               opacity={0.1}
             />,
           );