From 0e3ae010ab246f981498e608078230dbaa6ad428 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 5 Aug 2024 17:37:49 +0200
Subject: [PATCH] add tree-shakeable for echarts

---
 package-lock.json                             | 12 +++++-----
 package.json                                  |  4 ++--
 src/lib/components/BorrowedShare.svelte       | 22 +++++++++++------
 src/lib/components/ClinicalTrial.svelte       | 15 ++++++++----
 src/lib/components/DarkPool.svelte            | 18 +++++++++-----
 src/lib/components/Enterprise.svelte          |  9 ++++++-
 src/lib/components/FailToDeliver.svelte       | 24 ++++++++++++-------
 src/lib/components/GovernmentContract.svelte  | 18 +++++++++-----
 src/lib/components/ImpliedVolatility.svelte   | 18 +++++++++-----
 src/lib/components/MarketMaker.svelte         | 10 +++++++-
 src/lib/components/OptionsNetFlow.svelte      |  8 ++++++-
 src/lib/components/PriceAnalysis.svelte       | 11 ++++++++-
 src/lib/components/RetailVolume.svelte        | 19 ++++++++++-----
 src/lib/components/ReturnCard.svelte          | 15 ++++++++----
 src/lib/components/ShareHolders.svelte        | 22 ++++++++---------
 src/lib/components/ShareStatistics.svelte     | 20 +++++++++++-----
 src/lib/components/Swap.svelte                | 11 +++++++--
 .../etf/[tickerID]/dividends/+page.svelte     | 11 ++++++---
 .../etf/[tickerID]/options/+page.svelte       | 24 ++++++++++++-------
 src/routes/heatmaps/+page.svelte              | 11 +++++----
 src/routes/hedge-funds/[slug]/+page.svelte    | 10 ++++++--
 src/routes/politicians/[slug]/+page.svelte    |  8 ++++++-
 src/routes/reddit-tracker/+page.svelte        | 11 ++++++---
 .../stocks/[tickerID]/analyst/+page.svelte    |  2 +-
 .../stocks/[tickerID]/dividends/+page.svelte  | 14 ++++++++---
 .../stocks/[tickerID]/insider/+page.svelte    | 20 ++++++++++------
 .../stocks/[tickerID]/options/+page.svelte    |  9 +++++--
 .../stats/balance-sheet/+page.svelte          | 19 ++++++++++-----
 .../[tickerID]/stats/cash-flow/+page.svelte   | 13 +++++++---
 .../[tickerID]/stats/employees/+page.svelte   | 19 +++++++++------
 .../[tickerID]/stats/income/+page.svelte      | 21 ++++++++++------
 .../[tickerID]/stats/ratios/+page.svelte      |  9 ++++++-
 32 files changed, 317 insertions(+), 140 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6ab685ad..9464b9e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,7 @@
         "autoprefixer": "^10.4.19",
         "daisyui": "^4.12.3",
         "date-picker-svelte": "^2.12.0",
-        "echarts": "^5.5.0",
+        "echarts": "^5.5.1",
         "object-to-formdata": "^4.5.1",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
@@ -84,7 +84,7 @@
         "sass": "^1.75.0",
         "svelte": "^4.2.15",
         "svelte-check": "^3.6.9",
-        "svelte-echarts": "^0.1.1",
+        "svelte-echarts": "^1.0.0-rc3",
         "svelte-french-toast": "^1.2.0",
         "svelte-intersection-observer": "^1.0.0",
         "svelte-lazy": "^1.2.7",
@@ -7496,12 +7496,12 @@
       }
     },
     "node_modules/svelte-echarts": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/svelte-echarts/-/svelte-echarts-0.1.1.tgz",
-      "integrity": "sha512-kLnTPz6gmRl47Oe/Vjh6sIRBYRUUmzl8uvrdMg9wFXe1ur6L/xBo3c7e5lMBQarPRteC24+XT335P/htNyihHA==",
+      "version": "1.0.0-rc3",
+      "resolved": "https://registry.npmjs.org/svelte-echarts/-/svelte-echarts-1.0.0-rc3.tgz",
+      "integrity": "sha512-jM9EU4m7yFJaISCXhnGgtYirMD1VP2DzoI3Lhbl2jsvGzZFIAg8wsn/5n8GccZxm7wHgzcEL48EVJVlrKPU7gQ==",
       "dev": true,
       "peerDependencies": {
-        "echarts": "^5.4.3",
+        "echarts": "^5.0.0",
         "svelte": "^4.0.0"
       }
     },
diff --git a/package.json b/package.json
index 35105794..4f21ac06 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "autoprefixer": "^10.4.19",
     "daisyui": "^4.12.3",
     "date-picker-svelte": "^2.12.0",
-    "echarts": "^5.5.0",
+    "echarts": "^5.5.1",
     "object-to-formdata": "^4.5.1",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
@@ -38,7 +38,7 @@
     "sass": "^1.75.0",
     "svelte": "^4.2.15",
     "svelte-check": "^3.6.9",
-    "svelte-echarts": "^0.1.1",
+    "svelte-echarts": "^1.0.0-rc3",
     "svelte-french-toast": "^1.2.0",
     "svelte-intersection-observer": "^1.0.0",
     "svelte-lazy": "^1.2.7",
diff --git a/src/lib/components/BorrowedShare.svelte b/src/lib/components/BorrowedShare.svelte
index 9da39e8d..f1aef4e5 100644
--- a/src/lib/components/BorrowedShare.svelte
+++ b/src/lib/components/BorrowedShare.svelte
@@ -1,12 +1,20 @@
 <script lang ='ts'>
-    import { borrowedShareComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-    import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber, formatDateRange } from "$lib/utils";
+  import { borrowedShareComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
+  import InfoModal from '$lib/components/InfoModal.svelte';
+  import { Chart } from 'svelte-echarts'
+  import { abbreviateNumber, formatDateRange } from "$lib/utils";
+
+  import { init, use } from 'echarts/core'
+  import { LineChart } from 'echarts/charts'
+  import { GridComponent } from 'echarts/components'
+  import { CanvasRenderer } from 'echarts/renderers'
+  import Lazy from 'svelte-lazy';
   
-    import Lazy from 'svelte-lazy';
-    export let data;
+  export let data;
   
+  use([LineChart, GridComponent, CanvasRenderer])
+
+
     let isLoaded = false;
 
     let rawData = [];
@@ -253,7 +261,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
           
             <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] mt-5">
-                    <Chart options={optionsData} class="chart" />
+                    <Chart {init} options={optionsData} class="chart" />
                 </div>
             </Lazy>
         
diff --git a/src/lib/components/ClinicalTrial.svelte b/src/lib/components/ClinicalTrial.svelte
index ecefb8c2..b5c8989b 100644
--- a/src/lib/components/ClinicalTrial.svelte
+++ b/src/lib/components/ClinicalTrial.svelte
@@ -1,8 +1,13 @@
 <script lang ='ts'>
-    import { clinicalTrialComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-    import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber, formatString } from "$lib/utils";
+import { clinicalTrialComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
+import InfoModal from '$lib/components/InfoModal.svelte';
+import { Chart } from 'svelte-echarts'
+import { abbreviateNumber, formatString } from "$lib/utils";
+import { init, use } from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([LineChart, GridComponent, CanvasRenderer])
 
     import Lazy from 'svelte-lazy';
     export let data;
@@ -245,7 +250,7 @@ let charNumber = 20;
           
             <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] mt-5">
-                    <Chart options={optionsData} class="chart" />
+                    <Chart {init} options={optionsData} class="chart" />
                 </div>
             </Lazy>
         
diff --git a/src/lib/components/DarkPool.svelte b/src/lib/components/DarkPool.svelte
index d1a59ed2..1128366d 100644
--- a/src/lib/components/DarkPool.svelte
+++ b/src/lib/components/DarkPool.svelte
@@ -1,9 +1,15 @@
 <script lang ='ts'>
-    import { darkPoolComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-    import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber, formatDateRange } from "$lib/utils";
-    import Lazy from 'svelte-lazy';
+  import { darkPoolComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
+  import InfoModal from '$lib/components/InfoModal.svelte';
+  import { Chart } from 'svelte-echarts'
+  import { abbreviateNumber, formatDateRange } from "$lib/utils";
+  import Lazy from 'svelte-lazy';
+  import { init, use } from 'echarts/core'
+  import { LineChart } from 'echarts/charts'
+  import { GridComponent } from 'echarts/components'
+  import { CanvasRenderer } from 'echarts/renderers'
+
+  use([LineChart, GridComponent, CanvasRenderer])
 
     export let data;
 
@@ -244,7 +250,7 @@ $: {
           
             <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] mt-5">
-                    <Chart options={optionsData} class="chart" />
+                    <Chart {init} options={optionsData} class="chart" />
                 </div>
             </Lazy>
         
diff --git a/src/lib/components/Enterprise.svelte b/src/lib/components/Enterprise.svelte
index a1b1f3cd..881c97e1 100644
--- a/src/lib/components/Enterprise.svelte
+++ b/src/lib/components/Enterprise.svelte
@@ -4,8 +4,15 @@
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts';
     import Lazy from 'svelte-lazy';
+    import { init, use } from 'echarts/core'
+    import { BarChart } from 'echarts/charts'
+    import { GridComponent } from 'echarts/components'
+    import { CanvasRenderer } from 'echarts/renderers'
 
     export let data;
+
+    // now with tree-shaking
+    use([BarChart, GridComponent, CanvasRenderer])
     
     let isLoaded = false;
 
@@ -202,7 +209,7 @@ $: {
 
                 <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                     <div class="app w-full h-[300px] mt-5">
-                        <Chart options={optionsData} class="chart" />
+                        <Chart {init} options={optionsData} class="chart" />
                     </div>
                 </Lazy>
                 
diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte
index 8f36a9e4..aec0daec 100644
--- a/src/lib/components/FailToDeliver.svelte
+++ b/src/lib/components/FailToDeliver.svelte
@@ -1,12 +1,20 @@
 <script lang ='ts'>
-    import { failToDeliverComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-    import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber, formatDateRange } from "$lib/utils";
-  
-    import Lazy from 'svelte-lazy';
-    export let data;
+  import { failToDeliverComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
+  import InfoModal from '$lib/components/InfoModal.svelte';
+  import { Chart } from 'svelte-echarts'
+  import { abbreviateNumber, formatDateRange } from "$lib/utils";
+
+  import Lazy from 'svelte-lazy';
+
+  import { init, use } from 'echarts/core'
+  import { LineChart } from 'echarts/charts'
+  import { GridComponent } from 'echarts/components'
+  import { CanvasRenderer } from 'echarts/renderers'
+
+  export let data;
   
+  use([LineChart, GridComponent, CanvasRenderer])
+
     let isLoaded = false;
 
   
@@ -261,7 +269,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
           
             <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] mt-5">
-                    <Chart options={optionsData} class="chart" />
+                    <Chart {init} options={optionsData} class="chart" />
                 </div>
             </Lazy>
         
diff --git a/src/lib/components/GovernmentContract.svelte b/src/lib/components/GovernmentContract.svelte
index df768330..28896685 100644
--- a/src/lib/components/GovernmentContract.svelte
+++ b/src/lib/components/GovernmentContract.svelte
@@ -1,9 +1,15 @@
 <script lang ='ts'>
-    import { governmentContractComponent, displayCompanyName, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-    import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber, formatString } from "$lib/utils";
-  
+import { governmentContractComponent, displayCompanyName, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
+import InfoModal from '$lib/components/InfoModal.svelte';
+import { Chart } from 'svelte-echarts'
+import { abbreviateNumber } from "$lib/utils";
+
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
+
     import Lazy from 'svelte-lazy';
     export let data;
   
@@ -238,7 +244,7 @@
           
             <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] mt-5">
-                    <Chart options={optionsData} class="chart" />
+                    <Chart {init} options={optionsData} class="chart" />
                 </div>
             </Lazy>
         
diff --git a/src/lib/components/ImpliedVolatility.svelte b/src/lib/components/ImpliedVolatility.svelte
index ac8e799f..e9c27f01 100644
--- a/src/lib/components/ImpliedVolatility.svelte
+++ b/src/lib/components/ImpliedVolatility.svelte
@@ -1,9 +1,15 @@
 <script lang ='ts'>
-    import { impliedVolatilityComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-    import { Chart } from 'svelte-echarts'
-    import { formatDateRange } from "$lib/utils";
-    import Lazy from 'svelte-lazy';
+import { impliedVolatilityComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
+import InfoModal from '$lib/components/InfoModal.svelte';
+import { Chart } from 'svelte-echarts'
+import { formatDateRange } from "$lib/utils";
+import Lazy from 'svelte-lazy';
+import { init, use } from 'echarts/core'
+
+import { LineChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([LineChart, GridComponent, CanvasRenderer])
 
     export let data;
   
@@ -279,7 +285,7 @@ function changeStatement(event)
           
             <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] mt-5">
-                    <Chart options={optionsData} class="chart" />
+                    <Chart {init} options={optionsData} class="chart" />
                 </div>
             </Lazy>
         
diff --git a/src/lib/components/MarketMaker.svelte b/src/lib/components/MarketMaker.svelte
index cd090d6c..4938c26c 100644
--- a/src/lib/components/MarketMaker.svelte
+++ b/src/lib/components/MarketMaker.svelte
@@ -4,7 +4,15 @@
   import { Chart } from 'svelte-echarts'
   import { abbreviateNumber, formatString, formatDateRange } from "$lib/utils";
 
+  import { init, use } from 'echarts/core'
+  import { LineChart } from 'echarts/charts'
+  import { GridComponent } from 'echarts/components'
+  import { CanvasRenderer } from 'echarts/renderers'
   import Lazy from 'svelte-lazy';
+
+  use([LineChart, GridComponent, CanvasRenderer])
+
+
   export let data;
 
   let isLoaded = false;
@@ -249,7 +257,7 @@ else {
         
           <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
               <div class="app w-full h-[300px] mt-5">
-                  <Chart options={optionsData} class="chart" />
+                  <Chart {init} options={optionsData} class="chart" />
               </div>
           </Lazy>
       
diff --git a/src/lib/components/OptionsNetFlow.svelte b/src/lib/components/OptionsNetFlow.svelte
index d8dad1ee..f8b398c8 100644
--- a/src/lib/components/OptionsNetFlow.svelte
+++ b/src/lib/components/OptionsNetFlow.svelte
@@ -3,8 +3,14 @@
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
     import Lazy from 'svelte-lazy';
+    import { init, use } from 'echarts/core'
+    import { LineChart } from 'echarts/charts'
+    import { GridComponent } from 'echarts/components'
+    import { CanvasRenderer } from 'echarts/renderers'
 
     export let data;
+
+    use([LineChart, GridComponent, CanvasRenderer])
   
     let isLoaded = false;
    
@@ -237,7 +243,7 @@
           
             <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] mt-5">
-                    <Chart options={optionsData} class="chart" />
+                    <Chart {init} options={optionsData} class="chart" />
                 </div>
             </Lazy>
         
diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte
index 17311fc9..09b2d0e9 100644
--- a/src/lib/components/PriceAnalysis.svelte
+++ b/src/lib/components/PriceAnalysis.svelte
@@ -5,6 +5,15 @@
   import { Chart } from 'svelte-echarts'
   import Lazy from 'svelte-lazy';
 
+
+  import { init, use } from 'echarts/core'
+  import { LineChart } from 'echarts/charts'
+  import { GridComponent } from 'echarts/components'
+  import { CanvasRenderer } from 'echarts/renderers'
+
+  use([LineChart, GridComponent, CanvasRenderer])
+
+
   export let data;
 
   let isLoaded = false;
@@ -287,7 +296,7 @@ $: {
 
             <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] ">
-                    <Chart options={optionsData} class="chart" />
+                    <Chart {init} options={optionsData} class="chart" />
                 </div>
             </Lazy>
 
diff --git a/src/lib/components/RetailVolume.svelte b/src/lib/components/RetailVolume.svelte
index 11fff9c5..3c2e1b9c 100644
--- a/src/lib/components/RetailVolume.svelte
+++ b/src/lib/components/RetailVolume.svelte
@@ -1,10 +1,17 @@
 
 <script lang ='ts'>
-    import { retailVolumeComponent,displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-    import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber, formatDateRange } from "$lib/utils";
-    import Lazy from 'svelte-lazy';
+  import { retailVolumeComponent,displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
+  import InfoModal from '$lib/components/InfoModal.svelte';
+  import { Chart } from 'svelte-echarts'
+  import { abbreviateNumber, formatDateRange } from "$lib/utils";
+  import Lazy from 'svelte-lazy';
+  import { init, use } from 'echarts/core'
+  import { LineChart, BarChart } from 'echarts/charts'
+  import { GridComponent } from 'echarts/components'
+  import { CanvasRenderer } from 'echarts/renderers'
+
+  use([LineChart, BarChart, GridComponent, CanvasRenderer])
+
 
     export let data;
 
@@ -286,7 +293,7 @@ $: {
               
                 <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                     <div class="app w-full h-[300px] mt-5">
-                        <Chart options={optionsData} class="chart" />
+                        <Chart {init} options={optionsData} class="chart" />
                     </div>
                 </Lazy>
             
diff --git a/src/lib/components/ReturnCard.svelte b/src/lib/components/ReturnCard.svelte
index 2f80dfc1..68e2beb0 100644
--- a/src/lib/components/ReturnCard.svelte
+++ b/src/lib/components/ReturnCard.svelte
@@ -1,8 +1,13 @@
 <script lang='ts'>
 
-    //import { Chart } from 'svelte-echarts';
-    import { Chart } from 'svelte-echarts'
-    import Lazy from "svelte-lazy";
+import { Chart } from 'svelte-echarts'
+import Lazy from "svelte-lazy";
+import { init, use } from 'echarts/core'
+
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
 
     import {stockTicker, etfTicker, cryptoTicker, assetType} from '$lib/store';
     
@@ -292,7 +297,7 @@
 
                     <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                         <div class="app w-full h-[300px] mt-5 mb-16">
-                            <Chart options={optionsAnnualReturn} class="chart" />
+                            <Chart {init} options={optionsAnnualReturn} class="chart" />
                         </div>
                     </Lazy>
 
@@ -305,7 +310,7 @@
 
                     <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                         <div class="app w-full h-[300px] mt-5 mb-16">
-                            <Chart options={optionsMonthlyDistributionReturn} class="chart" />
+                            <Chart {init} options={optionsMonthlyDistributionReturn} class="chart" />
                         </div>
                     </Lazy>
                 {/if}
diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index 6b38ca6e..6c933ef4 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -1,13 +1,21 @@
 <script lang='ts'>
 
 import { Chart } from 'svelte-echarts'
-import { shareholderComponent, screenWidth, stockTicker, getCache, setCache, displayCompanyName} from '$lib/store';
+import { shareholderComponent, stockTicker, getCache, setCache, displayCompanyName} from '$lib/store';
 import { formatString } from '$lib/utils';
 import { goto } from '$app/navigation';
 import { abbreviateNumber } from '$lib/utils';
 import InfoModal from '$lib/components/InfoModal.svelte';
 import Lazy from 'svelte-lazy';
 
+import { init, use } from 'echarts/core'
+import { PieChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+use([PieChart, GridComponent, CanvasRenderer])
+
+
 export let data;
 let isLoaded = false;
 
@@ -148,16 +156,6 @@ $: {
 
 let charNumber = 20;
 
-$: {
-  if($screenWidth < 640)
-  {
-    charNumber = 20;
-  }
-  else {
-    charNumber =20;
-  }
-}
-    
 
 </script>
 
@@ -191,7 +189,7 @@ $: {
                     <div class="flex flex-row items-center sm:-mt-5">
                         <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                             <div class="app w-56">
-                                <Chart options={optionsPieChart} class="chart w-full" />
+                                <Chart {init} options={optionsPieChart} class="chart w-full" />
                             </div>
                         </Lazy>
                         
diff --git a/src/lib/components/ShareStatistics.svelte b/src/lib/components/ShareStatistics.svelte
index 5c7b61ab..2d2530f7 100644
--- a/src/lib/components/ShareStatistics.svelte
+++ b/src/lib/components/ShareStatistics.svelte
@@ -1,11 +1,19 @@
 
 <script lang ='ts'>
-    import { shareStatisticsComponent, displayCompanyName, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-    import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber } from "$lib/utils";
+import { shareStatisticsComponent, displayCompanyName, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
+import InfoModal from '$lib/components/InfoModal.svelte';
+import { Chart } from 'svelte-echarts'
+import { abbreviateNumber } from "$lib/utils";
+
+import Lazy from 'svelte-lazy';
+
+import { init, use } from 'echarts/core'
+
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
 
-    import Lazy from 'svelte-lazy';
 
     export let data;
     
@@ -182,7 +190,7 @@ $: {
                     
                     <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                         <div class="app w-full h-[300px] mt-6">
-                            <Chart options={optionsData} class="chart" />
+                            <Chart {init} options={optionsData} class="chart" />
                         </div>
                     </Lazy>
                     
diff --git a/src/lib/components/Swap.svelte b/src/lib/components/Swap.svelte
index e3528ff3..e05156fb 100644
--- a/src/lib/components/Swap.svelte
+++ b/src/lib/components/Swap.svelte
@@ -6,9 +6,16 @@
     import { Chart } from 'svelte-echarts'
     import { Motion, AnimateSharedLayout } from "svelte-motion";
 
+    import { init, use } from 'echarts/core'
+    import { ScatterChart } from 'echarts/charts'
+   import { GridComponent } from 'echarts/components'
+   import { CanvasRenderer } from 'echarts/renderers'
+
     import Lazy from 'svelte-lazy';
     export let data;
-  
+
+    use([ScatterChart, GridComponent, CanvasRenderer])
+
     let isLoaded = false;
 
     const tabs = [
@@ -272,7 +279,7 @@
           
             <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] mt-5">
-                    <Chart options={optionsData} class="chart" />
+                    <Chart {init} options={optionsData} class="chart" />
                 </div>
             </Lazy>
         
diff --git a/src/routes/etf/[tickerID]/dividends/+page.svelte b/src/routes/etf/[tickerID]/dividends/+page.svelte
index 694e9e9e..37acb224 100644
--- a/src/routes/etf/[tickerID]/dividends/+page.svelte
+++ b/src/routes/etf/[tickerID]/dividends/+page.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
-  import Chart from '$lib/components/Chart.svelte'
+  import { Chart } from 'svelte-echarts'
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
   
   
   export let data;
@@ -225,7 +230,7 @@
       
                         {#if stockDividends?.length !== 0}
         
-                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#09090B] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
+                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#27272A] shadow-md rounded-lg p-5 flex justify-center items-center mb-2">
                           <!--Start Column Title-->
                           <div class="flex flex-col">
                             <div class="flex flex-row items-center">
@@ -336,7 +341,7 @@
         
                             {#if mode}
                               <div class="app w-full ">
-                                <Chart options={optionsDividend} class="chart" />
+                                <Chart {init} options={optionsDividend} class="chart" />
                               </div>
         
                               <span class="text-gray-200 text-sm italic">
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index f0592f0d..1b20340f 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -1,12 +1,18 @@
 <script lang="ts">
 
-  import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
-  import { Chart } from 'svelte-echarts'
-  import { abbreviateNumber } from '$lib/utils';
-  import InfoModal from '$lib/components/InfoModal.svelte';
-  import { onMount } from 'svelte'
-  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
-  
+import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
+import { Chart } from 'svelte-echarts'
+import { abbreviateNumber } from '$lib/utils';
+import InfoModal from '$lib/components/InfoModal.svelte';
+import { onMount } from 'svelte'
+import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
+
+
   export let data;
   
   const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -305,7 +311,7 @@
                   
                       {#if optionsPlotData?.length !== 0}
   
-                      <div class="stats stats-horizontal bg-[#09090B] w-full rounded-lg">
+                      <div class="stats stats-horizontal bg-[#27272A] w-full rounded-lg">
               
                         <div class="grid grid-cols-2">
             
@@ -387,7 +393,7 @@
                           
                               
                               <div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
-                                  <Chart options={options} class="chart" />
+                                  <Chart {init} options={options} class="chart" />
                               </div>
                               
   
diff --git a/src/routes/heatmaps/+page.svelte b/src/routes/heatmaps/+page.svelte
index 43c01b80..f37a9743 100644
--- a/src/routes/heatmaps/+page.svelte
+++ b/src/routes/heatmaps/+page.svelte
@@ -1,12 +1,15 @@
 <script lang='ts'>
 
 
-import Chart from '$lib/components/Chart.svelte'
-
 import { screenWidth, numberOfUnreadNotification } from '$lib/store';
 import { goto } from '$app/navigation';
-//import * as echarts from 'echarts';
+import { Chart } from 'svelte-echarts'
 
+import { init, use } from 'echarts/core'
+import { HeatmapChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([HeatmapChart, GridComponent, CanvasRenderer])
 
 export let data;
 let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
@@ -414,7 +417,7 @@ $: {
 
 
                     <div class="app w-[100vw] h-full mt-10">
-                        <Chart id="treemap" options={options} class="chart w-full h-full" />
+                        <Chart id="treemap" {init} options={options} class="chart w-full h-full" />
                     </div>
 
 
diff --git a/src/routes/hedge-funds/[slug]/+page.svelte b/src/routes/hedge-funds/[slug]/+page.svelte
index 6056890f..bb797f75 100644
--- a/src/routes/hedge-funds/[slug]/+page.svelte
+++ b/src/routes/hedge-funds/[slug]/+page.svelte
@@ -9,7 +9,13 @@
 
   import { abbreviateNumber, formatString } from '$lib/utils';
 
-  import { Chart } from 'svelte-echarts'
+import { Chart } from 'svelte-echarts'
+import { init, use } from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([LineChart, GridComponent, CanvasRenderer])
+  
   
   import { onMount } from 'svelte';
   
@@ -535,7 +541,7 @@ function tabFunction(state) {
                     </div>
                     
                     <div class="app w-full h-[300px] ">
-                      <Chart options={optionsData} class="chart" />
+                      <Chart {init} options={optionsData} class="chart" />
                     </div>
                   
   
diff --git a/src/routes/politicians/[slug]/+page.svelte b/src/routes/politicians/[slug]/+page.svelte
index d855ce4c..dc202c38 100644
--- a/src/routes/politicians/[slug]/+page.svelte
+++ b/src/routes/politicians/[slug]/+page.svelte
@@ -8,6 +8,12 @@
   import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
   import { Chart } from 'svelte-echarts'
   
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
+  
   import { onMount } from 'svelte';
   
   export let data;
@@ -352,7 +358,7 @@
                       <span class="ml-3 text-white text-xl">Trade Amount by Year</span>
                     </div>
                     <div class="app w-full h-[300px] ">
-                      <Chart options={optionsData} class="chart" />
+                      <Chart {init} options={optionsData} class="chart" />
                     </div>
   
                     <div class="flex flex-row items-center justify-between mx-auto mt-10 sm:mt-5 w-56 sm:w-80">
diff --git a/src/routes/reddit-tracker/+page.svelte b/src/routes/reddit-tracker/+page.svelte
index 3df3c25c..11eddadb 100644
--- a/src/routes/reddit-tracker/+page.svelte
+++ b/src/routes/reddit-tracker/+page.svelte
@@ -11,6 +11,11 @@ import Link from "lucide-svelte/icons/external-link";
 import ThumbsUp from "lucide-svelte/icons/thumbs-up";
 import MessageCircle from "lucide-svelte/icons/message-circle";
 import Lazy from '$lib/components/Lazy.svelte';
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
 
   export let data;
   let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
@@ -339,7 +344,7 @@ const optionCompanySpread = {
                       <Card.Content>
                         <Lazy>
                           <div class="app w-full h-[150px]">
-                            <Chart options={optionGraphPost} class="chart" />
+                            <Chart {init} options={optionGraphPost} class="chart" />
                           </div>
                         </Lazy>
                       </Card.Content>
@@ -361,7 +366,7 @@ const optionCompanySpread = {
                       <Card.Content>
                         <Lazy>
                           <div class="app w-full h-[150px]">
-                            <Chart options={optionGraphComment} class="chart" />
+                            <Chart {init} options={optionGraphComment} class="chart" />
                           </div>
                         </Lazy>
                       </Card.Content>
@@ -384,7 +389,7 @@ const optionCompanySpread = {
                       <Card.Content>
                       <Lazy>
                         <div class="app w-full h-[150px]">
-                          <Chart options={optionGraphCompanySpread} class="chart" />
+                          <Chart {init} options={optionGraphCompanySpread} class="chart" />
                         </div>
                       </Lazy>
                       </Card.Content>
diff --git a/src/routes/stocks/[tickerID]/analyst/+page.svelte b/src/routes/stocks/[tickerID]/analyst/+page.svelte
index b6738b73..be7b58ab 100644
--- a/src/routes/stocks/[tickerID]/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/analyst/+page.svelte
@@ -131,7 +131,7 @@ changeTab(0)
             
                 {#if historyList?.length !== 0}
 
-                <div class="stats stats-horizontal bg-[#09090B] w-full rounded-lg pr-6 sm:pr-0">
+                <div class="stats stats-horizontal bg-[#272727] w-full rounded-lg pr-6 sm:pr-0">
         
                   <div class="grid grid-cols-2">
       
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 1906088a..fb550165 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
 import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
-import Chart from '$lib/components/Chart.svelte'
 import { onMount } from 'svelte';
 import Lazy from 'svelte-lazy';
 
+import { Chart } from 'svelte-echarts'
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
+
+
+
 export let data;
 
 let dateDistance;
@@ -198,7 +206,7 @@ onMount(async() => {
     
                       {#if stockDividends?.length !== 0}
       
-                          <div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#09090B] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
+                          <div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#27272A] shadow-md rounded-lg p-5 flex justify-center items-center mb-2">
                               <!--Start Column Title-->
                               <div class="flex flex-col">
                                 <div class="flex flex-row items-center">
@@ -309,7 +317,7 @@ onMount(async() => {
                           {#if mode}
                           <Lazy height={300} fadeOption={{delay: 0, duration: 0}} keep={true}>
                             <div class="app w-full ">
-                              <Chart options={optionsDividend} class="chart" />
+                              <Chart {init} options={optionsDividend} class="chart" />
                             </div>
                           </Lazy>
       
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index 35a4d321..227f0465 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
-  import { displayCompanyName, numberOfUnreadNotification, stockTicker } from '$lib/store';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
-	import { formatString, abbreviateNumber } from '$lib/utils';
-  import Chart from '$lib/components/Chart.svelte';
-  import InfoModal from '$lib/components/InfoModal.svelte';
-  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+import { displayCompanyName, numberOfUnreadNotification, stockTicker } from '$lib/store';
+import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
+import { formatString, abbreviateNumber } from '$lib/utils';
+import InfoModal from '$lib/components/InfoModal.svelte';
+import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+import { Chart } from 'svelte-echarts'
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
+
 
   import { onMount } from 'svelte';
 
@@ -349,7 +355,7 @@ onMount(async() => {
 
                     {#if Object?.keys(options)?.length !== 0}
                       <div class="app w-full h-[400px] sm:h-[500px]">
-                        <Chart options={options} class="chart" />
+                        <Chart {init} options={options} class="chart" />
                       </div>
 
                       <div class="flex flex-row items-center justify-between mx-auto mb-10 w-full sm:w-5/6">
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index ed271f70..aea7d05f 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -6,6 +6,11 @@ import { abbreviateNumber } from '$lib/utils';
 import InfoModal from '$lib/components/InfoModal.svelte';
 import { onMount } from 'svelte'
 import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
 
 export let data;
 
@@ -305,7 +310,7 @@ $: {
                 
                     {#if optionsPlotData?.length !== 0}
 
-                    <div class="stats stats-horizontal bg-[#09090B] w-full rounded-lg">
+                    <div class="stats stats-horizontal bg-[#272727] w-full rounded-lg">
             
                       <div class="grid grid-cols-2">
           
@@ -387,7 +392,7 @@ $: {
                         
                             
                             <div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
-                                <Chart options={options} class="chart" />
+                                <Chart {init} options={options} class="chart" />
                             </div>
                             
 
diff --git a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
index fe113c69..ab7ad1e3 100644
--- a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
-    import { Chart } from 'svelte-echarts'
-    import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
-    import { abbreviateNumber,sumQuarterlyResultsByYear } from '$lib/utils';
-    //import * as XLSX from 'xlsx';
+import { Chart } from 'svelte-echarts'
+import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
+import { abbreviateNumber,sumQuarterlyResultsByYear } from '$lib/utils';
+//import * as XLSX from 'xlsx';
+
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
+
 
     export let data;
     
@@ -480,7 +487,7 @@ $: {
                             </label>
         
         
-                            <label for="timeFrameModal" class="cursor-pointer bg-[#09090B] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
+                            <label for="timeFrameModal" class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
                                 <div class="flex flex-row items-center">
                                     <span class="m-auto mr-0.5 text-white text-sm">{timeFrame}</span>
                                     <svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(180 512 512)">                                        <path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/></g></svg>
@@ -558,7 +565,7 @@ $: {
                                     </div>
                         
                                     <div class="app w-full h-[300px]  m-auto">
-                                        <Chart options={optionsData} class="chart" />
+                                        <Chart {init} options={optionsData} class="chart" />
                                     </div>
     
                                     {:else}
diff --git a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
index 1896400d..7791cadb 100644
--- a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
-import Chart from '$lib/components/Chart.svelte'
 import {numberOfUnreadNotification,displayCompanyName, stockTicker} from '$lib/store';
 import { abbreviateNumber, sumQuarterlyResultsByYear } from '$lib/utils';
 //import * as XLSX from 'xlsx';
+import { Chart } from 'svelte-echarts'
+
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
+
 
 export let data;
 
@@ -442,7 +449,7 @@ $: {
                             </label>
         
         
-                            <label for="timeFrameModal" class="cursor-pointer bg-[#09090B] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
+                            <label for="timeFrameModal" class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
                                 <div class="flex flex-row items-center">
                                     <span class="m-auto mr-0.5 text-white text-sm">{timeFrame}</span>
                                     <svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(180 512 512)">                                        <path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/></g></svg>
@@ -515,7 +522,7 @@ $: {
                         </div>
             
                         <div class="app w-full h-[300px]  m-auto">
-                            <Chart options={optionsData} class="chart" />
+                            <Chart {init} options={optionsData} class="chart" />
                         </div>
 
                         {:else}
diff --git a/src/routes/stocks/[tickerID]/stats/employees/+page.svelte b/src/routes/stocks/[tickerID]/stats/employees/+page.svelte
index 31b3204d..5c5b42c9 100644
--- a/src/routes/stocks/[tickerID]/stats/employees/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/employees/+page.svelte
@@ -2,7 +2,12 @@
 
   import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
   import { Chart } from 'svelte-echarts'
-  
+  import { init, use } from 'echarts/core'
+  import { BarChart } from 'echarts/charts'
+  import { GridComponent } from 'echarts/components'
+  import { CanvasRenderer } from 'echarts/renderers'
+  use([BarChart, GridComponent, CanvasRenderer])
+
   import { abbreviateNumber } from '$lib/utils';
 
   export let data;
@@ -307,7 +312,7 @@ optionsGrowth = plotGrowth();
                               Employees
                           </h2>
   
-                          <div class="text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
+                          <div class="text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-gray-800 text-sm sm:text-[1rem]">
                             <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
                             
                             {#if employeeHistory?.length !== 0 && !dateDistance}
@@ -337,7 +342,7 @@ optionsGrowth = plotGrowth();
                       </div>
 
                       
-                      <div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#09090B] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
+                      <div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#27272A] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
                         <!--Start Column Title-->
                         <div class="flex flex-col">
                           <div class="flex flex-row items-center">
@@ -410,7 +415,7 @@ optionsGrowth = plotGrowth();
       
                           <div class="{employeeHistory?.length === 0 ? 'hidden' : ''} flex justify-end ml-auto items-center mr-2">
 
-                                  <label for="sortByModal" class="cursor-pointer bg-[#09090B] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
+                                  <label for="sortByModal" class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
                                       <div class="flex flex-row">
                                           <span class="text-sm  m-auto font-medium text-white">
                                           {sortBy}
@@ -435,15 +440,15 @@ optionsGrowth = plotGrowth();
 
                           {#if sortBy === 'Total'}
                           <div class="app w-full">
-                              <Chart options={optionsTotal} class="chart" />
+                              <Chart {init} options={optionsTotal} class="chart" />
                           </div>
                           {:else if sortBy === 'Change'}
                           <div class="app w-full">
-                              <Chart options={optionsChange} class="chart" />
+                              <Chart {init} options={optionsChange} class="chart" />
                           </div>
                           {:else if sortBy === 'Growth'}
                           <div class="app w-full">
-                              <Chart options={optionsGrowth} class="chart" />
+                              <Chart {init} options={optionsGrowth} class="chart" />
                           </div>
                           {/if}
                           
diff --git a/src/routes/stocks/[tickerID]/stats/income/+page.svelte b/src/routes/stocks/[tickerID]/stats/income/+page.svelte
index 7b266c70..daec5e14 100644
--- a/src/routes/stocks/[tickerID]/stats/income/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/income/+page.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
-    import Chart from '$lib/components/Chart.svelte'
-    import {numberOfUnreadNotification,displayCompanyName, stockTicker} from '$lib/store';
-    import { abbreviateNumber, sumQuarterlyResultsByYear } from '$lib/utils';
-    //import * as XLSX from 'xlsx';
-    
+import {numberOfUnreadNotification,displayCompanyName, stockTicker} from '$lib/store';
+import { abbreviateNumber, sumQuarterlyResultsByYear } from '$lib/utils';
+//import * as XLSX from 'xlsx';
+import { Chart } from 'svelte-echarts'
+
+import { init, use } from 'echarts/core'
+  import { BarChart } from 'echarts/charts'
+  import { GridComponent } from 'echarts/components'
+  import { CanvasRenderer } from 'echarts/renderers'
+  use([BarChart, GridComponent, CanvasRenderer])
+
+
     export let data;
     
     let optionsData;
@@ -432,7 +439,7 @@ const exportData = (format = 'csv') => {
                             </label>
         
         
-                            <label for="timeFrameModal" class="cursor-pointer bg-[#09090B] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
+                            <label for="timeFrameModal" class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
                                 <div class="flex flex-row items-center">
                                     <span class="m-auto mr-0.5 text-white text-sm">{timeFrame}</span>
                                     <svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(180 512 512)">                                        <path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/></g></svg>
@@ -502,7 +509,7 @@ const exportData = (format = 'csv') => {
                             </div>
                 
                             <div class="app w-full h-[300px] m-auto">
-                                <Chart options={optionsData} class="chart" />
+                                <Chart {init} options={optionsData} class="chart" />
                             </div>
     
                             {:else}
diff --git a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
index c44818bf..a2ee9647 100644
--- a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
@@ -3,6 +3,13 @@ import { Chart } from 'svelte-echarts'
 import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
 import { sumQuarterlyResultsByYear } from '$lib/utils';
 //import * as XLSX from 'xlsx';
+import { init, use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([BarChart, GridComponent, CanvasRenderer])
+
+
 
 
 export let data;
@@ -480,7 +487,7 @@ $: {
                                 </div>
                     
                                 <div class="app w-full h-[300px]  m-auto">
-                                    <Chart options={optionsData} class="chart" />
+                                    <Chart {init} options={optionsData} class="chart" />
                                 </div>
 
                                 {:else}