fix(declarative-chart): Remove Duplicate keys warning (#33722)

microsoft · Jan 24, 2025 · ab504b1 · ab504b1
1 parent 1466381
commit ab504b1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/change/@fluentui-react-charting-2caf6b30-798c-40cb-98ca-64aade9cc329.json b/change/@fluentui-react-charting-2caf6b30-798c-40cb-98ca-64aade9cc329.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix Duplicate keys warning",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -786,7 +786,7 @@ export class VerticalBarChartBase
       const gradientId = getId('VBC_Gradient') + `_${index}_${startColor}`;
 
       return (
-        <g key={point.x as string}>
+        <g key={`${point.x}_${index}` as string}>
           {this.props.enableGradient && (
             <defs>
               <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">
@@ -892,7 +892,7 @@ export class VerticalBarChartBase
 
       return (
         <g
-          key={point.x instanceof Date ? point.x.getTime() : point.x}
+          key={point.x instanceof Date ? `${point.x.getTime()}_${index}` : `${point.x}_${index}`}
           transform={`translate(${0.5 * (xBarScale.bandwidth() - this._barWidth)}, 0)`}
         >
           {this.props.enableGradient && (
@@ -1005,7 +1005,7 @@ export class VerticalBarChartBase
       const gradientId = getId('VBC_Gradient') + `_${index}_${startColor}`;
 
       return (
-        <g key={point.x instanceof Date ? point.x.getTime() : point.x}>
+        <g key={point.x instanceof Date ? `${point.x.getTime()}_${index}` : `${point.x}_${index}`}>
           {this.props.enableGradient && (
             <defs>
               <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">