diff --git a/ui/packages/tidb-dashboard-for-dbaas/package.json b/ui/packages/tidb-dashboard-for-dbaas/package.json
index 392057b13b..6158f23901 100644
--- a/ui/packages/tidb-dashboard-for-dbaas/package.json
+++ b/ui/packages/tidb-dashboard-for-dbaas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pingcap/tidb-dashboard-for-dbaas",
-  "version": "0.0.45",
+  "version": "0.0.48",
   "main": "dist/main.js",
   "module": "dist/main.js",
   "files": [
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/components/Monitoring.tsx b/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/components/Monitoring.tsx
index 504ced9360..a1bca04366 100644
--- a/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/components/Monitoring.tsx
+++ b/ui/packages/tidb-dashboard-lib/src/apps/Monitoring/components/Monitoring.tsx
@@ -1,6 +1,13 @@
 import { Space, Typography, Row, Col, Collapse, Tooltip } from 'antd'
 import React, { useCallback, useContext, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Stack } from 'office-ui-fabric-react'
+import { LoadingOutlined, FileTextOutlined } from '@ant-design/icons'
+import { useMemoizedFn } from 'ahooks'
+import { MetricsChart, SyncChartPointer, TimeRangeValue } from 'metrics-chart'
+import { Link } from 'react-router-dom'
+import { debounce } from 'lodash'
+
 import {
   AutoRefreshButton,
   Card,
@@ -10,17 +17,11 @@ import {
   Toolbar,
   ErrorBar
 } from '@lib/components'
-import { Stack } from 'office-ui-fabric-react'
-import { useTimeRangeValue } from '@lib/components/TimeRangeSelector/hook'
-import { LoadingOutlined, FileTextOutlined } from '@ant-design/icons'
-import { MonitoringContext } from '../context'
-import { useMemoizedFn } from 'ahooks'
-
-import { Link } from 'react-router-dom'
-import { debounce } from 'lodash'
 import { store } from '@lib/utils/store'
+import { tz } from '@lib/utils'
+import { useTimeRangeValue } from '@lib/components/TimeRangeSelector/hook'
 import { telemetry } from '../utils/telemetry'
-import { MetricsChart, SyncChartPointer, TimeRangeValue } from 'metrics-chart'
+import { MonitoringContext } from '../context'
 
 export default function Monitoring() {
   const ctx = useContext(MonitoringContext)
@@ -144,6 +145,7 @@ export default function Monitoring() {
                             range={chartRange}
                             nullValue={m.nullValue}
                             unit={m.unit!}
+                            timezone={tz.getTimeZone()}
                             fetchPromeData={ctx!.ds.metricsQueryGet}
                             onLoading={onLoadingStateChange}
                             onBrush={handleOnBrush}