diff --git a/frontend/src/views/chat/component/charts/Bar.ts b/frontend/src/views/chat/component/charts/Bar.ts
index 731faaf1..eb6f6f7b 100644
--- a/frontend/src/views/chat/component/charts/Bar.ts
+++ b/frontend/src/views/chat/component/charts/Bar.ts
@@ -1,5 +1,6 @@
 import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
 import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
+import type { G2Spec } from '@antv/g2'
 
 export class Bar extends BaseG2Chart {
   constructor(id: string) {
@@ -17,37 +18,54 @@ export class Bar extends BaseG2Chart {
       return
     }
 
-    this.chart
-      ?.interval()
-      .coordinate({ transform: [{ type: 'transpose' }] })
-      .data(data)
-      .encode('x', x[0].value)
-      .encode('y', y[0].value)
-      .axis({
+    const options: G2Spec = {
+      ...this.chart.options(),
+      type: 'interval',
+      data: data,
+      coordinate: { transform: [{ type: 'transpose' }] },
+      encode: {
+        x: x[0].value,
+        y: y[0].value,
+        color: series.length > 0 ? series[0].value : undefined,
+      },
+      axis: {
         x: { title: x[0].name },
         y: { title: y[0].name },
-      })
-      .scale('x', {
-        nice: true,
-      })
-      .scale('y', {
-        nice: true,
-      })
-      .interaction('elementHighlight', { background: true })
-      .tooltip((data) => {
+      },
+      scale: {
+        x: {
+          nice: true,
+        },
+        y: {
+          nice: true,
+        },
+      },
+      interaction: {
+        elementHighlight: { background: true },
+      },
+      tooltip: (data) => {
         if (series.length > 0) {
           return { name: data[series[0].value], value: data[y[0].value] }
         } else {
           return { name: y[0].name, value: data[y[0].value] }
         }
-      })
-      .label({
-        text: y[0].value,
-        transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
-      })
+      },
+      labels: [
+        {
+          text: y[0].value,
+          transform: [
+            { type: 'overlapDodgeY' },
+            { type: 'contrastReverse' },
+            { type: 'overlapHide' },
+          ],
+        },
+      ],
+    } as G2Spec
 
     if (series.length > 0) {
-      this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
+      options.transform = [{ type: 'stackY' }]
     }
+
+    this.chart.options(options)
   }
 }
diff --git a/frontend/src/views/chat/component/charts/Column.ts b/frontend/src/views/chat/component/charts/Column.ts
index 690ec169..0ac99a5c 100644
--- a/frontend/src/views/chat/component/charts/Column.ts
+++ b/frontend/src/views/chat/component/charts/Column.ts
@@ -1,5 +1,6 @@
 import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
 import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
+import type { G2Spec } from '@antv/g2'
 
 export class Column extends BaseG2Chart {
   constructor(id: string) {
@@ -17,36 +18,55 @@ export class Column extends BaseG2Chart {
       return
     }
 
-    this.chart
-      ?.interval()
-      .data(data)
-      .encode('x', x[0].value)
-      .encode('y', y[0].value)
-      .axis({
+    const options: G2Spec = {
+      ...this.chart.options(),
+      type: 'interval',
+      data: data,
+      encode: {
+        x: x[0].value,
+        y: y[0].value,
+        color: series.length > 0 ? series[0].value : undefined,
+      },
+      axis: {
         x: { title: x[0].name },
         y: { title: y[0].name },
-      })
-      .scale('x', {
-        nice: true,
-      })
-      .scale('y', {
-        nice: true,
-      })
-      .interaction('elementHighlight', { background: true })
-      .tooltip((data) => {
+      },
+      scale: {
+        x: {
+          nice: true,
+        },
+        y: {
+          nice: true,
+        },
+      },
+      interaction: {
+        elementHighlight: { background: true },
+      },
+      tooltip: (data) => {
         if (series.length > 0) {
           return { name: data[series[0].value], value: data[y[0].value] }
         } else {
           return { name: y[0].name, value: data[y[0].value] }
         }
-      })
-      .label({
-        text: y[0].value,
-        transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
-      })
+      },
+      labels: [
+        {
+          text: y[0].value,
+          position: 'top',
+          dy: -25,
+          transform: [
+            { type: 'overlapDodgeY' },
+            { type: 'contrastReverse' },
+            { type: 'overlapHide' },
+          ],
+        },
+      ],
+    } as G2Spec
 
     if (series.length > 0) {
-      this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
+      options.transform = [{ type: 'stackY' }]
     }
+
+    this.chart.options(options)
   }
 }
diff --git a/frontend/src/views/chat/component/charts/Line.ts b/frontend/src/views/chat/component/charts/Line.ts
index 57d5f23d..3aade722 100644
--- a/frontend/src/views/chat/component/charts/Line.ts
+++ b/frontend/src/views/chat/component/charts/Line.ts
@@ -1,5 +1,6 @@
 import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
 import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
+import type { G2Spec } from '@antv/g2'
 
 export class Line extends BaseG2Chart {
   constructor(id: string) {
@@ -17,43 +18,62 @@ export class Line extends BaseG2Chart {
       return
     }
 
-    this.chart
-      ?.data(data)
-      .encode('x', x[0].value)
-      .encode('y', y[0].value)
-      .axis({
+    const options: G2Spec = {
+      ...this.chart.options(),
+      type: 'view',
+      data: data,
+      encode: {
+        x: x[0].value,
+        y: y[0].value,
+        color: series.length > 0 ? series[0].value : undefined,
+      },
+      axis: {
         x: { title: x[0].name },
         y: { title: y[0].name },
-      })
-      .scale('x', {
-        nice: true,
-      })
-      .scale('y', {
-        nice: true,
-      })
-
-    if (series.length > 0) {
-      this.chart?.encode('color', series[0].value)
-    }
-
-    this.chart
-      ?.line()
-      .label({
-        text: y[0].value,
-        style: {
-          dx: -10,
-          dy: -12,
+      },
+      scale: {
+        x: {
+          nice: true,
         },
-        transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
-      })
-      .tooltip((data) => {
-        if (series.length > 0) {
-          return { name: data[series[0].value], value: data[y[0].value] }
-        } else {
-          return { name: y[0].name, value: data[y[0].value] }
-        }
-      })
+        y: {
+          nice: true,
+        },
+      },
+      children: [
+        {
+          type: 'line',
+          labels: [
+            {
+              text: y[0].value,
+              style: {
+                dx: -10,
+                dy: -12,
+              },
+              transform: [
+                { type: 'overlapDodgeY' },
+                { type: 'exceedAdjust' },
+                { type: 'overlapHide' },
+              ],
+            },
+          ],
+          tooltip: (data) => {
+            if (series.length > 0) {
+              return { name: data[series[0].value], value: data[y[0].value] }
+            } else {
+              return { name: y[0].name, value: data[y[0].value] }
+            }
+          },
+        },
+        {
+          type: 'point',
+          style: {
+            fill: 'white',
+          },
+          tooltip: false,
+        },
+      ],
+    } as G2Spec
 
-    this.chart?.point().style('fill', 'white').tooltip(false)
+    this.chart.options(options)
   }
 }
diff --git a/frontend/src/views/chat/component/charts/Pie.ts b/frontend/src/views/chat/component/charts/Pie.ts
index ba2d5cd5..e9e55572 100644
--- a/frontend/src/views/chat/component/charts/Pie.ts
+++ b/frontend/src/views/chat/component/charts/Pie.ts
@@ -1,5 +1,6 @@
 import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
 import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
+import type { G2Spec } from '@antv/g2'
 
 export class Pie extends BaseG2Chart {
   constructor(id: string) {
@@ -15,21 +16,30 @@ export class Pie extends BaseG2Chart {
       return
     }
 
-    this.chart.coordinate({ type: 'theta', outerRadius: 0.8 })
-
-    this.chart
-      ?.interval()
-      .transform({ type: 'stackY' })
-      .data(data)
-      .encode('y', y[0].value)
-      .encode('color', series[0].value)
-      .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
-      .label({
-        position: 'outside',
-        text: (data: any) => `${data[series[0].value]}: ${data[y[0].value]}`,
-      })
-      .tooltip((data) => {
+    const options: G2Spec = {
+      ...this.chart.options(),
+      type: 'interval',
+      coordinate: { type: 'theta', outerRadius: 0.8 },
+      transform: [{ type: 'stackY' }],
+      data: data,
+      encode: {
+        y: y[0].value,
+        color: series[0].value,
+      },
+      legend: {
+        color: { position: 'bottom', layout: { justifyContent: 'center' } },
+      },
+      labels: [
+        {
+          position: 'outside',
+          text: (data: any) => `${data[series[0].value]}: ${data[y[0].value]}`,
+        },
+      ],
+      tooltip: (data) => {
         return { name: y[0].name, value: data[y[0].value] }
-      })
+      },
+    }
+
+    this.chart.options(options)
   }
 }