diff --git a/packages/mask/src/plugins/hooks/useLineChart.ts b/packages/mask/src/plugins/hooks/useLineChart/index.ts
similarity index 94%
rename from packages/mask/src/plugins/hooks/useLineChart.ts
rename to packages/mask/src/plugins/hooks/useLineChart/index.ts
index 77c512e1b1e0..b7f65da21643 100644
--- a/packages/mask/src/plugins/hooks/useLineChart.ts
+++ b/packages/mask/src/plugins/hooks/useLineChart/index.ts
@@ -1,9 +1,10 @@
 import * as d3 from 'd3'
 import { useEffect, RefObject } from 'react'
 import stringify from 'json-stable-stringify'
-import type { Dimension } from './useDimension'
+import type { Dimension } from '../useDimension'
 import format from 'date-fns/format'
 import { alpha, useTheme } from '@mui/material'
+import { fixOverPosition } from './utils'
 
 export function useLineChart(
     svgRef: RefObject<SVGSVGElement>,
@@ -58,10 +59,13 @@ export function useLineChart(
             y: (y(max) ?? 0) - 16,
         }
 
+        const minFixedPosition = fixOverPosition(contentWidth, contentHeight, minPosition.x, minPosition.y, 40)
+        const maxFixedPosition = fixOverPosition(contentWidth, contentHeight, maxPosition.x, maxPosition.y, 40)
+
         graph
             .append('g')
             .append('text')
-            .attr('transform', `translate(${minPosition.x}, ${minPosition.y})`)
+            .attr('transform', `translate(${minFixedPosition.x}, ${minFixedPosition.y})`)
             .style('font-size', 14)
             .style('font-weight', 700)
             .style('font-family', 'Helvetica')
@@ -71,7 +75,7 @@ export function useLineChart(
         graph
             .append('g')
             .append('text')
-            .attr('transform', `translate(${maxPosition.x}, ${maxPosition.y})`)
+            .attr('transform', `translate(${maxFixedPosition.x}, ${maxFixedPosition.y})`)
             .style('font-size', 14)
             .style('font-weight', 700)
             .style('font-family', 'Helvetica')
diff --git a/packages/mask/src/plugins/hooks/useLineChart/tests/utils.test.ts b/packages/mask/src/plugins/hooks/useLineChart/tests/utils.test.ts
new file mode 100644
index 000000000000..f67eeee20ede
--- /dev/null
+++ b/packages/mask/src/plugins/hooks/useLineChart/tests/utils.test.ts
@@ -0,0 +1,17 @@
+import { describe, test, expect } from '@jest/globals'
+import { fixOverPosition } from '../utils'
+
+describe('chart element position', () => {
+    test.each([
+        { x: 25, y: 25, expected: { x: 25, y: 25 } },
+        { x: 50, y: 50, expected: { x: 45, y: 45 } },
+        { x: 0, y: 50, expected: { x: 5, y: 45 } },
+        { x: 1, y: 50, expected: { x: 5, y: 45 } },
+        { x: 50, y: 0, expected: { x: 45, y: 5 } },
+        { x: 0, y: 0, expected: { x: 5, y: 5 } },
+        { x: 1, y: 1, expected: { x: 5, y: 5 } },
+    ])('.fixOverPosition(%x, %y)', ({ x, y, expected }) => {
+        const result = fixOverPosition(50, 50, x, y, 5, 5)
+        expect(result).toStrictEqual(expected)
+    })
+})
diff --git a/packages/mask/src/plugins/hooks/useLineChart/utils.ts b/packages/mask/src/plugins/hooks/useLineChart/utils.ts
new file mode 100644
index 000000000000..dfa56b9845de
--- /dev/null
+++ b/packages/mask/src/plugins/hooks/useLineChart/utils.ts
@@ -0,0 +1,16 @@
+export function fixOverPosition(
+    containerWidth: number,
+    containerHeight: number,
+    x: number,
+    y: number,
+    offsetX = 0,
+    offsetY = 0,
+) {
+    let fixed = { x, y }
+
+    if (x - offsetX < 0) fixed = { ...fixed, x: offsetX }
+    if (x > containerWidth - offsetX) fixed = { ...fixed, x: x - offsetX }
+    if (y - offsetY < 0) fixed = { ...fixed, y: offsetY }
+    if (y > containerHeight - offsetY) fixed = { ...fixed, y: y - offsetY }
+    return fixed
+}