diff --git a/change/@fluentui-react-charting-880075c2-33de-4bf3-b00a-d31bc76baf6d.json b/change/@fluentui-react-charting-880075c2-33de-4bf3-b00a-d31bc76baf6d.json
new file mode 100644
index 0000000000000..f6e64e4cca408
--- /dev/null
+++ b/change/@fluentui-react-charting-880075c2-33de-4bf3-b00a-d31bc76baf6d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrading d3-scale dependent libraries",
+  "packageName": "@fluentui/react-charting",
+  "email": "ankityadav@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/jest.config.js b/packages/react-charting/jest.config.js
index 6dc8f84db267e..4ddb5b20d3e7f 100644
--- a/packages/react-charting/jest.config.js
+++ b/packages/react-charting/jest.config.js
@@ -10,8 +10,6 @@ function getEsmOnlyPackagesToCjsMapping() {
    */
   const cjsPathsToEsmOnlyPackages = {
     '^d3-scale$': prefix + 'node_modules/d3-scale/dist/d3-scale.js',
-    '^d3-array$': prefix + 'node_modules/d3-scale/node_modules/d3-array/dist/d3-array.js',
-    '^d3-time$': prefix + 'node_modules/d3-scale/node_modules/d3-time/dist/d3-time.js',
     '^d3-shape$': prefix + 'node_modules/d3-shape/dist/d3-shape.js',
     '^d3-path$': prefix + 'node_modules/d3-path/dist/d3-path.js',
   };
diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json
index 331ae41ff1d22..720ee8e22a988 100644
--- a/packages/react-charting/package.json
+++ b/packages/react-charting/package.json
@@ -41,7 +41,7 @@
     "@fluentui/react-focus": "^8.8.34",
     "@fluentui/theme-samples": "^8.7.122",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@types/d3-array": "1.2.1",
+    "@types/d3-array": "2.12.1",
     "@types/d3-axis": "1.0.10",
     "@types/d3-format": "^1.3.1",
     "@types/d3-hierarchy": "2.0.0",
@@ -50,9 +50,9 @@
     "@types/d3-selection": "1.4.1",
     "@types/d3-shape": "3.1.1",
     "@types/d3-time-format": "^2.1.0",
-    "@types/d3-time": "^1.1.0",
+    "@types/d3-time": "^2.1.1",
     "@fluentui/set-version": "^8.2.12",
-    "d3-array": "1.2.1",
+    "d3-array": "2.12.1",
     "d3-axis": "1.0.8",
     "d3-format": "^1.4.4",
     "d3-hierarchy": "2.0.0",
@@ -61,7 +61,7 @@
     "d3-selection": "1.3.0",
     "d3-shape": "3.2.0",
     "d3-time-format": "^2.1.3",
-    "d3-time": "^1.1.0",
+    "d3-time": "^2.1.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
index c863f49268819..f3a1c25b5d536 100644
--- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
@@ -147,7 +147,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             cx={40}
             cy={115.625}
             data-is-focusable={true}
-            fill="red"
+            fill="#ffffff"
             id="circle2_0"
             key="circle2_0"
             onBlur={[Function]}
@@ -155,7 +155,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
-            r={0}
+            r={8}
             role="img"
             stroke="red"
             strokeWidth={3}
@@ -165,7 +165,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             cx={-20}
             cy={20}
             data-is-focusable={true}
-            fill="#ffffff"
+            fill="red"
             id="circle2_1"
             key="circle2_1"
             onBlur={[Function]}
@@ -173,7 +173,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
-            r={8}
+            r={0}
             role="img"
             stroke="red"
             strokeWidth={3}
@@ -187,8 +187,8 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
           strokeDasharray={5.5}
           strokeWidth={1}
           visibility="visibility"
-          x1={-20}
-          x2={-20}
+          x1={40}
+          x2={40}
           y1={0}
           y2={310}
         />
@@ -469,7 +469,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
                 data-is-focusable={false}
                 role="text"
               >
-                40
+                20
               </div>
             </div>
             <div
@@ -501,7 +501,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
                         @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
                           forced-color-adjust: none;
                         }
-                    id="0_80"
+                    id="0_50"
                   >
                     <div>
                       <div
@@ -538,7 +538,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
                               color: rgb(255, 255, 255);
                             }
                       >
-                        80
+                        50
                       </div>
                     </div>
                   </div>
@@ -700,7 +700,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             cx={40}
             cy={115.625}
             data-is-focusable={true}
-            fill="red"
+            fill="#ffffff"
             id="circle2_0"
             key="circle2_0"
             onBlur={[Function]}
@@ -708,7 +708,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
-            r={0}
+            r={8}
             role="img"
             stroke="red"
             strokeWidth={3}
@@ -718,7 +718,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             cx={-20}
             cy={20}
             data-is-focusable={true}
-            fill="#ffffff"
+            fill="red"
             id="circle2_1"
             key="circle2_1"
             onBlur={[Function]}
@@ -726,7 +726,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
-            r={8}
+            r={0}
             role="img"
             stroke="red"
             strokeWidth={3}
@@ -740,8 +740,8 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
           strokeDasharray={5.5}
           strokeWidth={1}
           visibility="visibility"
-          x1={-20}
-          x2={-20}
+          x1={40}
+          x2={40}
           y1={0}
           y2={310}
         />
@@ -985,11 +985,11 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
           <div>
             <pre>
               {
-  "x": 40,
+  "x": 20,
   "values": [
     {
       "legend": "metaData1",
-      "y": 80,
+      "y": 50,
       "color": "red"
     }
   ]
@@ -1150,7 +1150,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             cx={40}
             cy={115.625}
             data-is-focusable={true}
-            fill="red"
+            fill="#ffffff"
             id="circle2_0"
             key="circle2_0"
             onBlur={[Function]}
@@ -1158,7 +1158,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
-            r={0}
+            r={8}
             role="img"
             stroke="red"
             strokeWidth={3}
@@ -1168,7 +1168,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             cx={-20}
             cy={20}
             data-is-focusable={true}
-            fill="#ffffff"
+            fill="red"
             id="circle2_1"
             key="circle2_1"
             onBlur={[Function]}
@@ -1176,7 +1176,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
-            r={8}
+            r={0}
             role="img"
             stroke="red"
             strokeWidth={3}
@@ -1190,8 +1190,8 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
           strokeDasharray={5.5}
           strokeWidth={1}
           visibility="visibility"
-          x1={-20}
-          x2={-20}
+          x1={40}
+          x2={40}
           y1={0}
           y2={310}
         />
@@ -1435,11 +1435,11 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
           <div>
             <pre>
               {
-  "x": 40,
+  "x": 20,
   "values": [
     {
       "legend": "metaData1",
-      "y": 80,
+      "y": 50,
       "color": "red"
     }
   ]
diff --git a/yarn.lock b/yarn.lock
index 5f161ac10a718..ea7eaf79d0272 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4936,10 +4936,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/d3-array@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-1.2.1.tgz#e489605208d46a1c9d980d2e5772fa9c75d9ec65"
-  integrity sha512-YBaAfimGdWE4nDuoGVKsH89/dkz2hWZ0i8qC+xxqmqi+XJ/aXiRF0jPtzXmN7VdkpVjy1xuDmM5/m1FNuB6VWA==
+"@types/d3-array@2.12.1":
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-2.12.1.tgz#bee6857b812f1ecfd5e6832fd67f617b667dd024"
+  integrity sha512-kVHqB3kfLpU0WYEmx5Y2hi3LRhUGIEIQXFdGazNNWQhyhzHx8xrgLtpAOKYzpfS3a+GjFMdKsI82QUH4q5dACQ==
 
 "@types/d3-axis@1.0.10":
   version "1.0.10"
@@ -5013,10 +5013,10 @@
   resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-2.1.1.tgz#dd2c79ec4575f1355484ab6b10407824668eba42"
   integrity sha512-tJSyXta8ZyJ52wDDHA96JEsvkbL6jl7wowGmuf45+fAkj5Y+SQOnz0N7/H68OWmPshPsAaWMQh+GAws44IzH3g==
 
-"@types/d3-time@*", "@types/d3-time@^1.1.0":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.1.1.tgz#6cf3a4242c3bbac00440dfb8ba7884f16bedfcbf"
-  integrity sha512-ULX7LoqXTCYtM+tLYOaeAJK7IwCT+4Gxlm2MaH0ErKLi07R5lh8NHCAyWcDkCCmx1AfRcBEV6H9QE9R25uP7jw==
+"@types/d3-time@*", "@types/d3-time@^2.1.1":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-2.1.3.tgz#af73575e35eb72cc26d57b4538bf2d60c320fd4b"
+  integrity sha512-9EOa1kDZ1f8v6C5Mepz5YpWrVikrywGTQQ6QaYiVonrN6Chmmji2/XEVF38gn4uId3f2j85Uod14OKsv7ITOhw==
 
 "@types/dedent@0.7.0":
   version "0.7.0"
@@ -10060,17 +10060,17 @@ cypress@10.6.0:
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
-d3-array@1, "d3-array@1 - 2", d3-array@1.2.1, d3-array@^1.1.1, d3-array@^1.2.0:
+d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
   integrity sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw==
 
-"d3-array@2 - 3", "d3-array@2.10.0 - 3":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.0.tgz#15bf96cd9b7333e02eb8de8053d78962eafcff14"
-  integrity sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==
+"d3-array@1 - 2", d3-array@2, "d3-array@2.10.0 - 3", d3-array@2.12.1:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
   dependencies:
-    internmap "1 - 2"
+    internmap "^1.0.0"
 
 d3-axis@1.0.8:
   version "1.0.8"
@@ -10221,17 +10221,17 @@ d3-time-format@2, "d3-time-format@2 - 4", d3-time-format@^2.1.3:
   dependencies:
     d3-time "1"
 
-d3-time@1, d3-time@^1.1.0:
+d3-time@1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
   integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
 
-"d3-time@2.1.1 - 3":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.0.0.tgz#65972cb98ae2d4954ef5c932e8704061335d4975"
-  integrity sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==
+"d3-time@2.1.1 - 3", d3-time@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
+  integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
   dependencies:
-    d3-array "2 - 3"
+    d3-array "2"
 
 d3-voronoi@^1.1.2:
   version "1.1.4"
@@ -14983,10 +14983,10 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-"internmap@1 - 2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
-  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
 
 interpret@^1.0.1, interpret@^1.1.0, interpret@^1.2.0:
   version "1.2.0"