chore dep: use highcharts-react-official

package.json

@@ -21,8 +21,8 @@
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "enquire-js": "^0.2.1",
-    "highcharts-exporting": "^0.1.7",
-    "highcharts-more": "^0.1.7",
+    "highcharts": "^11.2.0",
+    "highcharts-react-official": "^3.2.3",
     "json-format": "^1.0.1",
     "lodash": "^4.17.21",
     "make-plural": "^7.3.0",
@@ -37,7 +37,6 @@
     "react-dom": "^18.2.0",
     "react-draft-wysiwyg": "^1.15.0",
     "react-helmet": "^6.1.0",
-    "react-highcharts": "^16.1.0",
     "react-perfect-scrollbar": "^1.5.8",
     "recharts": "^2.12.4",
     "store": "^2.0.12"

src/pages/chart/highCharts/HighMoreComponent.js

@@ -1,10 +1,11 @@
 import React from 'react'
-import ReactHighcharts from 'react-highcharts'
-import HighchartsExporting from 'highcharts-exporting'
-import HighchartsMore from 'highcharts-more'
+import Highcharts from 'highcharts'
+import HighchartsMore from 'highcharts/highcharts-more'
+import Exporting from 'highcharts/modules/exporting'
+import HighchartsReact from 'highcharts-react-official'
 
-HighchartsMore(ReactHighcharts.Highcharts)
-HighchartsExporting(ReactHighcharts.Highcharts)
+HighchartsMore(Highcharts)
+Exporting(Highcharts)
 
 const config = {
   chart: {
@@ -47,7 +48,7 @@ const config = {
 }
 
 const HighMoreComponent = () => {
-  return <ReactHighcharts config={config} />
+  return <HighchartsReact highcharts={Highcharts} options={config} />
 }
 
 export default HighMoreComponent

src/pages/chart/highCharts/HighmapsComponent.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import ReactHighmaps from 'react-highcharts/ReactHighmaps.src'
+import Highcharts from 'highcharts/highmaps'
+import HighchartsReact from 'highcharts-react-official'
 import maps from './mapdata/europe'
 
 const config = {
@@ -76,6 +77,6 @@ const config = {
 }
 
 const HighmapsComponent = () => {
-  return <ReactHighmaps config={config} />
+  return <HighchartsReact highcharts={Highcharts} constructorType={'mapChart'} options={config} />
 }
 export default HighmapsComponent

src/pages/chart/highCharts/HighstockComponent.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import ReactHighstock from 'react-highcharts/ReactHighstock.src'
+import Highcharts from 'highcharts/highstock'
+import HighchartsReact from 'highcharts-react-official'
 
 const data = [
   [1220832000000, 22.56],
@@ -93,7 +94,13 @@ const config = {
 }
 
 const HighstockComponent = () => {
-  return <ReactHighstock config={config} />
+  return (
+    <HighchartsReact
+      highcharts={Highcharts}
+      constructorType={'stockChart'}
+      options={config}
+    />
+  )
 }
 
 export default HighstockComponent