diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
index 64ebf9f945..97390995f7 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
@@ -277,20 +277,9 @@ const fontSizeList = computed(() => {
   return arr
 })
 
-const colorForm = computed(() => ({
-  ...(canvasStyleData.value.component.chartColor as DeepPartial<ChartAttr>),
-  label: {
-    color: '#000000',
-    fontSize: 12,
-    ...(canvasStyleData.value.component.chartColor?.label || {})
-  },
-  tooltip: {
-    color: '#000000',
-    fontSize: 12,
-    backgroundColor: '#FFFFFF',
-    ...(canvasStyleData.value.component.chartColor?.tooltip || {})
-  }
-}))
+const colorForm = computed(
+  () => canvasStyleData.value.component.chartColor as DeepPartial<ChartAttr>
+)
 
 const seniorForm = computed(() => canvasStyleData.value.component.seniorStyleSetting)
 
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index d44ddf974d..8b908b899f 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -32,6 +32,7 @@ import { deepCopy, nameTrim } from '@/utils/utils'
 import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import { guid } from '@/views/visualized/data/dataset/form/util'
 import { ShorthandMode } from '@/components/visualization/component-background/Types'
+import { formatterItem } from '@/views/chart/components/js/formatter'
 const dvMainStore = dvMainStoreWithOut()
 const {
   inMobile,
@@ -350,6 +351,24 @@ export function historyAdaptor(
   canvasStyleResult['dialogBackgroundColor'] = canvasStyleResult['dialogBackgroundColor'] || '#fff'
   canvasStyleResult['dialogButton'] = canvasStyleResult['dialogButton'] || '#020408'
 
+  canvasStyleResult['component']['formatterItem'] =
+    canvasStyleResult['component']['formatterItem'] || deepCopy(formatterItem)
+
+  canvasStyleResult.component.chartColor = {
+    ...canvasStyleResult.component.chartColor,
+    label: {
+      color: '#000000',
+      fontSize: 12,
+      ...(canvasStyleResult.component.chartColor?.label || {})
+    },
+    tooltip: {
+      color: '#000000',
+      fontSize: 12,
+      backgroundColor: '#FFFFFF',
+      ...(canvasStyleResult.component.chartColor?.tooltip || {})
+    }
+  }
+
   canvasDataResult.forEach(componentItem => {
     historyItemAdaptor(componentItem, reportFilterInfo, attachInfo, canvasVersion, canvasInfo)
   })