diff --git a/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts b/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts
index 8c6b7dc..8da2a34 100644
--- a/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts
+++ b/frontend/src/ts/ervu_business_metrics/component/chart/ErvuChartV2.ts
@@ -116,6 +116,9 @@ export class ErvuChartV2 extends Control implements Filterable {
           return;
         }
 
+        const realWidth = canvas.width / (canvas.clientWidth / canvas.offsetWidth);
+        const realHeight = canvas.height / (canvas.clientHeight / canvas.offsetHeight);
+
         ctx.save();
         ctx.resetTransform();
         ctx.textAlign = "center";
@@ -123,26 +126,39 @@ export class ErvuChartV2 extends Control implements Filterable {
         ctx.fillStyle = this.noDataStyle;
 
         const fontMatch = this.noDataFont.match(/^(\d+)px\s+(.+)$/);
-        const fontSize = parseInt(fontMatch[1], 10);
+        const fontSize = parseInt(fontMatch[1], 10) * window.devicePixelRatio;
         const fontFamily = fontMatch[2];
         const text = this.noDataText;
-        const maxWidth = canvas.width * 0.8;
-        const minFontSize = Math.max(8, canvas.height * 0.07);
 
-        let currentFontSize = Math.min(fontSize, canvas.height / 5);
+        const padding = 20 * window.devicePixelRatio;
+        const maxWidth = realWidth - 2 * padding;
+        const maxHeight = realHeight - 2 * padding;
+
+        let currentFontSize = Math.min(
+            fontSize,
+            maxHeight,
+            (maxWidth / text.length) * 1.8
+        );
+
+        const minFontSize = Math.max(8, realHeight * 0.07);
+
         ctx.font = `${currentFontSize}px ${fontFamily}`;
-        let textWidth = ctx.measureText(text).width;
+        const textWidth = ctx.measureText(text).width;
 
-        while (textWidth > maxWidth && currentFontSize > minFontSize) {
-          currentFontSize = Math.max(minFontSize, currentFontSize * 0.9);
+        if (textWidth > maxWidth || currentFontSize > maxHeight) {
+          const widthRatio = maxWidth / textWidth;
+          const heightRatio = maxHeight / currentFontSize;
+          currentFontSize = Math.max(
+              minFontSize,
+              currentFontSize * Math.min(widthRatio, heightRatio)
+          );
           ctx.font = `${currentFontSize}px ${fontFamily}`;
-          textWidth = ctx.measureText(text).width;
         }
 
         ctx.fillText(
             text,
-            canvas.width / 2,
-            canvas.height / 2
+            realWidth / 2,
+            realHeight / 2
         );
         ctx.restore();
       }