diff --git a/samples/react-chartcontrol/README.md b/samples/react-chartcontrol/README.md
index bceafcbfd..23973456e 100644
--- a/samples/react-chartcontrol/README.md
+++ b/samples/react-chartcontrol/README.md
@@ -193,6 +193,7 @@ Version|Date|Comments
 -------|----|--------
 1.0|January, 2019|Initial release
 1.1|July 02, 2020|Upgraded to SPFx 1.10.0
+1.2|December 04, 2020|Upgraded to SPFx 1.11.0 and Fluent UI 7.x
 
 ## Disclaimer
 
diff --git a/samples/react-chartcontrol/config/package-solution.json b/samples/react-chartcontrol/config/package-solution.json
index 4f832f486..b8d93f1c1 100644
--- a/samples/react-chartcontrol/config/package-solution.json
+++ b/samples/react-chartcontrol/config/package-solution.json
@@ -3,7 +3,7 @@
   "solution": {
     "name": "react-chartcontrol-client-side-solution",
     "id": "fb9665fb-4455-4b7f-99ab-2195920871fd",
-    "version": "1.1.0.0",
+    "version": "1.2.0.0",
     "includeClientSideAssets": true,
     "developer": {
       "name": "Contoso",
diff --git a/samples/react-chartcontrol/package-lock.json b/samples/react-chartcontrol/package-lock.json
index 4668463f3..c117e9249 100644
--- a/samples/react-chartcontrol/package-lock.json
+++ b/samples/react-chartcontrol/package-lock.json
@@ -59,7 +59,6 @@
       "version": "7.9.0",
       "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-7.9.0.tgz",
       "integrity": "sha512-D8p5WWeonqRO1EgIvo7WSlX1rcm87r2VQd62zTJPQImx8rpwc77CRI+iAvfxyVHRZMdt4Qk6Jq99dUaudPWaZw==",
-      "dev": true,
       "requires": {
         "@uifabric/set-version": "^7.0.23",
         "tslib": "^1.10.0"
@@ -69,7 +68,6 @@
           "version": "7.0.23",
           "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
           "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
-          "dev": true,
           "requires": {
             "tslib": "^1.10.0"
           }
@@ -77,8 +75,7 @@
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
@@ -110,7 +107,6 @@
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.2.12.tgz",
       "integrity": "sha512-t3yIbbPKJubb22vQ/FIWwS9vFAzaPYzFxKWPHVWLtxs/P+5yL+LD3B16DRtYreWAdl9CZvEbos58ChLZ0KHwSQ==",
-      "dev": true,
       "requires": {
         "tslib": "^1.10.0"
       },
@@ -118,8 +114,32 @@
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@fluentui/react": {
+      "version": "7.153.4",
+      "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-7.153.4.tgz",
+      "integrity": "sha512-ksglyptT/nkjChmIZ2OiushPJMMBfYgJHclMYqfp8Z4TGeXWPaYT6l5HfKeEZJTsMz3WtJpy+6MB48Yh4PYOLA==",
+      "requires": {
+        "@uifabric/set-version": "^7.0.23",
+        "office-ui-fabric-react": "^7.153.4",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "@uifabric/set-version": {
+          "version": "7.0.23",
+          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
+          "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
+          "requires": {
+            "tslib": "^1.10.0"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
@@ -127,7 +147,6 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@fluentui/react-compose/-/react-compose-0.19.12.tgz",
       "integrity": "sha512-GTcZ3kd2rTk3Q7xXJB8cTPfv0Q0vOdeIrLcJ02lXfjE9h3GPTE62rV4iFzBIZyXIKL8IdR6Jh8WNIBkVMWhhxw==",
-      "dev": true,
       "requires": {
         "@types/classnames": "^2.2.9",
         "@uifabric/set-version": "^7.0.23",
@@ -140,7 +159,6 @@
           "version": "7.19.1",
           "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.19.1.tgz",
           "integrity": "sha512-yqUwmk62Kgu216QNPE9vOfS3h0kiSbTvoqM5QcZi+IzpqsBOlzZx3A9Er9UiDaqHRd5lsYF5pO/jeUULmBWF/A==",
-          "dev": true,
           "requires": {
             "@uifabric/set-version": "^7.0.23",
             "tslib": "^1.10.0"
@@ -150,7 +168,6 @@
           "version": "7.0.23",
           "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
           "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
-          "dev": true,
           "requires": {
             "tslib": "^1.10.0"
           }
@@ -159,7 +176,6 @@
           "version": "7.33.2",
           "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.2.tgz",
           "integrity": "sha512-v2c3IUJdpru/hoGNOwIW549O5D4XBAc5sLpB7RREGI5ywoWuIJlNyYtBEGOwhAY62J2blj11qi86Ep+oZDM/Kw==",
-          "dev": true,
           "requires": {
             "@fluentui/dom-utilities": "^1.1.1",
             "@uifabric/merge-styles": "^7.19.1",
@@ -172,7 +188,6 @@
           "version": "15.7.2",
           "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
           "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-          "dev": true,
           "requires": {
             "loose-envify": "^1.4.0",
             "object-assign": "^4.1.1",
@@ -182,8 +197,7 @@
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
@@ -191,7 +205,6 @@
       "version": "7.16.19",
       "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-7.16.19.tgz",
       "integrity": "sha512-BUnSJ7CRs0gfaEXVr5w9YQsZXB18J35k7H7eyB5wLLLgwdK/ogt6uYcu3p0q5ZEjju8C/wmJ2zgwFCMKiAyTUA==",
-      "dev": true,
       "requires": {
         "@fluentui/keyboard-key": "^0.2.12",
         "@fluentui/react-theme-provider": "^0.18.0",
@@ -205,14 +218,12 @@
         "@microsoft/load-themed-styles": {
           "version": "1.10.138",
           "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.10.138.tgz",
-          "integrity": "sha512-TDY8c3CnIbysFIQ8Lj/ZujLkvDB/jrnVOx6FDJICFfo1Jbcyia+nIbUkOJtXtTGK/sx/zfyYJxgFgKQEAtKLHQ==",
-          "dev": true
+          "integrity": "sha512-TDY8c3CnIbysFIQ8Lj/ZujLkvDB/jrnVOx6FDJICFfo1Jbcyia+nIbUkOJtXtTGK/sx/zfyYJxgFgKQEAtKLHQ=="
         },
         "@uifabric/merge-styles": {
           "version": "7.19.1",
           "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.19.1.tgz",
           "integrity": "sha512-yqUwmk62Kgu216QNPE9vOfS3h0kiSbTvoqM5QcZi+IzpqsBOlzZx3A9Er9UiDaqHRd5lsYF5pO/jeUULmBWF/A==",
-          "dev": true,
           "requires": {
             "@uifabric/set-version": "^7.0.23",
             "tslib": "^1.10.0"
@@ -222,7 +233,6 @@
           "version": "7.0.23",
           "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
           "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
-          "dev": true,
           "requires": {
             "tslib": "^1.10.0"
           }
@@ -231,7 +241,6 @@
           "version": "7.16.18",
           "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.16.18.tgz",
           "integrity": "sha512-jINFRMWfSIOZ4H29YNBHtwZU4f8JFprnyBX2E0Wq9rjqRzgcmdYbN2yn88gym6aC3houSDcYM0rdfG4ETjRQSA==",
-          "dev": true,
           "requires": {
             "@fluentui/theme": "^1.7.0",
             "@microsoft/load-themed-styles": "^1.10.26",
@@ -245,7 +254,6 @@
           "version": "7.33.2",
           "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.2.tgz",
           "integrity": "sha512-v2c3IUJdpru/hoGNOwIW549O5D4XBAc5sLpB7RREGI5ywoWuIJlNyYtBEGOwhAY62J2blj11qi86Ep+oZDM/Kw==",
-          "dev": true,
           "requires": {
             "@fluentui/dom-utilities": "^1.1.1",
             "@uifabric/merge-styles": "^7.19.1",
@@ -258,7 +266,6 @@
           "version": "15.7.2",
           "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
           "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-          "dev": true,
           "requires": {
             "loose-envify": "^1.4.0",
             "object-assign": "^4.1.1",
@@ -268,8 +275,7 @@
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
@@ -277,7 +283,6 @@
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/@fluentui/react-stylesheets/-/react-stylesheets-0.2.4.tgz",
       "integrity": "sha512-zTyDxBsQsm5iz59SXn83+BrC3tUnwQdJc/xcPYWWVISIyPby/75URbWK5uYJ5p5Qy0GrpgKDGYAbpXZlN89SRQ==",
-      "dev": true,
       "requires": {
         "@uifabric/set-version": "^7.0.23",
         "tslib": "^1.10.0"
@@ -287,7 +292,6 @@
           "version": "7.0.23",
           "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
           "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
-          "dev": true,
           "requires": {
             "tslib": "^1.10.0"
           }
@@ -295,8 +299,7 @@
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
@@ -304,7 +307,6 @@
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/@fluentui/react-theme-provider/-/react-theme-provider-0.18.0.tgz",
       "integrity": "sha512-dKSOZ1Sl2uVrDzjvfRtwHUluedU0MhEASukyeqGTpKTmg3ucPMYEZn+dgzFqRNpjs9trbb++N8R6Z19CWokXOw==",
-      "dev": true,
       "requires": {
         "@fluentui/react-compose": "^0.19.12",
         "@fluentui/react-stylesheets": "^0.2.4",
@@ -322,7 +324,6 @@
           "version": "7.19.1",
           "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.19.1.tgz",
           "integrity": "sha512-yqUwmk62Kgu216QNPE9vOfS3h0kiSbTvoqM5QcZi+IzpqsBOlzZx3A9Er9UiDaqHRd5lsYF5pO/jeUULmBWF/A==",
-          "dev": true,
           "requires": {
             "@uifabric/set-version": "^7.0.23",
             "tslib": "^1.10.0"
@@ -332,7 +333,6 @@
           "version": "7.13.9",
           "resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.13.9.tgz",
           "integrity": "sha512-VtDg2b3ypYXX7MLp1STk1Fj6ZIeZktXnm0hu1Os/pGvq6xkuLRly5XP6ZSHitm8K7ZcMo48CcNL8smmiXprBQg==",
-          "dev": true,
           "requires": {
             "@fluentui/react-window-provider": "^1.0.1",
             "@uifabric/set-version": "^7.0.23",
@@ -344,7 +344,6 @@
           "version": "7.0.23",
           "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
           "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
-          "dev": true,
           "requires": {
             "tslib": "^1.10.0"
           }
@@ -353,7 +352,6 @@
           "version": "7.33.2",
           "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.2.tgz",
           "integrity": "sha512-v2c3IUJdpru/hoGNOwIW549O5D4XBAc5sLpB7RREGI5ywoWuIJlNyYtBEGOwhAY62J2blj11qi86Ep+oZDM/Kw==",
-          "dev": true,
           "requires": {
             "@fluentui/dom-utilities": "^1.1.1",
             "@uifabric/merge-styles": "^7.19.1",
@@ -366,7 +364,6 @@
           "version": "15.7.2",
           "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
           "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-          "dev": true,
           "requires": {
             "loose-envify": "^1.4.0",
             "object-assign": "^4.1.1",
@@ -376,8 +373,7 @@
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
@@ -385,7 +381,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-1.0.1.tgz",
       "integrity": "sha512-5hvruDyF0uE8+6YN6Y+d2sEzexBadxUNxUjDcDreTPsmtHPwF5FPBYLhoD7T84L5U4YNvKxKh25tYJm6E0GE2w==",
-      "dev": true,
       "requires": {
         "@uifabric/set-version": "^7.0.23",
         "tslib": "^1.10.0"
@@ -395,7 +390,6 @@
           "version": "7.0.23",
           "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
           "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
-          "dev": true,
           "requires": {
             "tslib": "^1.10.0"
           }
@@ -403,8 +397,7 @@
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
@@ -5806,8 +5799,7 @@
     "@types/classnames": {
       "version": "2.2.11",
       "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz",
-      "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==",
-      "dev": true
+      "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw=="
     },
     "@types/es6-promise": {
       "version": "0.0.33",
@@ -6273,41 +6265,51 @@
       }
     },
     "@uifabric/icons": {
-      "version": "6.5.5",
-      "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-6.5.5.tgz",
-      "integrity": "sha512-cGjzdpT0jzQ2RJvzlCVTrewaHCi4rb+ZNL2LWoceMi+5h196Y32qJwKMsc0ggR6u5CjMrzBiAxUFNppBSCutdA==",
+      "version": "7.5.17",
+      "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-7.5.17.tgz",
+      "integrity": "sha512-2S1kse0gtseTuV2r59iWukLxxoOJ6GgP2Yhxt9oxzaP9QubpYdxCUepvJmfPQQvvy4GELdykDUWQ6/hbzliJyw==",
       "requires": {
-        "@uifabric/set-version": "^1.1.3",
-        "@uifabric/styling": "^6.50.7",
-        "tslib": "^1.7.1"
+        "@uifabric/set-version": "^7.0.23",
+        "@uifabric/styling": "^7.16.18",
+        "tslib": "^1.10.0"
       },
       "dependencies": {
         "@uifabric/set-version": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-1.1.3.tgz",
-          "integrity": "sha512-IYpwVIuN7MJOeiWzZzr9AmFSvA5zc6gJn4fNHtEFIQnNB8WVWIcYrvx8Tbf7wWj9MvhdHYp70F054zZlHbL/Ag==",
+          "version": "7.0.23",
+          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
+          "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
           "requires": {
-            "tslib": "^1.7.1"
+            "tslib": "^1.10.0"
           }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
     "@uifabric/merge-styles": {
-      "version": "6.19.4",
-      "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz",
-      "integrity": "sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.19.1.tgz",
+      "integrity": "sha512-yqUwmk62Kgu216QNPE9vOfS3h0kiSbTvoqM5QcZi+IzpqsBOlzZx3A9Er9UiDaqHRd5lsYF5pO/jeUULmBWF/A==",
       "requires": {
-        "@uifabric/set-version": "^1.1.3",
-        "tslib": "^1.7.1"
+        "@uifabric/set-version": "^7.0.23",
+        "tslib": "^1.10.0"
       },
       "dependencies": {
         "@uifabric/set-version": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-1.1.3.tgz",
-          "integrity": "sha512-IYpwVIuN7MJOeiWzZzr9AmFSvA5zc6gJn4fNHtEFIQnNB8WVWIcYrvx8Tbf7wWj9MvhdHYp70F054zZlHbL/Ag==",
+          "version": "7.0.23",
+          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
+          "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
           "requires": {
-            "tslib": "^1.7.1"
+            "tslib": "^1.10.0"
           }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
@@ -6374,45 +6376,72 @@
       }
     },
     "@uifabric/styling": {
-      "version": "6.50.7",
-      "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.50.7.tgz",
-      "integrity": "sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==",
+      "version": "7.16.18",
+      "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.16.18.tgz",
+      "integrity": "sha512-jINFRMWfSIOZ4H29YNBHtwZU4f8JFprnyBX2E0Wq9rjqRzgcmdYbN2yn88gym6aC3houSDcYM0rdfG4ETjRQSA==",
       "requires": {
-        "@microsoft/load-themed-styles": "^1.7.13",
-        "@uifabric/merge-styles": "^6.19.4",
-        "@uifabric/set-version": "^1.1.3",
-        "@uifabric/utilities": "^6.41.7",
-        "tslib": "^1.7.1"
+        "@fluentui/theme": "^1.7.0",
+        "@microsoft/load-themed-styles": "^1.10.26",
+        "@uifabric/merge-styles": "^7.19.1",
+        "@uifabric/set-version": "^7.0.23",
+        "@uifabric/utilities": "^7.33.2",
+        "tslib": "^1.10.0"
       },
       "dependencies": {
+        "@microsoft/load-themed-styles": {
+          "version": "1.10.138",
+          "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.10.138.tgz",
+          "integrity": "sha512-TDY8c3CnIbysFIQ8Lj/ZujLkvDB/jrnVOx6FDJICFfo1Jbcyia+nIbUkOJtXtTGK/sx/zfyYJxgFgKQEAtKLHQ=="
+        },
         "@uifabric/set-version": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-1.1.3.tgz",
-          "integrity": "sha512-IYpwVIuN7MJOeiWzZzr9AmFSvA5zc6gJn4fNHtEFIQnNB8WVWIcYrvx8Tbf7wWj9MvhdHYp70F054zZlHbL/Ag==",
+          "version": "7.0.23",
+          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
+          "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
           "requires": {
-            "tslib": "^1.7.1"
+            "tslib": "^1.10.0"
           }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
     "@uifabric/utilities": {
-      "version": "6.45.2",
-      "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.45.2.tgz",
-      "integrity": "sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==",
+      "version": "7.33.2",
+      "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.2.tgz",
+      "integrity": "sha512-v2c3IUJdpru/hoGNOwIW549O5D4XBAc5sLpB7RREGI5ywoWuIJlNyYtBEGOwhAY62J2blj11qi86Ep+oZDM/Kw==",
       "requires": {
-        "@uifabric/merge-styles": "^6.19.4",
-        "@uifabric/set-version": "^1.1.3",
-        "prop-types": "^15.5.10",
-        "tslib": "^1.7.1"
+        "@fluentui/dom-utilities": "^1.1.1",
+        "@uifabric/merge-styles": "^7.19.1",
+        "@uifabric/set-version": "^7.0.23",
+        "prop-types": "^15.7.2",
+        "tslib": "^1.10.0"
       },
       "dependencies": {
         "@uifabric/set-version": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-1.1.3.tgz",
-          "integrity": "sha512-IYpwVIuN7MJOeiWzZzr9AmFSvA5zc6gJn4fNHtEFIQnNB8WVWIcYrvx8Tbf7wWj9MvhdHYp70F054zZlHbL/Ag==",
+          "version": "7.0.23",
+          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
+          "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
           "requires": {
-            "tslib": "^1.7.1"
+            "tslib": "^1.10.0"
           }
+        },
+        "prop-types": {
+          "version": "15.7.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.8.1"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
@@ -8602,8 +8631,7 @@
     "classnames": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==",
-      "dev": true
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
     },
     "clean-css": {
       "version": "4.2.1",
@@ -17059,39 +17087,75 @@
       "integrity": "sha512-gcBs5HHr7tjkvk/+Ls10ttb3jEllRn7SvJitX/kx/gQq8BiFMSMKr1w+oNqXlh4EgkBHWUlJVPrYUu1KW/jVaQ=="
     },
     "office-ui-fabric-react": {
-      "version": "6.214.0",
-      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.214.0.tgz",
-      "integrity": "sha512-sYqi0bhZSdEWpQAsHSropoHm0SxLJkdvQDE+3reSnP+rWABD+WCLvMxRuunoQIFjZKDHZ1f+w+L6Nr7nXc+wbQ==",
+      "version": "7.153.4",
+      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.153.4.tgz",
+      "integrity": "sha512-BF4eDxilcW2I6vboXECPqcz2nPYjFZtnHR7lSSY67xRWX0B1+g5xccxqUiDNO/vFmRzvTpD4j53JN70TIzJm1Q==",
       "requires": {
-        "@microsoft/load-themed-styles": "^1.7.13",
-        "@uifabric/foundation": "^0.8.3",
-        "@uifabric/icons": "^6.5.5",
-        "@uifabric/merge-styles": "^6.19.4",
-        "@uifabric/set-version": "^1.1.3",
-        "@uifabric/styling": "^6.50.7",
-        "@uifabric/utilities": "^6.45.2",
-        "prop-types": "^15.5.10",
-        "tslib": "^1.7.1"
+        "@fluentui/date-time-utilities": "^7.9.0",
+        "@fluentui/react-focus": "^7.16.19",
+        "@fluentui/react-window-provider": "^1.0.1",
+        "@microsoft/load-themed-styles": "^1.10.26",
+        "@uifabric/foundation": "^7.9.20",
+        "@uifabric/icons": "^7.5.17",
+        "@uifabric/merge-styles": "^7.19.1",
+        "@uifabric/react-hooks": "^7.13.9",
+        "@uifabric/set-version": "^7.0.23",
+        "@uifabric/styling": "^7.16.18",
+        "@uifabric/utilities": "^7.33.2",
+        "prop-types": "^15.7.2",
+        "tslib": "^1.10.0"
       },
       "dependencies": {
+        "@microsoft/load-themed-styles": {
+          "version": "1.10.138",
+          "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.10.138.tgz",
+          "integrity": "sha512-TDY8c3CnIbysFIQ8Lj/ZujLkvDB/jrnVOx6FDJICFfo1Jbcyia+nIbUkOJtXtTGK/sx/zfyYJxgFgKQEAtKLHQ=="
+        },
         "@uifabric/foundation": {
-          "version": "0.8.3",
-          "resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-0.8.3.tgz",
-          "integrity": "sha512-r3WhRj7Out8QAOe50BGA36R8zgRPy0D0GNPuwFK9BB9oIidf91ycj7/miY8U0TZRZi5fB3Kg+dy/uxSDfgC6Og==",
+          "version": "7.9.20",
+          "resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-7.9.20.tgz",
+          "integrity": "sha512-AcOClWfs+rNK0XyPLKTK2Nqeom7zOESOfL3Tbwl5VuDlSrlGW9yNywuuo6gJSOyXCJQO5dJFVdGExmB0EM4vkw==",
           "requires": {
-            "@uifabric/set-version": "^1.1.3",
-            "@uifabric/styling": "^6.50.7",
-            "@uifabric/utilities": "^6.41.7",
-            "tslib": "^1.7.1"
+            "@uifabric/merge-styles": "^7.19.1",
+            "@uifabric/set-version": "^7.0.23",
+            "@uifabric/styling": "^7.16.18",
+            "@uifabric/utilities": "^7.33.2",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@uifabric/react-hooks": {
+          "version": "7.13.9",
+          "resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.13.9.tgz",
+          "integrity": "sha512-VtDg2b3ypYXX7MLp1STk1Fj6ZIeZktXnm0hu1Os/pGvq6xkuLRly5XP6ZSHitm8K7ZcMo48CcNL8smmiXprBQg==",
+          "requires": {
+            "@fluentui/react-window-provider": "^1.0.1",
+            "@uifabric/set-version": "^7.0.23",
+            "@uifabric/utilities": "^7.33.2",
+            "tslib": "^1.10.0"
           }
         },
         "@uifabric/set-version": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-1.1.3.tgz",
-          "integrity": "sha512-IYpwVIuN7MJOeiWzZzr9AmFSvA5zc6gJn4fNHtEFIQnNB8WVWIcYrvx8Tbf7wWj9MvhdHYp70F054zZlHbL/Ag==",
+          "version": "7.0.23",
+          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.23.tgz",
+          "integrity": "sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==",
           "requires": {
-            "tslib": "^1.7.1"
+            "tslib": "^1.10.0"
           }
+        },
+        "prop-types": {
+          "version": "15.7.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.8.1"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         }
       }
     },
diff --git a/samples/react-chartcontrol/package.json b/samples/react-chartcontrol/package.json
index 885ed0b72..1caff56ec 100644
--- a/samples/react-chartcontrol/package.json
+++ b/samples/react-chartcontrol/package.json
@@ -1,7 +1,7 @@
 {
   "main": "lib/index.js",
   "name": "react-chartcontrol",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
@@ -12,6 +12,7 @@
     "test": "gulp test"
   },
   "dependencies": {
+    "@fluentui/react": "^7.153.4",
     "@microsoft/sp-core-library": "1.11.0",
     "@microsoft/sp-lodash-subset": "1.11.0",
     "@microsoft/sp-office-ui-fabric-core": "1.11.0",
@@ -26,7 +27,6 @@
     "chartjs-plugin-streaming": "^1.7.1",
     "color": "^3.1.0",
     "moment": "^2.23.0",
-    "office-ui-fabric-react": "6.214.0",
     "patternomaly": "^1.3.2",
     "react": "16.8.5",
     "react-dom": "16.8.5"
diff --git a/samples/react-chartcontrol/src/webparts/accessibleTable/components/AccessibleTable.tsx b/samples/react-chartcontrol/src/webparts/accessibleTable/components/AccessibleTable.tsx
index 927da4acc..83698c223 100644
--- a/samples/react-chartcontrol/src/webparts/accessibleTable/components/AccessibleTable.tsx
+++ b/samples/react-chartcontrol/src/webparts/accessibleTable/components/AccessibleTable.tsx
@@ -3,8 +3,8 @@ import styles from './AccessibleTable.module.scss';
 import { IAccessibleTableProps } from './IAccessibleTable.types';
 import * as strings from 'AccessibleTableWebPartStrings';
 import { escape } from '@microsoft/sp-lodash-subset';
-import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import { MessageBar } from '@fluentui/react/lib/MessageBar';
+import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 
 import { ChartControl, ChartType, OFFICE_COLORFUL1, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
 
diff --git a/samples/react-chartcontrol/src/webparts/areaChartDemo/components/AreaChartDemo.tsx b/samples/react-chartcontrol/src/webparts/areaChartDemo/components/AreaChartDemo.tsx
index 5c03cc107..10d5c7353 100644
--- a/samples/react-chartcontrol/src/webparts/areaChartDemo/components/AreaChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/areaChartDemo/components/AreaChartDemo.tsx
@@ -14,7 +14,7 @@ import {
   CommandBar,
   IContextualMenuItem,
   DirectionalHint
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 
 /**
 In chart.js, there are really no "area" chart types; They're just line charts with a 'fill'
diff --git a/samples/react-chartcontrol/src/webparts/barChartDemo/components/BarChartDemo.tsx b/samples/react-chartcontrol/src/webparts/barChartDemo/components/BarChartDemo.tsx
index caec90abe..26ec9d662 100644
--- a/samples/react-chartcontrol/src/webparts/barChartDemo/components/BarChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/barChartDemo/components/BarChartDemo.tsx
@@ -4,7 +4,7 @@ import * as strings from 'BarChartDemoWebPartStrings';
 import { IBarChartDemoProps, IBarChartDemoState } from './IBarChartDemo.types';
 import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 
 import { ChartControl, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
 
diff --git a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/BubbleChartDemo.tsx b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/BubbleChartDemo.tsx
index 5841a4673..84f9bc3cc 100644
--- a/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/BubbleChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/bubbleChartDemo/components/BubbleChartDemo.tsx
@@ -14,7 +14,7 @@ import MockChartDataProvider from '../../../services/ChartDataProvider/MockChart
 // used to render the toolbar above the chart
 import {
   CommandBar
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 
 /**
  * Define the chart colors:
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
index b62c47bd0..8bb117d2b 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/ChartinatorWebPart.ts
@@ -11,7 +11,7 @@ import { IPropertyPaneConfiguration, PropertyPaneChoiceGroup, PropertyPaneLabel,
 // Needed to create drop down choices
 import {
   IDropdownOption
-} from 'office-ui-fabric-react/lib/components/Dropdown';
+} from '@fluentui/react/lib/Dropdown';
 
 // Needed for charts
 import { ChartPalette, PaletteGenerator, ChartType } from '@pnp/spfx-controls-react/lib/ChartControl';
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx
index 7e79bb22c..ee352625a 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/NumberTextField/NumberTextField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { TextField } from '@fluentui/react/lib/TextField';
 import * as strings from 'ChartinatorWebPartStrings';
 import { INumberTextFieldProps, INumberTextFieldState } from './NumberTextField.types';
 
@@ -24,7 +24,7 @@ export class NumberTextField extends React.Component<INumberTextFieldProps, INum
         label={this.props.label}
         value={this.state.value}
         placeholder={this.props.placeholder}
-        onChanged={(newValue: string) => this._handleChange(newValue)}
+        onChange={(_event: React.FormEvent<HTMLInputElement|HTMLTextAreaElement>, newValue: string) => this._handleChange(newValue)}
         onGetErrorMessage={(value: string) => this._validateNumber(value)}
       />
     );
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingDataHost.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingDataHost.tsx
index a1dcc2297..acb6c5267 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingDataHost.tsx
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyFieldRepeatingData/PropertyFieldRepeatingDataHost.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { IPropertyFieldRepeatingDataHostProps, IPropertyFieldRepeatingDataState } from './PropertyFieldRepeatingData.types';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { IconButton } from '@fluentui/react/lib/Button';
+import { ActionButton } from '@fluentui/react/lib/Button';
 import styles from './PropertyFieldRepeatingData.module.scss';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { TextField } from '@fluentui/react/lib/TextField';
 import { NumberTextField } from '../NumberTextField/NumberTextField';
 import * as strings from 'ChartinatorWebPartStrings';
 import { Guid } from '@microsoft/sp-core-library';
@@ -64,7 +64,7 @@ export default class IPropertyFieldRepeatingDataHost extends React.Component<IPr
           label={strings.DataLabelFieldLabel}
           placeholder={strings.DataLabelFieldPlaceholder}
           value={dataRow.name}
-          onChanged={(newValue: string) => this._handleRowChange(dataRow.id, 'name', newValue)}
+          onChange={((event: React.FormEvent<HTMLInputElement|HTMLTextAreaElement>, newValue: string) => this._handleRowChange(dataRow.id, 'name', newValue))}
         />
         <NumberTextField
           label={strings.DataValueFieldLabel}
@@ -94,7 +94,7 @@ export default class IPropertyFieldRepeatingDataHost extends React.Component<IPr
           label={strings.DataLabelFieldLabel}
           placeholder={strings.DataLabelFieldPlaceholder}
           value={dataRow.name}
-          onChanged={(newValue: string) => this._handleRowChange(dataRow.key, 'name', newValue)}
+          onChange={((_event: React.FormEvent<HTMLInputElement|HTMLTextAreaElement>, newValue: string) => this._handleRowChange(dataRow.key, 'name', newValue))}
         />
         <NumberTextField
           label={strings.DataValueXFieldLabel}
@@ -135,7 +135,7 @@ export default class IPropertyFieldRepeatingDataHost extends React.Component<IPr
           label={strings.DataLabelFieldLabel}
           placeholder={strings.DataLabelFieldPlaceholder}
           value={dataRow.name}
-          onChanged={(newValue: string) => this._handleRowChange(dataRow.id, 'name', newValue)}
+          onChange={((_event: React.FormEvent<HTMLInputElement|HTMLTextAreaElement>, newValue: string) => this._handleRowChange(dataRow.id, 'name', newValue))}
         />
         <NumberTextField
           label={strings.DataValueXFieldLabel}
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/IPropertyPaneChartPaletteSelectorProps.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/IPropertyPaneChartPaletteSelectorProps.ts
index abcd9c408..a93248539 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/IPropertyPaneChartPaletteSelectorProps.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/IPropertyPaneChartPaletteSelectorProps.ts
@@ -1,4 +1,4 @@
-import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 export interface IPropertyPaneChartPaletteSelectorProps {
   disabled: boolean;
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/PropertyPaneChartPaletteSelector.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/PropertyPaneChartPaletteSelector.ts
index 10ec8e9de..5ca9d2acd 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/PropertyPaneChartPaletteSelector.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/PropertyPaneChartPaletteSelector.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-property-pane";
 
-import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 import { IChartPaletteSelectorProps } from './components/ChartPaletteSelector.types';
 import ChartPaletteSelector from './components/ChartPaletteSelector';
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx
index e309d1e0a..dab0e05d1 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import {
   Dropdown,
   IDropdownOption
-} from 'office-ui-fabric-react/lib/components/Dropdown';
-import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
+} from '@fluentui/react/lib/Dropdown';
+import { TooltipHost, DirectionalHint } from '@fluentui/react/lib/Tooltip';
 
 import styles from './ChartPaletteSelector.module.scss';
 import { IChartPaletteSelectorProps, IChartPaletteSelectorState } from './ChartPaletteSelector.types';
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.types.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.types.ts
index 79745f7e0..7588ac0b3 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.types.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneChartPaletteSelector/components/ChartPaletteSelector.types.ts
@@ -1,4 +1,4 @@
-import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 /**
  * Properties for the chart palette select
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorProps.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorProps.ts
index 6fc419ff2..a67445d7b 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorProps.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/IPropertyPaneDashSelectorProps.ts
@@ -1,4 +1,4 @@
-import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 export interface IPropertyPaneDashSelectorProps {
   disabled: boolean;
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts
index bf06880a8..bf337d78c 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/PropertyPaneDashSelector.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { IPropertyPaneField, PropertyPaneFieldType } from "@microsoft/sp-property-pane";
 
-import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 import { IDashSelectorProps } from './components/DashSelector.types';
 import DashSelector from './components/DashSelector';
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx
index eeae18bef..3207c5385 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 import {
   Dropdown,
   IDropdownOption
-} from 'office-ui-fabric-react/lib/components/Dropdown';
-import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
+} from '@fluentui/react/lib/Dropdown';
+import { TooltipHost, DirectionalHint } from '@fluentui/react/lib/Tooltip';
 
 import styles from './DashSelector.module.scss';
-import { IDashSelectorProps, IDashSelectorState, DashType, DashStrokes } from './DashSelector.types';
+import { IDashSelectorProps, IDashSelectorState } from './DashSelector.types';
 
 /**
  * Displays a list of dash options.
diff --git a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.types.ts b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.types.ts
index 3ea6ec09e..3163478ef 100644
--- a/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.types.ts
+++ b/samples/react-chartcontrol/src/webparts/chartinator/controls/PropertyPaneDashSelector/components/DashSelector.types.ts
@@ -1,4 +1,4 @@
-import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 
 /**
  * Properties for the dash selector
diff --git a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx
index 640f66438..68bb273a0 100644
--- a/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/donutPatternsDemo/components/DonutPatternsDemo.tsx
@@ -4,7 +4,7 @@ import { IDonutPatternsDemoProps, IDonutPatternsDemoState } from './IDonutPatter
 import * as strings from 'DonutPatternsDemoWebPartStrings';
 import IChartDataProvider from '../../../services/ChartDataProvider/IChartDataProvider';
 import MockChartDataProvider from '../../../services/ChartDataProvider/MockChartDataProvider';
-import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { Checkbox } from '@fluentui/react/lib/Checkbox';
 
 // Patternomaly is used to render patterns
 import * as pattern from 'patternomaly';
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx
index c33ded385..96a2e3186 100644
--- a/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataCallable/components/DynamicDataCallable.tsx
@@ -3,8 +3,8 @@ import styles from './DynamicDataCallable.module.scss';
 import { IDynamicDataCallableProps } from './IDynamicDataCallableProps';
 import * as strings from 'DynamicDataCallableWebPartStrings';
 import { Placeholder } from '@pnp/spfx-controls-react/lib/Placeholder';
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
+import { MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar';
 
 // used to add a chart control
 import { ChartControl, ChartType, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
diff --git a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
index df28ca77c..72707e7b2 100644
--- a/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
+++ b/samples/react-chartcontrol/src/webparts/dynamicDataConsumer/DynamicDataConsumerWebPart.ts
@@ -29,7 +29,7 @@ import { PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
 
 // Used to render placeholders and error messages
 import { Placeholder, IPlaceholderProps } from '@pnp/spfx-controls-react/lib/Placeholder';
-import { MessageBar, MessageBarType, IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
+import { MessageBar, MessageBarType, IMessageBarProps } from '@fluentui/react/lib/MessageBar';
 
 //Orange color
 const CHARTCOLOR: string = "#ffa500";
diff --git a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx
index 3df250864..01a64b484 100644
--- a/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/horizontalBarDemo/components/HorizontalBarDemo.tsx
@@ -8,7 +8,7 @@ import * as Color from 'color';
 
 import {
   CommandBar
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 
 import { ChartControl, ChartType,OFFICE_COLORFUL1, PaletteGenerator } from '@pnp/spfx-controls-react/lib/ChartControl';
 
diff --git a/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx b/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx
index c2df53bd1..852274546 100644
--- a/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/pieChartDemo/components/PieChartDemo.tsx
@@ -14,7 +14,7 @@ import MockChartDataProvider from '../../../services/ChartDataProvider/MockChart
 // used to render the toolbar above the chart
 import {
   CommandBar
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 
 /**
  * Define the chart colors:
diff --git a/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx b/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx
index 689f976f8..0db4766d0 100644
--- a/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/polarAreaDemo/components/PolarAreaDemo.tsx
@@ -14,7 +14,7 @@ import MockChartDataProvider from '../../../services/ChartDataProvider/MockChart
 // used to render the toolbar above the chart
 import {
   CommandBar
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 
 /**
  * Define the chart colors:
diff --git a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx
index de4be7df5..229e6e028 100644
--- a/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx
+++ b/samples/react-chartcontrol/src/webparts/realtimePluginDemo/components/RealtimePluginDemo.tsx
@@ -13,7 +13,7 @@ import * as realTime from 'chartjs-plugin-streaming';
 // used to render the toolbar above the chart
 import {
   CommandBar
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 
 const chartColors = {
   red: styles.red,