[PLAY-1546] Bump Highcharts Packages to Latest (#3708)

**What does this PR do?**

- Bump Highcharts packages to latest
- Upgrade "highcharts" a major version 10.0.0 to 11.4.8
- Upgrade "highcharts-react-official" a patch version 3.2.0 to 3.2.1

**How to test?** 
1. Go through the Data Visualization charts for any regressions

#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.

---------

Co-authored-by: Nida Ghuman <[email protected]>

playbook/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,11 +3,7 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
-  traverseUpButton?: {
-    position: { y: number };
-  };
-}
+import { PlotTreemapOptions } from "highcharts";
 
 const highchartsDarkTheme: ThemeProps = {
   lang: {
@@ -206,7 +202,7 @@ const highchartsDarkTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as CustomTreemapOptions,
+    } as PlotTreemapOptions,
   },
   credits: {
     enabled: false

playbook/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,12 +3,7 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
-  traverseUpButton?: {
-    position: { y: number };
-  };
-}
-
+import { PlotTreemapOptions } from "highcharts";
 
 const highchartsTheme: ThemeProps = {
   lang: {
@@ -206,7 +201,7 @@ const highchartsTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as CustomTreemapOptions,
+    } as PlotTreemapOptions,
   },
   credits: {
     enabled: false

playbook/package.json

@@ -37,8 +37,8 @@
     "@fortawesome/fontawesome-free": "^6.2.1",
     "@popperjs/core": "^2.11.8",
     "flatpickr": "^4.6.13",
-    "highcharts": "^10.0.0",
-    "highcharts-react-official": "^3.2.0",
+    "highcharts": "^11.4.8",
+    "highcharts-react-official": "^3.2.1",
     "intl-tel-input": "^18.0.15"
   },
   "devDependencies": {

yarn.lock

@@ -7111,15 +7111,15 @@ [email protected]:
   resolved "https://npm.powerapp.cloud/hat/-/hat-0.0.3.tgz#bb014a9e64b3788aed8005917413d4ff3d502d8a"
   integrity sha512-zpImx2GoKXy42fVDSEad2BPKuSQdLcqsCYa48K3zHSzM/ugWuYjLDr8IXxpVuL7uCLHw56eaiLxCRthhOzf5ug==
 
-highcharts-react-official@^3.2.0:
-  version "3.2.0"
-  resolved "https://npm.powerapp.cloud/highcharts-react-official/-/highcharts-react-official-3.2.0.tgz#42f8f237d73eec6791318efb41237067000cf815"
-  integrity sha512-71IJZsLmEboYFjONpwC3NRsg6JKvtKYtS5Si3e6s6MLRSOFNOY8KILTkzvO36kjpeR/A0X3/kvvewE+GMPpkjw==
+highcharts-react-official@^3.2.1:
+  version "3.2.1"
+  resolved "https://npm.powerapp.cloud/highcharts-react-official/-/highcharts-react-official-3.2.1.tgz#4b62a7af2969bdebde6b338d36f6b9bf1f1029bc"
+  integrity sha512-hyQTX7ezCxl7JqumaWiGsroGWalzh24GedQIgO3vJbkGOZ6ySRAltIYjfxhrq4HszJOySZegotEF7v+haQ75UA==
 
-highcharts@^10.0.0:
-  version "10.3.3"
-  resolved "https://npm.powerapp.cloud/highcharts/-/highcharts-10.3.3.tgz#b8acca24f2d4b1f2f726540734166e59e07b35c4"
-  integrity sha512-r7wgUPQI9tr3jFDn3XT36qsNwEIZYcfgz4mkKEA6E4nn5p86y+u1EZjazIG4TRkl5/gmGRtkBUiZW81g029RIw==
+highcharts@^11.4.8:
+  version "11.4.8"
+  resolved "https://npm.powerapp.cloud/highcharts/-/highcharts-11.4.8.tgz#252e71b81c24ec9f99e756b76dbebd7546e18dda"
+  integrity sha512-5Tke9LuzZszC4osaFisxLIcw7xgNGz4Sy3Jc9pRMV+ydm6sYqsPYdU8ELOgpzGNrbrRNDRBtveoR5xS3SzneEA==
 
 highlight-words-core@^1.2.0:
   version "1.2.2"