diff --git a/components/statistics/ChartBarBox/ChartBarBox.helper.ts b/components/statistics/ChartBarBox/ChartBarBox.helper.ts
index b79b656..4b52814 100644
--- a/components/statistics/ChartBarBox/ChartBarBox.helper.ts
+++ b/components/statistics/ChartBarBox/ChartBarBox.helper.ts
@@ -1,9 +1,3 @@
-import { DailySummaryType } from 'types';
-import type { BarStackDataType, ColorBucketMapType } from '@rango-dev/charts';
-import { ChartType } from './ChartBarBox.type';
-
-export const BAR_CHART_BLOCKCHAIN_NUMBER = 10;
-
 export const barChartColors: string[] = [
   '#469BF5',
   '#29DABA',
@@ -18,108 +12,3 @@ export const barChartColors: string[] = [
   '#8B62FF',
   '#F4C932',
 ];
-
-export const prepareBarChartData = (chartOption: {
-  dailyData: DailySummaryType[];
-  isStackBar: boolean;
-  type: ChartType;
-}) => {
-  const { dailyData, isStackBar, type } = chartOption;
-  const chartData: BarStackDataType[] = [];
-  const colorBlockchainMap: ColorBucketMapType = new Map();
-  const buckets: string[] = [];
-
-  if (!isStackBar) {
-    dailyData.forEach((dailyItem) => {
-      const dataItem: BarStackDataType = { date: dailyItem.date };
-      dataItem[type === 'transaction' ? 'Transactions' : 'Volume'] =
-        type === 'transaction'
-          ? dailyItem.count.toString()
-          : dailyItem.volume.toString();
-
-      chartData.push(dataItem);
-    });
-
-    colorBlockchainMap.set(
-      type === 'transaction' ? 'Transactions' : 'Volume',
-      type === 'transaction' ? '#469BF5' : '#8B62FF',
-    );
-
-    buckets.push(type === 'transaction' ? 'Transactions' : 'Volume');
-
-    return { chartData, colorBlockchainMap, buckets };
-  }
-
-  // map sum of value base on type(transaction or volume) for each blockchain
-  const sumBlockchainMap = new Map<string, number>();
-  dailyData.forEach((dailyItem) => {
-    const sum = sumBlockchainMap.get(dailyItem.bucket) || 0;
-    const newValue =
-      type === 'transaction' ? dailyItem.count : dailyItem.volume;
-    sumBlockchainMap.set(dailyItem.bucket, sum + newValue);
-  });
-
-  // sort blockchains with sum value base on type (transaction or volume)
-  const sortedBlockchain = Array.from(sumBlockchainMap).sort(
-    (a, b) => b[1] - a[1],
-  );
-
-  // get top blockchains for stack bars
-  const topBlockchain = sortedBlockchain
-    .map((sortedItem) => sortedItem[0])
-    .slice(0, BAR_CHART_BLOCKCHAIN_NUMBER);
-
-  // create map structure for assign color for each blockchain
-  topBlockchain.forEach((blockchainItem, index) => {
-    colorBlockchainMap.set(
-      blockchainItem,
-      barChartColors[index % barChartColors.length],
-    );
-    buckets.push(blockchainItem);
-  });
-  colorBlockchainMap.set('Others', barChartColors[barChartColors.length - 1]);
-  buckets.push('Others');
-
-  // create map structure for assign chart data for each date
-  const dateMap = new Map<string, DailySummaryType[]>();
-  dailyData.forEach((dailyItem) => {
-    if (!dateMap.has(dailyItem.date)) dateMap.set(dailyItem.date, []);
-
-    const dateItem = dateMap.get(dailyItem.date);
-    dateItem?.push(dailyItem);
-  });
-
-  // create data result for bar stack chart
-  dateMap.forEach((dateDailyList, keyDate) => {
-    const dataItem: BarStackDataType = { date: keyDate };
-    dateDailyList
-      .filter((dailyItem) => topBlockchain.includes(dailyItem.bucket))
-      .forEach((topDailyItem) => {
-        const bucketValue =
-          type === 'transaction' ? topDailyItem.count : topDailyItem.volume;
-        dataItem[topDailyItem.bucket] = bucketValue
-          ? bucketValue.toString()
-          : '0';
-      });
-
-    topBlockchain.forEach((topItem) => {
-      if (!(topItem in dataItem)) dataItem[topItem] = '0';
-    });
-
-    const otherBlockchains = dateDailyList.filter(
-      (dailyItem) => !topBlockchain.includes(dailyItem.bucket),
-    );
-
-    const othersValue = otherBlockchains
-      .map((dailyItem) =>
-        type === 'transaction' ? dailyItem.count : dailyItem.volume,
-      )
-      .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
-
-    dataItem['Others'] = othersValue.toString();
-
-    chartData.push(dataItem);
-  });
-
-  return { chartData, colorBlockchainMap, buckets };
-};
diff --git a/components/statistics/ChartBarBox/ChartBarBox.type.ts b/components/statistics/ChartBarBox/ChartBarBox.type.ts
index 877b7cf..be31d69 100644
--- a/components/statistics/ChartBarBox/ChartBarBox.type.ts
+++ b/components/statistics/ChartBarBox/ChartBarBox.type.ts
@@ -1,6 +1,6 @@
 import { DailySummaryType, StatisticDaysFilter } from 'types';
 import { BlockchainMeta } from 'types/meta';
-export type ChartType = 'transaction' | 'volume';
+export type ChartType = 'Transaction' | 'Volume';
 
 export interface PropsType {
   days: StatisticDaysFilter;
diff --git a/components/statistics/ChartBarBox/index.tsx b/components/statistics/ChartBarBox/index.tsx
index 76922e4..e5de9f0 100644
--- a/components/statistics/ChartBarBox/index.tsx
+++ b/components/statistics/ChartBarBox/index.tsx
@@ -11,7 +11,6 @@ import {
 import { getDailySummary } from 'services';
 import { Select } from 'components/common/Select';
 import { OptionType } from 'components/common/Select/Select.types';
-import { prepareBarChartData } from './ChartBarBox.helper';
 import { ActiveFilterIcon, FilterIcon, LoadingIcon } from 'components/icons';
 import ModalFilter from './ModalFilter';
 import ParentSize from '@visx/responsive/lib/components/ParentSize';
@@ -19,7 +18,8 @@ import {
   DEFAULT_STATISTIC_BREAK_DOWN_FILTER,
   DEFAULT_STATISTIC_DAYS,
 } from 'constant';
-import { BarChart } from '@rango-dev/charts';
+import { BarChart, prepareBarChartData } from '@rango-dev/charts';
+import { barChartColors } from './ChartBarBox.helper';
 
 function ChartBarBox(props: PropsType) {
   const {
@@ -31,7 +31,7 @@ function ChartBarBox(props: PropsType) {
     description,
     className = '',
   } = props;
-
+  const isTransactionType = type === 'Transaction';
   const [filter, setFilter] = useState<FilterBarChart>({
     source: '',
     destination: '',
@@ -50,7 +50,7 @@ function ChartBarBox(props: PropsType) {
     dailyData &&
     dailyData
       .map((dailyItem) =>
-        type === 'transaction' ? dailyItem.count : dailyItem.volume,
+        isTransactionType ? dailyItem.count : dailyItem.volume,
       )
       .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
 
@@ -104,12 +104,17 @@ function ChartBarBox(props: PropsType) {
     (!!source && breakDownBy === BreakDownList['Source chain']) ||
     (!!destination && breakDownBy === BreakDownList['Destination chain'])
   );
+  const barChartColor = isTransactionType ? ['#469BF5'] : ['#8B62FF'];
 
-  const { chartData, colorBlockchainMap, buckets } = useMemo(() => {
+  const { chartData, colorBucketMap, buckets } = useMemo(() => {
     const result = prepareBarChartData({
-      dailyData,
-      isStackBar,
-      type,
+      dailyData: dailyData.map((item) => ({
+        date: item.date,
+        bucket: item.bucket,
+        value: isTransactionType ? item.count : item.volume,
+      })),
+      label: type,
+      barChartColors: isStackBar ? barChartColors : barChartColor,
     });
     setLoading(false);
     return result;
@@ -123,7 +128,7 @@ function ChartBarBox(props: PropsType) {
           <div className="flex w-full md:w-auto md:h-[48px] items-center justify-between md:start text-18 md:text-32 font-medium md:font-semibold text-primary-500">
             <div className="flex items-center">
               <span>
-                {type === 'volume' && '$'}
+                {!isTransactionType && '$'}
                 {numberWithCommas(Math.ceil(totalValue))}
               </span>
               {loading && (
@@ -222,9 +227,9 @@ function ChartBarBox(props: PropsType) {
                       height={height}
                       data={chartData}
                       buckets={buckets}
-                      colorBucketMap={colorBlockchainMap}
+                      colorBucketMap={colorBucketMap}
                       getLabel={(value) =>
-                        type === 'volume' ? `$${value}` : value
+                        !isTransactionType ? `$${value}` : value
                       }
                     />
                   )}
@@ -234,7 +239,7 @@ function ChartBarBox(props: PropsType) {
             <div className="w-full rounded-normal px-20 md:w-[250px] grid grid-cols-3 md:block h-[140px] md:h-[475px] md:bg-surfacesBackground">
               {!loading &&
                 chartData?.length &&
-                Array.from(colorBlockchainMap).map((mapItem, index) => {
+                Array.from(colorBucketMap).map((mapItem, index) => {
                   const [blockchainItem, blockchainColor] = mapItem;
                   return (
                     <React.Fragment key={blockchainItem}>
@@ -247,7 +252,7 @@ function ChartBarBox(props: PropsType) {
                         </span>
                       </div>
 
-                      {index !== colorBlockchainMap.size - 1 && (
+                      {index !== colorBucketMap.size - 1 && (
                         <div className="h-[1px] hidden md:block w-full bg-neutral-300"></div>
                       )}
                     </React.Fragment>
@@ -267,9 +272,9 @@ function ChartBarBox(props: PropsType) {
                     height={height}
                     data={chartData}
                     buckets={buckets}
-                    colorBucketMap={colorBlockchainMap}
+                    colorBucketMap={colorBucketMap}
                     getLabel={(value) =>
-                      type === 'volume' ? `$ ${value}` : value
+                      !isTransactionType ? `$ ${value}` : value
                     }
                   />
                 )}
diff --git a/package.json b/package.json
index 5a3c49f..f3d082c 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@artsy/fresnel": "^7.1.3",
     "@lingui/react": "^4.11.4",
-    "@rango-dev/charts": "^0.1.1-next.0",
+    "@rango-dev/charts": "^0.2.1-next.5",
     "@react-spring/web": "^9.5.5",
     "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
     "@svgr/cli": "^8.1.0",
diff --git a/pages/statistics.tsx b/pages/statistics.tsx
index 5a62590..b69dba2 100644
--- a/pages/statistics.tsx
+++ b/pages/statistics.tsx
@@ -116,14 +116,14 @@ function Statistics(props: PropsType) {
           <ChartBarBox
             days={currentDays}
             blockchains={blockchains}
-            type="transaction"
+            type="Transaction"
             dailySummary={dailySummary}
             title="Transaction"
             description="Number of transactions by day"
             className="mb-10 md:mb-15"
           />
           <ChartBarBox
-            type="volume"
+            type="Volume"
             blockchains={blockchains}
             days={currentDays}
             dailySummary={dailySummary}
diff --git a/styles/globals.css b/styles/globals.css
index 7e189ba..c328469 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -247,3 +247,10 @@ span.ripple {
     background-size: 100% 100%;
   }
 }
+
+.visx-tooltip{
+  box-shadow: rgba(130, 130, 130, 0.2) 0px 5px 20px 0px !important;
+}
+.visx-tooltip div{
+  box-shadow: none !important;
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index aec014b..c9388d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -766,12 +766,12 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"
   integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
 
-"@rango-dev/charts@^0.1.1-next.0":
-  version "0.1.1-next.0"
-  resolved "https://registry.yarnpkg.com/@rango-dev/charts/-/charts-0.1.1-next.0.tgz#c1b12ef33a290afa618bff7f43b2aeba14a7906b"
-  integrity sha512-EGlD9hmejNnCxKkUW43bAsp3uTcM4M6qPoz5GCfaP6PWT6WhoF1WT838AP2AO3yYg77tRpoFx1Xs5M6TjFEdVQ==
+"@rango-dev/charts@^0.2.1-next.5":
+  version "0.2.1-next.5"
+  resolved "https://registry.yarnpkg.com/@rango-dev/charts/-/charts-0.2.1-next.5.tgz#d687fed88c13ae0b0b6268f56f866c39a61a923b"
+  integrity sha512-UNTo3rl01cFmowfIa3FuQ6Si2/pVbpDaTqrxs/nvSpcwDN8kltmQtIqCSSd4m7DDs38xuQZXeTztDSn3V/i6gw==
   dependencies:
-    "@rango-dev/ui" "^0.37.1-next.2"
+    "@rango-dev/ui" "^0.40.1-next.4"
     "@visx/axis" "2.18.0"
     "@visx/event" "2.17.0"
     "@visx/grid" "2.18.0"
@@ -780,10 +780,10 @@
     "@visx/tooltip" "2.17.0"
     dayjs "^1.11.6"
 
-"@rango-dev/ui@^0.37.1-next.2":
-  version "0.37.1-next.4"
-  resolved "https://registry.yarnpkg.com/@rango-dev/ui/-/ui-0.37.1-next.4.tgz#9b706c5bcd90d506bf627952a61b5fbaf0e0b0a6"
-  integrity sha512-7RL2kI2KbEAJZ2QjJsw39QYuD4RUw+peMXy5wa4Tfxso0bWiWlKi+4J8qX44OypyWU6jKLceSQjG+Dh6CiKaMQ==
+"@rango-dev/ui@^0.40.1-next.4":
+  version "0.40.1-next.4"
+  resolved "https://registry.yarnpkg.com/@rango-dev/ui/-/ui-0.40.1-next.4.tgz#df4d4dc9e0c451cc5b33c8d0e81f377f37e83cb7"
+  integrity sha512-8VQlcm/1PNhEcYdgVdr6SqljYVeh3Fob/TTJNSMPf6lLXPovwKJHElypyRJXMITy2Xna6ACDaDTttY2WRz6WqA==
   dependencies:
     "@radix-ui/react-checkbox" "^1.0.1"
     "@radix-ui/react-collapsible" "^1.0.3"
@@ -792,27 +792,30 @@
     "@radix-ui/react-select" "^2.0.0"
     "@radix-ui/react-switch" "^1.0.1"
     "@radix-ui/react-tooltip" "^1.0.2"
-    "@rango-dev/wallets-shared" "^0.36.1-next.1"
+    "@rango-dev/wallets-shared" "^0.38.1-next.0"
     "@stitches/react" "^1.2.8"
     copy-to-clipboard "^3.3.3"
-    rango-types "^0.1.69"
+    rango-types "^0.1.74"
     react-virtuoso "^4.6.2"
 
-"@rango-dev/wallets-core@^0.37.1-next.1":
-  version "0.37.1-next.1"
-  resolved "https://registry.yarnpkg.com/@rango-dev/wallets-core/-/wallets-core-0.37.1-next.1.tgz#8b7015330c1430d661bb316970fb2cd84c63bb49"
-  integrity sha512-AOYvUO7kModmX59ITOWW/CeIvyeVLKQSEdfwYtkxz/DMLiCkJCap6pOCT5tKANUcB1eN1ng+eusej3e3RzJblQ==
+"@rango-dev/wallets-core@^0.39.1-next.0":
+  version "0.39.1-next.0"
+  resolved "https://registry.yarnpkg.com/@rango-dev/wallets-core/-/wallets-core-0.39.1-next.0.tgz#dfab2d0670aa8e8051c277fb98b9364fce89574d"
+  integrity sha512-ajOe3p91KSlMtYFBfvtOitqa8eJcM2VOkWyZ969A4Hb5wqOMIK2XY3oglY4BwJJhNhEu/lXUIVSHRCRti8PT9Q==
   dependencies:
-    rango-types "^0.1.69"
+    caip "^1.1.1"
+    immer "^10.0.4"
+    rango-types "^0.1.74"
+    zustand "^4.5.2"
 
-"@rango-dev/wallets-shared@^0.36.1-next.1":
-  version "0.36.1-next.2"
-  resolved "https://registry.yarnpkg.com/@rango-dev/wallets-shared/-/wallets-shared-0.36.1-next.2.tgz#accb5bb7c4ea59232693edb2fa537b47bfbc2828"
-  integrity sha512-q4+0UKiETQe3e0ZAdqtAIbGRwG5QoGtmsyvobnG75hzmmQ0JxvgZKZfXdnklxE2PxoRY7kOcIMidBSY/Va1ZmA==
+"@rango-dev/wallets-shared@^0.38.1-next.0":
+  version "0.38.1-next.0"
+  resolved "https://registry.yarnpkg.com/@rango-dev/wallets-shared/-/wallets-shared-0.38.1-next.0.tgz#69416aa220a57b1d87e42d31b8503f9ca20ea259"
+  integrity sha512-1gn7786bUO3LXEYNJVkeqMA6qnvrwh/MLn7OddkYdosEqZcAsntxHR9YGCcVEPQyBJj3C5VO3wvhq+sK4M+a+g==
   dependencies:
-    "@rango-dev/wallets-core" "^0.37.1-next.1"
+    "@rango-dev/wallets-core" "^0.39.1-next.0"
     ethers "^6.13.2"
-    rango-types "^0.1.69"
+    rango-types "^0.1.74"
 
 "@react-spring/animated@~9.7.4":
   version "9.7.4"
@@ -1778,6 +1781,11 @@ busboy@1.6.0:
   dependencies:
     streamsearch "^1.1.0"
 
+caip@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/caip/-/caip-1.1.1.tgz#c2c2b598b5e052d72c35c8d81b31f864e19c61e3"
+  integrity sha512-a3v5lteUUOoyRI0U6qe5ayCCGkF2mCmJ5zQMDnOD2vRjgRg6sm9p8TsRC2h4D4beyqRN9RYniphAPnj/+jQC6g==
+
 call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
@@ -3174,6 +3182,11 @@ ignore@^5.1.1, ignore@^5.2.0, ignore@^5.2.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
+immer@^10.0.4:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.1.1.tgz#206f344ea372d8ea176891545ee53ccc062db7bc"
+  integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==
+
 immutable@^4.0.0:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
@@ -4182,10 +4195,10 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-rango-types@^0.1.69:
-  version "0.1.73"
-  resolved "https://registry.yarnpkg.com/rango-types/-/rango-types-0.1.73.tgz#2b0a96d64ae4caedd44771eb078f5b1bf03471cd"
-  integrity sha512-h4Ent3q+3X8cuSrYjuhOtFi0xsh64JE6NYE/IpTlopOsHCwG7sxAPiG6jQ7BGUoprFLHYYjSDvQBDgwAgBlF5Q==
+rango-types@^0.1.74:
+  version "0.1.75"
+  resolved "https://registry.yarnpkg.com/rango-types/-/rango-types-0.1.75.tgz#24d2a3a30e113a7bf1088853e89b39b5722e9c04"
+  integrity sha512-Xb/lfV+fXEQdk6APY77C0oKl++mqdDdwlRyfVi10tV5tfw0Yvl5+p8Av16oPqBcM20WJGjBFCUpHEAKsEprXNQ==
 
 react-dom@^18.2.0:
   version "18.3.1"
@@ -4943,6 +4956,11 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+use-sync-external-store@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
+  integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -5069,3 +5087,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^4.5.2:
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.5.tgz#f8c713041543715ec81a2adda0610e1dc82d4ad1"
+  integrity sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==
+  dependencies:
+    use-sync-external-store "1.2.2"