diff --git a/core/core-frontend/src/custom-component/common/CanvasGroup.vue b/core/core-frontend/src/custom-component/common/CanvasGroup.vue
index 5b2f3bd66b..f8d1d16a51 100644
--- a/core/core-frontend/src/custom-component/common/CanvasGroup.vue
+++ b/core/core-frontend/src/custom-component/common/CanvasGroup.vue
@@ -77,6 +77,7 @@ const { element, isEdit, showPosition, canvasStyleData, canvasViewInfo, dvInfo,
     :prop-value="element.propValue"
     :show-position="showPosition"
     :scale="scale * 100"
+    :canvas-view-info="canvasViewInfo"
   ></group-preview>
 </template>
 
diff --git a/core/core-frontend/src/custom-component/group/Component.vue b/core/core-frontend/src/custom-component/group/Component.vue
index 95870a5e99..65cee0a41a 100644
--- a/core/core-frontend/src/custom-component/group/Component.vue
+++ b/core/core-frontend/src/custom-component/group/Component.vue
@@ -6,7 +6,7 @@ import CanvasGroup from '@/custom-component/common/CanvasGroup.vue'
 import { deepCopy } from '@/utils/utils'
 import { DEFAULT_CANVAS_STYLE_DATA_DARK } from '@/views/chart/components/editor/util/dataVisualiztion'
 const dvMainStore = dvMainStoreWithOut()
-const { canvasViewInfo, canvasStyleData, curComponent } = storeToRefs(dvMainStore)
+const { canvasStyleData, curComponent } = storeToRefs(dvMainStore)
 const sourceCanvasStyle = deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK)
 
 const props = defineProps({
@@ -50,10 +50,14 @@ const props = defineProps({
   active: {
     type: Boolean,
     default: false
+  },
+  canvasViewInfo: {
+    type: Object,
+    required: true
   }
 })
 
-const { propValue, dvInfo, element, scale } = toRefs(props)
+const { propValue, dvInfo, element, scale, canvasViewInfo } = toRefs(props)
 const customCanvasStyle = computed(() => {
   const result = sourceCanvasStyle
   result.scale = canvasStyleData.value.scale
diff --git a/core/core-frontend/src/custom-component/group/GroupPreview.vue b/core/core-frontend/src/custom-component/group/GroupPreview.vue
index 2d577ae8a6..41026a54f8 100644
--- a/core/core-frontend/src/custom-component/group/GroupPreview.vue
+++ b/core/core-frontend/src/custom-component/group/GroupPreview.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { toRefs } from 'vue'
-import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { storeToRefs } from 'pinia'
 import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
 import { toPercent } from '@/utils/translate'
-const dvMainStore = dvMainStoreWithOut()
-const { canvasViewInfo } = storeToRefs(dvMainStore)
 
 const props = defineProps({
   propValue: {
@@ -39,10 +35,14 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 1
+  },
+  canvasViewInfo: {
+    type: Object,
+    required: true
   }
 })
 
-const { propValue, dvInfo, searchCount, scale } = toRefs(props)
+const { propValue, dvInfo, searchCount, scale, canvasViewInfo } = toRefs(props)
 
 const customGroupStyle = item => {
   return {