diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e67c3f1d7..06357243d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -44,7 +44,7 @@ plugins
 - mods: The offical mods of Newcar
 - packages: the core and other packages that core is dependent on or be dependented
   - basic: There are many basic figures in there, please refer to [newcar.js.org](https://newcar.js.org) to see them
-- plugions: The offcial plugins of Newcar
+- plugins: The offcial plugins of Newcar
 
 And you can custom some widget for our offical lib, the guide is in out [documentation](https://newcar.js.org).
 
diff --git a/examples/main.ts b/examples/main.ts
index 20aa30a24..910fcd688 100644
--- a/examples/main.ts
+++ b/examples/main.ts
@@ -1,6 +1,6 @@
-import { CarEngine, Color, Scene } from 'newcar'
+import { CarEngine, Color } from 'newcar'
 import { Angle, Brace } from '@newcar/mod-geometry'
-import { BarChart } from '@newcar/mod-chart'
+import { BarChart, ChartDataUnit, ChartUtil } from '@newcar/mod-chart'
 import { Markdown } from '@newcar/mod-markdown'
 // import { Tex } from '@newcar/mod-math'
 
@@ -74,23 +74,49 @@ const scene7 = new nc.Scene(new Brace([0, 0], [200, 200]))
 const scene8 = new nc.Scene(
   new BarChart(
     {
-      labels: ['A', 'B', 'C', 'D'],
+      labels: ['AB', 'BB', 'CB', 'DB'],
       datasets: [
         {
           label: 'Series 1',
-          data: [12, 19, 3, 5],
-          backgroundColor: [
-            Color.rgba(255, 99, 132, 0.2),
-            Color.rgba(255, 159, 64, 0.2),
-            Color.rgba(255, 205, 86, 0.2),
-            Color.rgba(75, 192, 192, 0.2),
-          ],
-          borderColor: [
-            Color.rgba(255, 99, 132),
-            Color.rgba(255, 159, 64),
-            Color.rgba(255, 205, 86),
-            Color.rgba(75, 192, 192),
+          data: ChartUtil.dataUnits([12, 19, 3, 5]),
+          style: {
+            backgroundColor: Color.parse('#66CCFF').withAlpha(0.2),
+            borderColor: Color.parse('#66CCFF'),
+            borderWidth: 1,
+          },
+        },
+        {
+          label: 'Series 2',
+          data: [
+            new ChartDataUnit(12, {
+              style: {
+                backgroundColor: Color.rgba(255, 99, 132, 0.2),
+                borderColor: Color.rgba(255, 99, 132),
+              },
+            }),
+            new ChartDataUnit(19, {
+              style: {
+                backgroundColor: Color.rgba(255, 159, 64, 0.2),
+                borderColor: Color.rgba(255, 159, 64),
+              },
+            }),
+            new ChartDataUnit(3, {
+              style: {
+                backgroundColor: Color.rgba(255, 205, 86, 0.2),
+                borderColor: Color.rgba(255, 205, 86),
+              },
+            }),
+            new ChartDataUnit(5, {
+              style: {
+                backgroundColor: Color.rgba(75, 192, 192, 0.2),
+                borderColor: Color.rgba(75, 192, 192),
+              },
+            }),
           ],
+          style: {
+            backgroundColor: Color.rgba(255, 99, 132, 0.2),
+            borderColor: Color.rgba(255, 99, 132),
+          },
         },
       ],
     },
diff --git a/mods/mod-chart/package.json b/mods/mod-chart/package.json
index 672a63bcb..737af178e 100644
--- a/mods/mod-chart/package.json
+++ b/mods/mod-chart/package.json
@@ -27,7 +27,8 @@
   "dependencies": {
     "@newcar/basic": "workspace:*",
     "@newcar/core": "workspace:*",
-    "@newcar/utils": "workspace:*"
+    "@newcar/utils": "workspace:*",
+    "string-width": "^7.1.0"
   },
   "devDependencies": {
     "canvaskit-wasm": "0.39.1"
diff --git a/mods/mod-chart/src/index.ts b/mods/mod-chart/src/index.ts
index 8d0038a06..b46e7821f 100644
--- a/mods/mod-chart/src/index.ts
+++ b/mods/mod-chart/src/index.ts
@@ -1 +1,2 @@
 export * from './widgets'
+export * from './utils'
diff --git a/mods/mod-chart/src/utils/chartData.ts b/mods/mod-chart/src/utils/chartData.ts
index 586dfb74a..5054be79c 100644
--- a/mods/mod-chart/src/utils/chartData.ts
+++ b/mods/mod-chart/src/utils/chartData.ts
@@ -1,13 +1,10 @@
-import type { Color } from '@newcar/utils'
+import type { ChartDataUnit } from '../widgets'
 
-export interface ChartData {
+export interface ChartData<ChartStyle> {
   labels: string[]
   datasets: {
     label: string
-    data: number[]
-    backgroundColor?: Color[]
-    borderColor?: Color[]
-    borderWidth?: number
-    borderRadius?: number
+    data: ChartDataUnit<ChartStyle>[]
+    style?: ChartStyle
   }[]
 }
diff --git a/mods/mod-chart/src/utils/chartStyle.ts b/mods/mod-chart/src/utils/chartStyle.ts
new file mode 100644
index 000000000..588c832e0
--- /dev/null
+++ b/mods/mod-chart/src/utils/chartStyle.ts
@@ -0,0 +1,9 @@
+import type { Color } from '@newcar/utils'
+import type { WidgetStyle } from '@newcar/core'
+
+export interface ChartStyle extends WidgetStyle {
+  backgroundColor?: Color
+  borderColor?: Color
+  borderWidth?: number
+  border?: boolean
+}
diff --git a/mods/mod-chart/src/utils/chartUtil.ts b/mods/mod-chart/src/utils/chartUtil.ts
new file mode 100644
index 000000000..664d934c3
--- /dev/null
+++ b/mods/mod-chart/src/utils/chartUtil.ts
@@ -0,0 +1,8 @@
+import type { ChartDataOptions } from '../widgets'
+import { ChartDataUnit } from '../widgets'
+
+export class ChartUtil {
+  static dataUnits<ChartStyle>(data: number[], options?: ChartDataOptions<ChartStyle>): ChartDataUnit<ChartStyle>[] {
+    return data.map(value => new ChartDataUnit(value, options))
+  }
+}
diff --git a/mods/mod-chart/src/utils/index.ts b/mods/mod-chart/src/utils/index.ts
new file mode 100644
index 000000000..3a0da4fa9
--- /dev/null
+++ b/mods/mod-chart/src/utils/index.ts
@@ -0,0 +1,4 @@
+export * from './chartData'
+export * from './chartStyle'
+export * from './chartOption'
+export * from './chartUtil'
diff --git a/mods/mod-chart/src/widgets/barChart.ts b/mods/mod-chart/src/widgets/barChart.ts
index 3b2171008..9f821c420 100644
--- a/mods/mod-chart/src/widgets/barChart.ts
+++ b/mods/mod-chart/src/widgets/barChart.ts
@@ -1,9 +1,7 @@
 import { Figure, Rect } from '@newcar/basic'
-import type { WidgetStyle } from '@newcar/core'
 import { Color } from '@newcar/utils'
 import type { CanvasKit, Paint } from 'canvaskit-wasm'
-import type { ChartData } from '../utils/chartData'
-import type { ChartOption } from '../utils/chartOption'
+import type { ChartData, ChartOption, ChartStyle } from '../utils'
 import { ChartLayout } from './chartLayout'
 
 export interface BarChartOptions extends ChartOption {
@@ -11,7 +9,9 @@ export interface BarChartOptions extends ChartOption {
   barPercentage?: number
 }
 
-export interface BarChartStyle extends WidgetStyle {}
+export interface BarChartStyle extends ChartStyle {
+  borderRadius?: number
+}
 
 export class BarChart extends Figure {
   declare style: BarChartStyle
@@ -23,7 +23,7 @@ export class BarChart extends Figure {
   barSets: Rect[][]
 
   constructor(
-    public data: ChartData,
+    public data: ChartData<BarChartStyle>,
     options?: BarChartOptions,
   ) {
     options ??= {
@@ -45,14 +45,18 @@ export class BarChart extends Figure {
       const categorySize = gridSize * this.categoryPercentage
       const barSize = (categorySize / this.data.datasets.length) * this.barPercentage
       this.barSets = this.data.datasets.map((set, setIndex) => {
-        return set.data.map((value, index) => {
+        set.style.backgroundColor ??= Color.WHITE.withAlpha(0.2)
+        set.style.borderColor ??= Color.WHITE
+        set.style.borderWidth ??= 1
+        set.style.border ??= true
+        return set.data.map((unit, index) => {
           return new Rect(
             [
               (index * this.layout.size.width) / this.data.labels.length
               + (gridSize - categorySize) / 2
               + (setIndex * categorySize) / this.data.datasets.length
               + (categorySize / this.data.datasets.length - barSize) / 2,
-              this.layout.size.height - (value * this.layout.size.height) / this.layout.max,
+              this.layout.size.height - (unit.value * this.layout.size.height) / this.layout.max,
             ],
             [
               (index * this.layout.size.width) / this.data.labels.length
@@ -64,8 +68,10 @@ export class BarChart extends Figure {
             ],
             {
               style: {
-                fillColor: set.backgroundColor ? set.backgroundColor[index] : Color.WHITE,
-                borderColor: set.borderColor ? set.borderColor[index] : Color.WHITE,
+                fillColor: unit.style.backgroundColor ?? set.style.backgroundColor,
+                borderColor: unit.style.borderColor ?? set.style.borderColor,
+                borderWidth: unit.style.borderWidth ?? set.style.borderWidth,
+                border: unit.style.border ?? set.style.border,
               },
             },
           )
@@ -77,7 +83,11 @@ export class BarChart extends Figure {
       const categorySize = gridSize * this.categoryPercentage
       const barSize = (categorySize / this.data.datasets.length) * this.barPercentage
       this.barSets = this.data.datasets.map((set, setIndex) => {
-        return set.data.map((value, index) => {
+        set.style.backgroundColor ??= Color.WHITE.withAlpha(0.2)
+        set.style.borderColor ??= Color.WHITE
+        set.style.borderWidth ??= 1
+        set.style.border ??= true
+        return set.data.map((unit, index) => {
           return new Rect(
             [
               0,
@@ -88,7 +98,7 @@ export class BarChart extends Figure {
               + this.layout.style.gridWidth / 2,
             ],
             [
-              (value * this.layout.size.width) / this.layout.max,
+              (unit.value * this.layout.size.width) / this.layout.max,
               (index * this.layout.size.height) / this.data.labels.length
               + (gridSize - categorySize) / 2
               + (setIndex * categorySize) / this.data.datasets.length
@@ -97,8 +107,10 @@ export class BarChart extends Figure {
             ],
             {
               style: {
-                fillColor: set.backgroundColor ? set.backgroundColor[index] : Color.WHITE,
-                borderColor: set.borderColor ? set.borderColor[index] : Color.WHITE,
+                fillColor: unit.style.backgroundColor ?? set.style.backgroundColor,
+                borderColor: unit.style.borderColor ?? set.style.borderColor,
+                borderWidth: unit.style.borderWidth ?? set.style.borderWidth,
+                border: unit.style.border ?? set.style.border,
               },
             },
           )
diff --git a/mods/mod-chart/src/widgets/chartDataUnit.ts b/mods/mod-chart/src/widgets/chartDataUnit.ts
new file mode 100644
index 000000000..353584f27
--- /dev/null
+++ b/mods/mod-chart/src/widgets/chartDataUnit.ts
@@ -0,0 +1,15 @@
+import { Widget, type WidgetOptions } from '@newcar/core'
+
+export interface ChartDataOptions<ChartStyle> extends WidgetOptions {
+  style?: ChartStyle
+}
+
+export class ChartDataUnit<ChartStyle> extends Widget {
+  declare style: ChartStyle
+
+  constructor(public value: number, options?: ChartDataOptions<ChartStyle>) {
+    options ??= {}
+    super(options)
+    this.style = options.style ?? {} as ChartStyle
+  }
+}
diff --git a/mods/mod-chart/src/widgets/chartLayout.ts b/mods/mod-chart/src/widgets/chartLayout.ts
index b143f53d7..8a26728e4 100644
--- a/mods/mod-chart/src/widgets/chartLayout.ts
+++ b/mods/mod-chart/src/widgets/chartLayout.ts
@@ -1,9 +1,9 @@
-import { Figure, Line, Text } from '@newcar/basic'
+import { Figure, Line, Rect, Text } from '@newcar/basic'
 import type { WidgetStyle } from '@newcar/core'
 import type { CanvasKit, Paint } from 'canvaskit-wasm'
 import { Color } from '@newcar/utils'
-import type { ChartData } from '../utils/chartData'
-import type { ChartOption } from '../utils/chartOption'
+import stringWidth from 'string-width'
+import type { ChartData, ChartOption, ChartStyle } from '../utils'
 
 export interface ChartLayoutOptions extends ChartOption {
 }
@@ -32,8 +32,10 @@ export class ChartLayout extends Figure {
   yGrids: Line[]
   xLabels: Text[]
   yLabels: Text[]
+  legends: Rect[]
+  legendLabels: Text[]
 
-  constructor(public data: ChartData, options?: ChartLayoutOptions) {
+  constructor(public data: ChartData<ChartStyle>, options?: ChartLayoutOptions) {
     options ??= {
       size: {
         width: 200,
@@ -47,22 +49,16 @@ export class ChartLayout extends Figure {
     this.style.gridWidth = options.gridWidth ?? 1
 
     const minDataValue = Math.min(
-      ...data.datasets.flatMap((set) => {
-        return set.data
-      }),
+      ...data.datasets.flatMap(set => set.data).flatMap(unit => unit.value),
       options.suggestedMin ?? 0,
     )
     const maxDataValue = options.suggestedMax
       ? Math.max(
-        ...data.datasets.flatMap((set) => {
-          return set.data
-        }),
+        ...data.datasets.flatMap(set => set.data).flatMap(unit => unit.value),
         options.suggestedMax,
       )
       : Math.max(
-        ...data.datasets.flatMap((set) => {
-          return set.data
-        }),
+        ...data.datasets.flatMap(set => set.data).flatMap(unit => unit.value),
       )
     const range = maxDataValue - minDataValue
     const magnitude = Math.floor(Math.log10(range))
@@ -94,7 +90,7 @@ export class ChartLayout extends Figure {
     })
 
     if (this.indexAxis === 'x') {
-      this.xGrids = this.data.labels.map((label, index) => {
+      this.xGrids = this.data.labels.map((_label, index) => {
         return new Line(
           [((index + 1) * this.size.width) / this.data.labels.length, 0],
           [
@@ -133,6 +129,7 @@ export class ChartLayout extends Figure {
       })
 
       this.yGrids = []
+      this.yLabels = []
 
       for (let i = this.min; i <= this.max; i += this.interval) {
         this.yGrids.push(
@@ -156,11 +153,6 @@ export class ChartLayout extends Figure {
             },
           ),
         )
-      }
-
-      this.yLabels = []
-
-      for (let i = this.min; i <= this.max; i += this.interval) {
         this.yLabels.push(
           new Text(
             [
@@ -173,12 +165,12 @@ export class ChartLayout extends Figure {
               },
             ],
             {
-              x: -8 - i.toString().length * 12,
+              x: -8 - stringWidth(i.toString()) * 12,
               y:
                 this.size.height - 8
                 - ((i - this.min) / (this.max - this.min)) * this.size.height,
               style: {
-                width: i.toString().length * 12,
+                width: stringWidth(i.toString()) * 12,
                 textAlign: 'right',
               },
             },
@@ -187,7 +179,7 @@ export class ChartLayout extends Figure {
       }
     }
     else {
-      this.yGrids = this.data.labels.map((label, index) => {
+      this.yGrids = this.data.labels.map((_label, index) => {
         return new Line(
           [-5, (index * this.size.height) / this.data.labels.length],
           [
@@ -214,10 +206,10 @@ export class ChartLayout extends Figure {
             },
           ],
           {
-            x: -8 - label.length * 12,
+            x: -8 - stringWidth(label) * 12,
             y: ((index + 0.5) * this.size.height) / this.data.labels.length - 8,
             style: {
-              width: label.length * 12,
+              width: stringWidth(label) * 12,
               textAlign: 'right',
             },
           },
@@ -225,6 +217,7 @@ export class ChartLayout extends Figure {
       })
 
       this.xGrids = []
+      this.xLabels = []
 
       for (let i = this.min; i <= this.max; i += this.interval) {
         this.xGrids.push(
@@ -245,11 +238,6 @@ export class ChartLayout extends Figure {
             },
           ),
         )
-      }
-
-      this.xLabels = []
-
-      for (let i = this.min; i <= this.max; i += this.interval) {
         this.xLabels.push(
           new Text(
             [
@@ -275,6 +263,60 @@ export class ChartLayout extends Figure {
       }
     }
 
+    this.legends = []
+    this.legendLabels = []
+    const legendWidthPrefix = [0]
+    for (let i = 1; i <= this.data.datasets.length; i++) {
+      legendWidthPrefix[i] = legendWidthPrefix[i - 1]
+      legendWidthPrefix[i] += stringWidth(this.data.datasets[i - 1].label) * 12 + 24
+    }
+    for (let i = 0; i < this.data.datasets.length; i++) {
+      this.legends.push(
+        new Rect(
+          [
+            this.size.width / 2 - legendWidthPrefix[this.data.datasets.length] / 2 + legendWidthPrefix[i],
+            -26,
+          ],
+          [
+            this.size.width / 2 - legendWidthPrefix[this.data.datasets.length] / 2 + legendWidthPrefix[i] + 20,
+            -10,
+          ],
+          {
+            style: {
+              fillColor: this.data.datasets[i].style.backgroundColor
+              ?? (this.data.datasets[i].data[0].style.backgroundColor ?? Color.WHITE),
+              borderColor: this.data.datasets[i].style.borderColor
+              ?? (this.data.datasets[i].data[0].style.borderColor ?? Color.WHITE),
+              borderWidth: this.data.datasets[i].style.borderWidth
+              ?? (this.data.datasets[i].data[0].style.borderWidth ?? 1),
+              border: true,
+            },
+          },
+        ),
+      )
+      this.legendLabels.push(
+        new Text(
+          [
+            {
+              text: this.data.datasets[i].label,
+              style: {
+                color: this.style.gridColor,
+                fontSize: 16,
+              },
+            },
+          ],
+          {
+            x: this.size.width / 2 - legendWidthPrefix[this.data.datasets.length] / 2 + legendWidthPrefix[i] + 24,
+            y: -28,
+            style: {
+              width: stringWidth(this.data.datasets[i].label) * 12,
+              textAlign: 'center',
+            },
+          },
+        ),
+      )
+    }
+
     this.add(
       this.xAxis,
       this.yAxis,
@@ -282,6 +324,8 @@ export class ChartLayout extends Figure {
       ...this.xLabels,
       ...this.yGrids,
       ...this.yLabels,
+      ...this.legends,
+      ...this.legendLabels,
     )
   }
 
diff --git a/mods/mod-chart/src/widgets/index.ts b/mods/mod-chart/src/widgets/index.ts
index e5514a4bb..c8fc68166 100644
--- a/mods/mod-chart/src/widgets/index.ts
+++ b/mods/mod-chart/src/widgets/index.ts
@@ -1,2 +1,3 @@
-export * from './barChart'
+export * from './chartDataUnit'
 export * from './chartLayout'
+export * from './barChart'
diff --git a/mods/mod-geometry/src/widgets/brace.ts b/mods/mod-geometry/src/widgets/brace.ts
index 49c1773c3..05feb4dd1 100644
--- a/mods/mod-geometry/src/widgets/brace.ts
+++ b/mods/mod-geometry/src/widgets/brace.ts
@@ -34,7 +34,7 @@ export class Brace extends Widget {
     this.path = new ck.Path()
     this.paint.setStyle(ck.PaintStyle.Stroke)
     this.paint.setColor(this.style.color.toFloat4())
-    this.paint.setAlphaf(this.style.transparency)
+    this.paint.setAlphaf(this.style.transparency * this.style.color.alpha)
     this.paint.setStrokeWidth(3)
     const length = Math.sqrt((this.to[0] - this.from[0]) ** 2 + (this.to[1] - this.from[1]))
 
diff --git a/packages/basic/src/widgets/figures/arc.ts b/packages/basic/src/widgets/figures/arc.ts
index 71d8e6108..3dba0b608 100644
--- a/packages/basic/src/widgets/figures/arc.ts
+++ b/packages/basic/src/widgets/figures/arc.ts
@@ -21,7 +21,7 @@ export class Arc extends Figure {
     this.strokePaint.setStyle(ck.PaintStyle.Stroke)
     this.strokePaint.setColor(this.style.borderColor.toFloat4())
     this.strokePaint.setStrokeWidth(this.style.borderWidth)
-    this.strokePaint.setAlphaf(this.style.transparency)
+    this.strokePaint.setAlphaf(this.style.transparency * this.style.borderColor.alpha)
 
     try {
       const dash = ck.PathEffect.MakeDash(
@@ -36,7 +36,7 @@ export class Arc extends Figure {
     this.fillPaint = new ck.Paint()
     this.fillPaint.setColor(this.style.fillColor.toFloat4())
     this.fillPaint.setStyle(ck.PaintStyle.Fill)
-    this.fillPaint.setAlphaf(this.style.transparency)
+    this.fillPaint.setAlphaf(this.style.transparency * this.style.fillColor.alpha)
 
     // Blend Mode
     this.strokePaint.setBlendMode(str2BlendMode(ck, this.style.blendMode))
@@ -82,8 +82,8 @@ export class Arc extends Figure {
         break
       }
     }
-    this.strokePaint.setAlphaf(this.style.transparency)
-    this.fillPaint.setAlphaf(this.style.transparency)
+    this.strokePaint.setAlphaf(this.style.transparency * this.style.borderColor.alpha)
+    this.fillPaint.setAlphaf(this.style.transparency * this.style.fillColor.alpha)
   }
 
   draw(canvas: Canvas): void {
diff --git a/packages/basic/src/widgets/figures/line.ts b/packages/basic/src/widgets/figures/line.ts
index 9ba4d454b..d062f6bfe 100644
--- a/packages/basic/src/widgets/figures/line.ts
+++ b/packages/basic/src/widgets/figures/line.ts
@@ -30,7 +30,7 @@ export class Line extends Widget {
     this.paint.setStyle(ck.PaintStyle.Stroke)
     this.paint.setColor(this.style.color.toFloat4())
     this.paint.setStrokeWidth(this.style.width)
-    this.paint.setAlphaf(this.style.transparency)
+    this.paint.setAlphaf(this.style.transparency * this.style.color.alpha)
     this.paint.setBlendMode(str2BlendMode(ck, this.style.blendMode))
   }
 
@@ -50,7 +50,7 @@ export class Line extends Widget {
         break
       }
     }
-    this.paint.setAlphaf(this.style.transparency)
+    this.paint.setAlphaf(this.style.transparency * this.style.color.alpha)
   }
 
   draw(canvas: Canvas): void {
diff --git a/packages/basic/src/widgets/figures/path.ts b/packages/basic/src/widgets/figures/path.ts
index 7711878e2..bef22529b 100644
--- a/packages/basic/src/widgets/figures/path.ts
+++ b/packages/basic/src/widgets/figures/path.ts
@@ -22,7 +22,7 @@ export class Path extends Figure {
     this.strokePaint = new ck.Paint()
     this.strokePaint.setStyle(ck.PaintStyle.Stroke)
     this.strokePaint.setColor(this.style.borderColor.toFloat4())
-    this.strokePaint.setAlphaf(this.style.transparency)
+    this.strokePaint.setAlphaf(this.style.transparency * this.style.borderColor.alpha)
     this.strokePaint.setStrokeWidth(this.style.borderWidth)
     this.strokePaint.setStrokeJoin(str2StrokeJoin(ck, this.style.join))
     this.strokePaint.setStrokeCap(str2StrokeCap(ck, this.style.cap))
@@ -37,7 +37,7 @@ export class Path extends Figure {
     this.fillPaint = new ck.Paint()
     this.fillPaint.setStyle(ck.PaintStyle.Fill)
     this.fillPaint.setColor(this.style.fillColor.toFloat4())
-    this.fillPaint.setAlphaf(this.style.transparency)
+    this.fillPaint.setAlphaf(this.style.transparency * this.style.fillColor.alpha)
   }
 
   predraw(ck: CanvasKit, propertyChanged: string): void {
@@ -72,8 +72,8 @@ export class Path extends Figure {
         )
       }
     }
-    this.strokePaint.setAlphaf(this.style.transparency)
-    this.fillPaint.setAlphaf(this.style.transparency)
+    this.strokePaint.setAlphaf(this.style.transparency * this.style.borderColor.alpha)
+    this.fillPaint.setAlphaf(this.style.transparency * this.style.fillColor.alpha)
   }
 
   addPathFromSVGString(svg: string) {
diff --git a/packages/basic/src/widgets/figures/polygon.ts b/packages/basic/src/widgets/figures/polygon.ts
index c11e828dd..80bb96dc4 100644
--- a/packages/basic/src/widgets/figures/polygon.ts
+++ b/packages/basic/src/widgets/figures/polygon.ts
@@ -48,8 +48,8 @@ export class Polygon extends Figure {
     this.fillPaint.setColor(this.style.fillColor.toFloat4())
 
     // Alpha
-    this.strokePaint.setAlphaf(this.style.transparency)
-    this.fillPaint.setAlphaf(this.style.transparency)
+    this.strokePaint.setAlphaf(this.style.transparency * this.style.borderColor.alpha)
+    this.fillPaint.setAlphaf(this.style.transparency * this.style.fillColor.alpha)
 
     // Blend Mode
     this.strokePaint.setBlendMode(str2BlendMode(ck, this.style.blendMode))
@@ -101,8 +101,8 @@ export class Polygon extends Figure {
         this.fillPaint.setBlendMode(str2BlendMode(ck, this.style.blendMode))
       }
     }
-    this.strokePaint.setAlphaf(this.style.transparency)
-    this.fillPaint.setAlphaf(this.style.transparency)
+    this.strokePaint.setAlphaf(this.style.transparency * this.style.borderColor.alpha)
+    this.fillPaint.setAlphaf(this.style.transparency * this.style.fillColor.alpha)
   }
 
   draw(canvas: Canvas): void {
diff --git a/packages/basic/src/widgets/figures/rect.ts b/packages/basic/src/widgets/figures/rect.ts
index 47c80d170..d2b05cfc4 100644
--- a/packages/basic/src/widgets/figures/rect.ts
+++ b/packages/basic/src/widgets/figures/rect.ts
@@ -30,7 +30,7 @@ export class Rect extends Figure {
     this.strokePaint = new ck.Paint()
     this.strokePaint.setStyle(ck.PaintStyle.Stroke)
     this.strokePaint.setColor(this.style.borderColor.toFloat4())
-    this.strokePaint.setAlphaf(this.style.transparency)
+    this.strokePaint.setAlphaf(this.style.transparency * this.style.borderColor.alpha)
     this.strokePaint.setStrokeWidth(this.style.borderWidth)
     this.strokePaint.setStrokeJoin(str2StrokeJoin(ck, this.style.join))
     this.strokePaint.setStrokeCap(str2StrokeCap(ck, this.style.cap))
@@ -45,7 +45,7 @@ export class Rect extends Figure {
     this.fillPaint = new ck.Paint()
     this.fillPaint.setStyle(ck.PaintStyle.Fill)
     this.fillPaint.setColor(this.style.fillColor.toFloat4())
-    this.fillPaint.setAlphaf(this.style.transparency)
+    this.fillPaint.setAlphaf(this.style.transparency * this.style.fillColor.alpha)
 
     // Blend Mode
     this.strokePaint.setBlendMode(str2BlendMode(ck, this.style.blendMode))
@@ -96,8 +96,8 @@ export class Rect extends Figure {
         this.fillPaint.setBlendMode(str2BlendMode(ck, this.style.blendMode))
       }
     }
-    this.strokePaint.setAlphaf(this.style.transparency)
-    this.fillPaint.setAlphaf(this.style.transparency)
+    this.strokePaint.setAlphaf(this.style.transparency * this.style.borderColor.alpha)
+    this.fillPaint.setAlphaf(this.style.transparency * this.style.fillColor.alpha)
   }
 
   draw(canvas: Canvas): void {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 79fd4c376..3fabec68b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -125,7 +125,7 @@ importers:
         specifier: 0.39.1
         version: 0.39.1
       newcar:
-        specifier: workspace:0.15.1
+        specifier: workspace:1.0.0-alpha.0
         version: link:../packages/newcar
       vite-plugin-node-polyfills:
         specifier: ^0.21.0
@@ -142,6 +142,9 @@ importers:
       '@newcar/utils':
         specifier: workspace:*
         version: link:../../packages/utils
+      string-width:
+        specifier: ^7.1.0
+        version: 7.1.0
     devDependencies:
       canvaskit-wasm:
         specifier: 0.39.1
@@ -995,46 +998,55 @@ packages:
     resolution: {integrity: sha512-ADm/xt86JUnmAfA9mBqFcRp//RVRt1ohGOYF6yL+IFCYqOBNwy5lbEK05xTsEoJq+/tJzg8ICUtS82WinJRuIw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.16.4':
     resolution: {integrity: sha512-tJfJaXPiFAG+Jn3cutp7mCs1ePltuAgRqdDZrzb1aeE3TktWWJ+g7xK9SNlaSUFw6IU4QgOxAY4rA+wZUT5Wfg==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.16.4':
     resolution: {integrity: sha512-7dy1BzQkgYlUTapDTvK997cgi0Orh5Iu7JlZVBy1MBURk7/HSbHkzRnXZa19ozy+wwD8/SlpJnOOckuNZtJR9w==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.16.4':
     resolution: {integrity: sha512-zsFwdUw5XLD1gQe0aoU2HVceI6NEW7q7m05wA46eUAyrkeNYExObfRFQcvA6zw8lfRc5BHtan3tBpo+kqEOxmg==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.16.4':
     resolution: {integrity: sha512-p8C3NnxXooRdNrdv6dBmRTddEapfESEUflpICDNKXpHvTjRRq1J82CbU5G3XfebIZyI3B0s074JHMWD36qOW6w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.16.4':
     resolution: {integrity: sha512-Lh/8ckoar4s4Id2foY7jNgitTOUQczwMWNYi+Mjt0eQ9LKhr6sK477REqQkmy8YHY3Ca3A2JJVdXnfb3Rrwkng==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.16.4':
     resolution: {integrity: sha512-1xwwn9ZCQYuqGmulGsTZoKrrn0z2fAur2ujE60QgyDpHmBbXbxLaQiEvzJWDrscRq43c8DnuHx3QorhMTZgisQ==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.16.4':
     resolution: {integrity: sha512-LuOGGKAJ7dfRtxVnO1i3qWc6N9sh0Em/8aZ3CezixSTM+E9Oq3OvTsvC4sm6wWjzpsIlOCnZjdluINKESflJLA==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.16.4':
     resolution: {integrity: sha512-ch86i7KkJKkLybDP2AtySFTRi5fM3KXp0PnHocHuJMdZwu7BuyIKi35BE9guMlmTpwwBTB3ljHj9IQXnTCD0vA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.16.4':
     resolution: {integrity: sha512-Ma4PwyLfOWZWayfEsNQzTDBVW8PZ6TUUN1uFTBQbF2Chv/+sjenE86lpiEwj2FiviSmSZ4Ap4MaAfl1ciF4aSA==}