diff --git a/frontend/src/ts/ervu-dashboard/component/chart/plugin/BarDataLabelChartPlugin.ts b/frontend/src/ts/ervu-dashboard/component/chart/plugin/BarDataLabelChartPlugin.ts
index 2b67c8d4..0e27d609 100644
--- a/frontend/src/ts/ervu-dashboard/component/chart/plugin/BarDataLabelChartPlugin.ts
+++ b/frontend/src/ts/ervu-dashboard/component/chart/plugin/BarDataLabelChartPlugin.ts
@@ -1,4 +1,5 @@
 import {
+  AdvancedProperty,
   AnalyticalScope,
   Behavior,
   ChartFontFamily,
@@ -18,9 +19,12 @@ export class BarDataLabelChartPlugin extends Behavior implements ChartPlugin {
 
   public labelAxis = 'y';
 
-  public weight: number = 500;
-  public size: number = 12;
-  public family: ChartFontFamily = ChartFontFamily.SANS_SERIF;
+  @AdvancedProperty()
+  public defaultFontFamily: string = ChartFontFamily.SANS_SERIF;
+  @AdvancedProperty()
+  public defaultFontWeight: string = '500';
+  @AdvancedProperty()
+  public defaultFontSize: number = 14;
 
   public useStaticColor: boolean = true;
   @Visible('useStaticColor == true')
@@ -31,11 +35,17 @@ export class BarDataLabelChartPlugin extends Behavior implements ChartPlugin {
   afterDatasetDraw(chart: Chart, args: { index: number; meta: ChartMeta }): void {
     let ctx = chart.ctx;
     let data = chart.data.datasets[args.index];
+
+    const fixRatio = window.devicePixelRatio;
+    const textFontSize = () => {
+      return fixRatio > 1 ? Math.round(this.defaultFontSize / fixRatio) : this.defaultFontSize;
+    }
+
     args.meta.data.forEach((datapoint: any, i) => {
       ctx.font = ChartUtils.getFont({
-                                      family: this.family,
-                                      weight: String(this.weight),
-                                      size: this.size
+                                      family: this.defaultFontFamily,
+                                      weight: String(this.defaultFontWeight),
+                                      size: textFontSize()
                                     });
       ctx.textAlign = 'center';
       ctx.fillStyle = this.useStaticColor ? this.color : datapoint.options.backgroundColor;