From 71ab524a363eb64fe52478e4b2735ad39b07729e Mon Sep 17 00:00:00 2001
From: Dmitriy Bardin <d.bardin@arenadata.io>
Date: Wed, 18 Feb 2026 15:59:40 +0300
Subject: [PATCH 01/10] ADH-7678 - [Front] Improve the display of a large
 number of elements (Ozone Recon)

---
 .../src/views/diskUsage/diskUsage.tsx         | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
index 43cc7f69e3cb..91edbbb0e996 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
@@ -18,22 +18,9 @@
 
 import React from 'react';
 import moment from 'moment';
-import {
-  Row,
-  Button,
-  Input,
-  Menu,
-  Dropdown,
-  Tooltip
-} from 'antd';
+import { Button, Dropdown, Input, Menu, Row, Tooltip } from 'antd';
 import { MenuProps } from 'antd/es/menu';
-import {
-  CloseOutlined,
-  InfoCircleOutlined,
-  LeftOutlined,
-  LoadingOutlined,
-  RedoOutlined
-} from '@ant-design/icons';
+import { InfoCircleOutlined, LeftOutlined, LoadingOutlined, RedoOutlined } from '@ant-design/icons';
 
 import { DetailPanel } from '@/components/rightDrawer/rightDrawer';
 import { EChart } from '@/components/eChart/eChart';
@@ -42,7 +29,6 @@ import { AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper';
 
 import './diskUsage.less';
 
-
 const DEFAULT_DISPLAY_LIMIT = 10;
 const OTHER_PATH_NAME = 'Other Objects';
 const MAX_DISPLAY_LIMIT = 30;
@@ -605,6 +591,14 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
               shadowOffsetX: 0,
               shadowColor: 'rgba(0, 0, 0, 0.5)'
             }
+          },
+          label: {
+            show: true,
+            overflow: 'truncate',
+            width: 120
+          },
+          labelLayout: {
+            hideOverlap: true
           }
         }
       ]

From 15c9d1f94ce04ffd43ed992e07ba82f16bc31afa Mon Sep 17 00:00:00 2001
From: Dmitriy Bardin <d.bardin@arenadata.io>
Date: Tue, 24 Feb 2026 17:14:37 +0300
Subject: [PATCH 02/10] ADH-7678 - [Front] Improvements for old ui

---
 .../ozone-recon-web/src/utils/common.tsx      |  5 ++-
 .../src/v2/components/plots/duPieChart.tsx    | 36 +++++++++++++++----
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx
index 632db8d94073..2a9d471f6cc2 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx
@@ -118,4 +118,7 @@ export const checkResponseError = (responses: Awaited<Promise<any>>[]) => {
       }
     })
   }
-}
\ No newline at end of file
+}
+
+export const escapeHtml = (s: string) =>
+    s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
index 57fb1cce2144..9fe6926a6f01 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
@@ -19,7 +19,7 @@
 import React from 'react';
 
 import EChart from '@/v2/components/eChart/eChart';
-import { byteToSize } from '@/utils/common';
+import { byteToSize, escapeHtml } from '@/utils/common';
 import { DUSubpath } from '@/v2/types/diskUsage.types';
 
 //-------Types--------//
@@ -151,25 +151,39 @@ const DUPieChart: React.FC<PieChartProps> = ({
     tooltip: {
       trigger: 'item',
       formatter: ({ dataIndex, name, color }) => {
-        const nameEl = `<strong style='color: ${color}'>${name}</strong><br>`;
+        const nameEl = `<strong style='color: ${color}'>${escapeHtml(String(name))}</strong><br>`;
         const dataEl = `Total Data Size: ${pieData[dataIndex]['size']}<br>`
         const percentageEl = `Percentage: ${pieData[dataIndex]['percentage']} %`
         return `${nameEl}${dataEl}${percentageEl}`
       }
     },
     legend: {
-      top: '10%',
+      type: 'scroll',
       orient: 'vertical',
-      left: '0%',
-      width: '80%'
+      height: '99%',
+      width: 150,
+      left: 0,
+      top: 0,
+      tooltip: {
+        show: true,
+        formatter: ({ name }) => {
+          const nameEl = `<strong'>${escapeHtml(String(name))}</strong><br>`;
+          return `${nameEl}`
+        },
+      },
+      textStyle: {
+        width: 145,
+        overflow: 'truncate',
+        ellipsis: '…',
+      },
     },
     grid: {
-
     },
     series: [
       {
         type: 'pie',
         radius: '70%',
+        center: ['50%', '50%'],
         data: pieData.map((value) => {
           return {
             value: value.value,
@@ -182,6 +196,14 @@ const DUPieChart: React.FC<PieChartProps> = ({
             shadowOffsetX: 0,
             shadowColor: 'rgba(0, 0, 0, 0.5)'
           }
+        },
+        label: {
+          show: true,
+          overflow: 'truncate',
+          width: 100
+        },
+        labelLayout: {
+          hideOverlap: true
         }
       }
     ]
@@ -208,4 +230,4 @@ const DUPieChart: React.FC<PieChartProps> = ({
   );
 }
 
-export default DUPieChart;
\ No newline at end of file
+export default DUPieChart;

From b60afd47cbc418da815b6cd756ae7807771bcfc2 Mon Sep 17 00:00:00 2001
From: Dmitriy Bardin <d.bardin@arenadata.io>
Date: Tue, 24 Feb 2026 17:28:44 +0300
Subject: [PATCH 03/10] ADH-7678 - [Front] Improvements for old & new ui

---
 .../ozone-recon-web/src/components/eChart/eChart.tsx     | 2 +-
 .../ozone-recon-web/src/views/diskUsage/diskUsage.tsx    | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/eChart/eChart.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/eChart/eChart.tsx
index 046307901a13..d1355574e39f 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/eChart/eChart.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/eChart/eChart.tsx
@@ -83,5 +83,5 @@ export function EChart({
         }
     }, [loading, theme]);
 
-    return <div ref={chartRef} style={{ width: "100em", height: "50em", margin: 'auto', ...style }}/>;
+    return <div ref={chartRef} style={{ width: "100%", height: "50em", ...style }}/>;
 }
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
index 91edbbb0e996..88424d9c7f92 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
@@ -24,7 +24,7 @@ import { InfoCircleOutlined, LeftOutlined, LoadingOutlined, RedoOutlined } from
 
 import { DetailPanel } from '@/components/rightDrawer/rightDrawer';
 import { EChart } from '@/components/eChart/eChart';
-import { byteToSize, showDataFetchError } from '@/utils/common';
+import {byteToSize, escapeHtml, showDataFetchError} from '@/utils/common';
 import { AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper';
 
 import './diskUsage.less';
@@ -564,7 +564,7 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
       tooltip: {
         trigger: 'item',
         formatter: ({ dataIndex, name, color }) => {
-          const nameEl = `<strong style='color: ${color}'>${name}</strong><br>`;
+          const nameEl = `<strong style='color: ${color}'>${escapeHtml(String(name))}</strong><br>`;
           const dataEl = `Total Data Size: ${plotData[dataIndex]['size']}<br>`
           const percentageEl = `Percentage: ${plotData[dataIndex]['percentage']} %`
           return `${nameEl}${dataEl}${percentageEl}`
@@ -578,7 +578,8 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
       series: [
         {
           type: 'pie',
-          radius: '50%',
+          radius: '60%',
+          center: ['50%', '50%'],
           data: plotData.map((value) => {
             return {
               value: value.value,
@@ -664,7 +665,7 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
                 {(duResponse.size > 0) ?
                   <div style={{
                     height: 700,
-                    margin: 'auto',
+                    width: '100%',
                     marginTop: '5%'
                   }}>
                     <EChart

From 4a61f4df7feaf2acd4c25b06af4175263c683eac Mon Sep 17 00:00:00 2001
From: Dmitriy Bardin <d.bardin@arenadata.io>
Date: Tue, 24 Feb 2026 17:29:20 +0300
Subject: [PATCH 04/10] ADH-7678 - size fix

---
 .../recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
index 88424d9c7f92..8e86fd8792a7 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
@@ -578,7 +578,7 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
       series: [
         {
           type: 'pie',
-          radius: '60%',
+          radius: '55%',
           center: ['50%', '50%'],
           data: plotData.map((value) => {
             return {

From ef7017c79f05938aa60bddd7d2eca9eabf1250df Mon Sep 17 00:00:00 2001
From: Dmitriy Bardin <d.bardin@arenadata.io>
Date: Tue, 24 Feb 2026 18:49:09 +0300
Subject: [PATCH 05/10] ADH-7678 - position fix

---
 .../ozone-recon-web/src/v2/components/plots/duPieChart.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
index 9fe6926a6f01..abcdeeb617c1 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
@@ -183,7 +183,7 @@ const DUPieChart: React.FC<PieChartProps> = ({
       {
         type: 'pie',
         radius: '70%',
-        center: ['50%', '50%'],
+        center: ['58%', '45%'],
         data: pieData.map((value) => {
           return {
             value: value.value,

From 9ebd2dec72e1746dc438fb94da81b1c81b8e7f09 Mon Sep 17 00:00:00 2001
From: Dmitriy Bardin <d.bardin@arenadata.io>
Date: Wed, 25 Feb 2026 16:51:29 +0300
Subject: [PATCH 06/10] ADH-7678 - escapeHtml removed

---
 .../webapps/recon/ozone-recon-web/src/utils/common.tsx      | 3 ---
 .../ozone-recon-web/src/v2/components/plots/duPieChart.tsx  | 6 +++---
 .../recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx | 4 ++--
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx
index 2a9d471f6cc2..6ee8b6041aa5 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx
@@ -119,6 +119,3 @@ export const checkResponseError = (responses: Awaited<Promise<any>>[]) => {
     })
   }
 }
-
-export const escapeHtml = (s: string) =>
-    s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
index abcdeeb617c1..27b1aa1e6d1b 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
@@ -19,7 +19,7 @@
 import React from 'react';
 
 import EChart from '@/v2/components/eChart/eChart';
-import { byteToSize, escapeHtml } from '@/utils/common';
+import { byteToSize } from '@/utils/common';
 import { DUSubpath } from '@/v2/types/diskUsage.types';
 
 //-------Types--------//
@@ -151,7 +151,7 @@ const DUPieChart: React.FC<PieChartProps> = ({
     tooltip: {
       trigger: 'item',
       formatter: ({ dataIndex, name, color }) => {
-        const nameEl = `<strong style='color: ${color}'>${escapeHtml(String(name))}</strong><br>`;
+        const nameEl = `<strong style='color: ${color}'>${name}</strong><br>`;
         const dataEl = `Total Data Size: ${pieData[dataIndex]['size']}<br>`
         const percentageEl = `Percentage: ${pieData[dataIndex]['percentage']} %`
         return `${nameEl}${dataEl}${percentageEl}`
@@ -167,7 +167,7 @@ const DUPieChart: React.FC<PieChartProps> = ({
       tooltip: {
         show: true,
         formatter: ({ name }) => {
-          const nameEl = `<strong'>${escapeHtml(String(name))}</strong><br>`;
+          const nameEl = `<strong'>${name}</strong><br>`;
           return `${nameEl}`
         },
       },
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
index 8e86fd8792a7..6492761ee046 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
@@ -24,7 +24,7 @@ import { InfoCircleOutlined, LeftOutlined, LoadingOutlined, RedoOutlined } from
 
 import { DetailPanel } from '@/components/rightDrawer/rightDrawer';
 import { EChart } from '@/components/eChart/eChart';
-import {byteToSize, escapeHtml, showDataFetchError} from '@/utils/common';
+import {byteToSize, showDataFetchError} from '@/utils/common';
 import { AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper';
 
 import './diskUsage.less';
@@ -564,7 +564,7 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
       tooltip: {
         trigger: 'item',
         formatter: ({ dataIndex, name, color }) => {
-          const nameEl = `<strong style='color: ${color}'>${escapeHtml(String(name))}</strong><br>`;
+          const nameEl = `<strong style='color: ${color}'>${name}</strong><br>`;
           const dataEl = `Total Data Size: ${plotData[dataIndex]['size']}<br>`
           const percentageEl = `Percentage: ${plotData[dataIndex]['percentage']} %`
           return `${nameEl}${dataEl}${percentageEl}`

From 341d1876be4fdbba371708f785d5f571eb66d8ee Mon Sep 17 00:00:00 2001
From: Dmitriy Bardin <d.bardin@arenadata.io>
Date: Wed, 25 Feb 2026 17:12:41 +0300
Subject: [PATCH 07/10] ADH-7678 - format fixes

---
 .../src/v2/components/plots/duPieChart.tsx    |  1 +
 .../src/views/diskUsage/diskUsage.tsx         | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
index 27b1aa1e6d1b..a2b0b36f2313 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
@@ -178,6 +178,7 @@ const DUPieChart: React.FC<PieChartProps> = ({
       },
     },
     grid: {
+
     },
     series: [
       {
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
index 6492761ee046..c837efabfd79 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
@@ -18,17 +18,30 @@
 
 import React from 'react';
 import moment from 'moment';
-import { Button, Dropdown, Input, Menu, Row, Tooltip } from 'antd';
+import {
+  Row,
+  Button,
+  Input,
+  Menu,
+  Dropdown,
+  Tooltip
+} from 'antd';
 import { MenuProps } from 'antd/es/menu';
-import { InfoCircleOutlined, LeftOutlined, LoadingOutlined, RedoOutlined } from '@ant-design/icons';
+import {
+  InfoCircleOutlined,
+  LeftOutlined,
+  LoadingOutlined,
+  RedoOutlined
+} from '@ant-design/icons';
 
 import { DetailPanel } from '@/components/rightDrawer/rightDrawer';
 import { EChart } from '@/components/eChart/eChart';
-import {byteToSize, showDataFetchError} from '@/utils/common';
+import { byteToSize, showDataFetchError } from '@/utils/common';
 import { AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper';
 
 import './diskUsage.less';
 
+
 const DEFAULT_DISPLAY_LIMIT = 10;
 const OTHER_PATH_NAME = 'Other Objects';
 const MAX_DISPLAY_LIMIT = 30;

From 76c13d9e3027121ace917547063dfad19a282dcb Mon Sep 17 00:00:00 2001
From: Dmitriy Bardin <103933986+dbardin90@users.noreply.github.com>
Date: Wed, 25 Feb 2026 17:22:07 +0300
Subject: [PATCH 08/10] Update common.tsx


From d07fcfbd82eacddef4b0598f08479d10c51ad268 Mon Sep 17 00:00:00 2001
From: Dmitriy Bardin <103933986+dbardin90@users.noreply.github.com>
Date: Wed, 25 Feb 2026 17:22:31 +0300
Subject: [PATCH 09/10] Update duPieChart.tsx


From cbf4aa62c59238f42c95f4967f8db7481ea3ca4e Mon Sep 17 00:00:00 2001
From: Dmitriy Bardin <d.bardin@arenadata.io>
Date: Wed, 25 Feb 2026 17:50:42 +0300
Subject: [PATCH 10/10] ADH-7678 - position fix

---
 .../ozone-recon-web/src/v2/components/plots/duPieChart.tsx | 7 ++++---
 .../ozone-recon-web/src/views/diskUsage/diskUsage.tsx      | 3 ++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
index a2b0b36f2313..056187983ec6 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx
@@ -144,9 +144,10 @@ const DUPieChart: React.FC<PieChartProps> = ({
 
   const eChartsOptions = {
     title: {
-      text: `${byteToSize(subpathSize, 1)} /  ${byteToSize(size, 1)}`,
-      left: 'center',
-      top: '95%'
+      text: `${byteToSize(subpathSize, 1)} / ${byteToSize(size, 1)}`,
+      textAlign: 'center',
+      top: '95%',
+      left: '58%',
     },
     tooltip: {
       trigger: 'item',
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
index c837efabfd79..30fe175403f9 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx
@@ -572,7 +572,8 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
     const eChartsOptions = {
       title: {
         text: `Disk Usage for ${returnPath} (Total Size: ${byteToSize(duResponse.size, 1)})`,
-        left: 'center'
+        left: '50%',
+        textAlign: 'center',
       },
       tooltip: {
         trigger: 'item',