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

Author: Anush2303

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": "74965306+Anush2303@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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%">