diff --git a/dashboard/src/components/panel/panel-render/client-panel-render.tsx b/dashboard/src/components/panel/panel-render/client-panel-render.tsx
index a5539f613..67164d8c9 100644
--- a/dashboard/src/components/panel/panel-render/client-panel-render.tsx
+++ b/dashboard/src/components/panel/panel-render/client-panel-render.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useDashboardContext } from '~/contexts';
 import { PanelRenderBase } from './panel-render-base';
 import { PanelVizFeatures } from './panel-viz-features';
@@ -14,7 +15,7 @@ export interface IClientPanelRenderProps {
  */
 export function ClientPanelRender(props: IClientPanelRenderProps) {
   const dashboardModel = useDashboardContext();
-  const panel = dashboardModel.content.panels.findByID(props.panelId);
+  const panel = useMemo(() => dashboardModel.content.panels.findByID(props.panelId), [props.panelId]);
   if (!panel) {
     return null;
   }
diff --git a/dashboard/src/components/panel/plugin-adaptor.tsx b/dashboard/src/components/panel/plugin-adaptor.tsx
index a440553f4..23533e54c 100644
--- a/dashboard/src/components/panel/plugin-adaptor.tsx
+++ b/dashboard/src/components/panel/plugin-adaptor.tsx
@@ -1,9 +1,12 @@
 import { Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useAsyncEffect } from 'ahooks';
+import { isEqual } from 'lodash';
 import React, { useContext, useEffect, useState } from 'react';
 import { MigrationResultType, MigrationStatus } from '~/components/plugins/instance-migrator';
 import { useServiceLocator } from '~/components/plugins/service/service-locator/use-service-locator';
+import { LayoutStateContext } from '../..';
+import { AnyObject, IVizConfig } from '../../types';
 import { IPanelInfo, tokens } from '../plugins';
 import {
   IConfigComponentProps,
@@ -11,8 +14,6 @@ import {
   VizConfigComponent,
   VizViewComponent,
 } from '../plugins/viz-manager/components';
-import { AnyObject, IVizConfig } from '../../types';
-import { LayoutStateContext } from '../..';
 
 function usePluginMigration(onMigrate?: () => void) {
   const [migrated, setMigrated] = useState(false);
@@ -46,8 +47,12 @@ type SetVizConfType = { setVizConf: (val: React.SetStateAction<IVizConfig['conf'
 
 function useSyncVizConf(setVizConf: SetVizConfType['setVizConf'], panel: IPanelInfo) {
   const instance = useServiceLocator().getRequired(tokens.instanceScope.vizInstance);
+  useAsyncEffect(async () => {
+    if (!isEqual(await instance.instanceData.getItem(null), panel.viz.conf)) {
+      await instance.instanceData.setItem(null, panel.viz.conf);
+    }
+  }, [instance, panel.viz.conf]);
   useEffect(() => {
-    instance.instanceData.setItem(null, panel.viz.conf);
     return instance.instanceData.watchItem<AnyObject>(null, (configData) => {
       setVizConf(configData);
     });
diff --git a/dashboard/src/components/panel/use-config-viz-instance-service.ts b/dashboard/src/components/panel/use-config-viz-instance-service.ts
index 413119995..340fd766f 100644
--- a/dashboard/src/components/panel/use-config-viz-instance-service.ts
+++ b/dashboard/src/components/panel/use-config-viz-instance-service.ts
@@ -8,6 +8,7 @@ import { NullInteractionManager } from '~/interactions/null-interaction-manager'
 
 export function useConfigVizInstanceService(panel: IPanelInfo, withInteraction = true) {
   const { panel: panelModel } = useRenderPanelContext();
+
   return useCallback(
     (services: IServiceLocator) => {
       const vizManager = services.getRequired(tokens.vizManager);
diff --git a/dashboard/src/components/plugins/index.ts b/dashboard/src/components/plugins/index.ts
index 0675945bd..15766c45e 100644
--- a/dashboard/src/components/plugins/index.ts
+++ b/dashboard/src/components/plugins/index.ts
@@ -3,3 +3,4 @@ export * from './plugin-context';
 export * from './plugin-data-migrator';
 export * from './hooks';
 export * from './color-manager';
+export { onVizRendered, notifyVizRendered } from './viz-components/viz-instance-api';
diff --git a/dashboard/src/components/plugins/viz-components/bar-3d-chart/viz-bar-3d-chart.tsx b/dashboard/src/components/plugins/viz-components/bar-3d-chart/viz-bar-3d-chart.tsx
index ac76e927f..fbc0bed8f 100644
--- a/dashboard/src/components/plugins/viz-components/bar-3d-chart/viz-bar-3d-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/bar-3d-chart/viz-bar-3d-chart.tsx
@@ -2,21 +2,15 @@ import ReactEChartsCore from 'echarts-for-react/lib/core';
 import 'echarts-gl';
 import * as echarts from 'echarts/core';
 import { defaults, get, maxBy, minBy } from 'lodash';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { useStorageData } from '~/components/plugins/hooks';
 import { DefaultVizBox, getBoxContentStyle } from '~/styles/viz-box';
 import { VizViewProps } from '~/types/plugin';
 import { extractFullQueryData, parseDataKey } from '~/utils';
 import { DEFAULT_CONFIG, IBar3dChartConf } from './type';
+import { notifyVizRendered } from '~/components/plugins/viz-components/viz-instance-api';
 
-const paddings = {
-  top: 16,
-  right: 16,
-  bottom: 16,
-  left: 16,
-};
-
-export function VizBar3dChart({ context }: VizViewProps) {
+export function VizBar3dChart({ context, instance }: VizViewProps) {
   const { value: conf } = useStorageData<IBar3dChartConf>(context.instanceData, 'config');
   const data = context.data;
   const { width, height } = context.viewport;
@@ -44,6 +38,17 @@ export function VizBar3dChart({ context }: VizViewProps) {
     };
   }, [queryData, z]);
 
+  const echartsInstanceRef = useRef<ReactEChartsCore>(null);
+  const handleEvents = useMemo(
+    () => ({
+      finished: () => {
+        const chart = echartsInstanceRef.current?.getEchartsInstance();
+        if (!chart) return;
+        notifyVizRendered(instance, chart.getOption());
+      },
+    }),
+    [],
+  );
   const option = {
     tooltip: {},
     backgroundColor: '#fff',
@@ -103,9 +108,11 @@ export function VizBar3dChart({ context }: VizViewProps) {
     <DefaultVizBox width={width} height={height}>
       <ReactEChartsCore
         echarts={echarts}
+        ref={echartsInstanceRef}
         option={option}
         style={getBoxContentStyle(width, height)}
         notMerge
+        onEvents={handleEvents}
         theme="merico-light"
       />
     </DefaultVizBox>
diff --git a/dashboard/src/components/plugins/viz-components/boxplot-chart/viz-boxplot-chart.tsx b/dashboard/src/components/plugins/viz-components/boxplot-chart/viz-boxplot-chart.tsx
index b53eb7e1c..47fbab2cc 100644
--- a/dashboard/src/components/plugins/viz-components/boxplot-chart/viz-boxplot-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/boxplot-chart/viz-boxplot-chart.tsx
@@ -2,7 +2,7 @@ import ReactEChartsCore from 'echarts-for-react/lib/core';
 import 'echarts-gl';
 import * as echarts from 'echarts/core';
 import _, { defaults } from 'lodash';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useStorageData } from '~/components/plugins/hooks';
 import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
 import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
@@ -12,6 +12,7 @@ import { getOption } from './option';
 import { ClickBoxplotSeries } from './triggers';
 import { DEFAULT_CONFIG, IBoxplotChartConf, IBoxplotDataItem } from './type';
 import { useTranslation } from 'react-i18next';
+import { notifyVizRendered } from '~/components/plugins/viz-components/viz-instance-api';
 
 interface IClickBoxplotSeries {
   type: 'click';
@@ -50,11 +51,19 @@ export function VizBoxplotChart({ context, instance }: VizViewProps) {
     [rowDataMap, triggers, interactionManager],
   );
 
+  const echartsInstanceRef = useRef<ReactEChartsCore>(null);
+  const handleFinished = useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, []);
+
   const onEvents = useMemo(() => {
     return {
       click: handleSeriesClick,
+      finished: handleFinished,
     };
-  }, [handleSeriesClick]);
+  }, [handleSeriesClick, handleFinished]);
 
   const option = useMemo(() => getOption({ config, data, variables, t }), [config, data, variables, t]);
 
@@ -66,6 +75,7 @@ export function VizBoxplotChart({ context, instance }: VizViewProps) {
       <ReactEChartsCore
         echarts={echarts}
         option={option}
+        ref={echartsInstanceRef}
         style={getBoxContentStyle(width, height)}
         onEvents={onEvents}
         notMerge
diff --git a/dashboard/src/components/plugins/viz-components/calendar-heatmap/viz-calendar-heatmap.tsx b/dashboard/src/components/plugins/viz-components/calendar-heatmap/viz-calendar-heatmap.tsx
index 9cf6da5be..3464d2212 100644
--- a/dashboard/src/components/plugins/viz-components/calendar-heatmap/viz-calendar-heatmap.tsx
+++ b/dashboard/src/components/plugins/viz-components/calendar-heatmap/viz-calendar-heatmap.tsx
@@ -1,17 +1,18 @@
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import _ from 'lodash';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { useStorageData } from '~/components/plugins/hooks';
 import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
 import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
 import { AnyObject } from '~/types';
-import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
+import { IVizInteractionManager, VizInstance, VizViewProps } from '~/types/plugin';
 import { ITemplateVariable } from '~/utils';
 import { getOption } from './option';
 import { ClickCalendarDate } from './triggers';
 import { DEFAULT_CONFIG, ICalendarHeatmapConf } from './type';
+import { notifyVizRendered } from '~/components/plugins/viz-components/viz-instance-api';
 
 interface IClickCalendarDate {
   type: 'click';
@@ -40,6 +41,7 @@ function Chart({
   height,
   interactionManager,
   variables,
+  instance,
 }: {
   conf: ICalendarHeatmapConf;
   data: TPanelData;
@@ -47,6 +49,7 @@ function Chart({
   height: number;
   interactionManager: IVizInteractionManager;
   variables: ITemplateVariable[];
+  instance: VizInstance;
 }) {
   const rowDataMap = useRowDataMap(data, conf.calendar.data_key);
 
@@ -65,13 +68,20 @@ function Chart({
     },
     [rowDataMap, triggers, interactionManager],
   );
+  const echartsInstanceRef = useRef<ReactEChartsCore>(null);
+  const handleFinished = useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
 
   const onEvents = useMemo(() => {
     return {
       click: handleHeatBlockClick,
       legendselectchanged: handleLegendSelected,
+      finished: handleFinished,
     };
-  }, [handleHeatBlockClick]);
+  }, [handleHeatBlockClick, handleFinished]);
 
   const option = React.useMemo(() => {
     return getOption(conf, data, variables);
@@ -81,6 +91,7 @@ function Chart({
     <ReactEChartsCore
       echarts={echarts}
       option={option}
+      ref={echartsInstanceRef}
       style={{ width, height }}
       onEvents={onEvents}
       notMerge
@@ -113,6 +124,7 @@ export function VizCalendarHeatmap({ context, instance }: VizViewProps) {
   return (
     <DefaultVizBox width={width} height={height}>
       <Chart
+        instance={instance}
         variables={variables}
         width={getBoxContentWidth(width)}
         height={getBoxContentHeight(height)}
diff --git a/dashboard/src/components/plugins/viz-components/cartesian/viz-cartesian-chart.tsx b/dashboard/src/components/plugins/viz-components/cartesian/viz-cartesian-chart.tsx
index 20ded79c4..4bbd50773 100644
--- a/dashboard/src/components/plugins/viz-components/cartesian/viz-cartesian-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/cartesian/viz-cartesian-chart.tsx
@@ -16,6 +16,7 @@ import { getOption } from './option';
 import { updateRegressionLinesColor } from './option/events';
 import { ClickEchartSeries } from './triggers/click-echart';
 import { DEFAULT_CONFIG, ICartesianChartConf } from './type';
+import { notifyVizRendered } from '~/components/plugins/viz-components/viz-instance-api';
 
 interface IClickEchartsSeries {
   type: 'click';
@@ -118,7 +119,7 @@ export const VizCartesianChart = observer(({ context, instance }: VizViewProps)
   const finalWidth = getBoxContentWidth(width);
 
   function handleChartRenderFinished(chartOptions: unknown) {
-    instance.messageChannels.getChannel('viz').emit('rendered', chartOptions);
+    notifyVizRendered(instance, chartOptions);
   }
 
   return (
diff --git a/dashboard/src/components/plugins/viz-components/funnel/viz-funnel-chart.tsx b/dashboard/src/components/plugins/viz-components/funnel/viz-funnel-chart.tsx
index d68c6e3ab..9246b323d 100644
--- a/dashboard/src/components/plugins/viz-components/funnel/viz-funnel-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/funnel/viz-funnel-chart.tsx
@@ -4,19 +4,55 @@ import { defaults } from 'lodash';
 import React, { useMemo } from 'react';
 import { useStorageData } from '~/components/plugins/hooks';
 import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
-import { VizViewProps } from '~/types/plugin';
+import { VizInstance, VizViewProps } from '~/types/plugin';
 import { getOption } from './option';
 import { DEFAULT_CONFIG, IFunnelConf } from './type';
+import { notifyVizRendered } from '~/components/plugins/viz-components/viz-instance-api';
 
-function Chart({ conf, data, width, height }: { conf: IFunnelConf; data: TPanelData; width: number; height: number }) {
+function Chart({
+  conf,
+  data,
+  width,
+  height,
+  instance,
+}: {
+  conf: IFunnelConf;
+  data: TPanelData;
+  width: number;
+  height: number;
+  instance: VizInstance;
+}) {
   const option = React.useMemo(() => {
     return getOption(conf, data);
   }, [conf, data]);
 
-  return <ReactEChartsCore echarts={echarts} option={option} style={{ width, height }} notMerge theme="merico-light" />;
+  const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
+  const handleFinished = React.useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
+  const onEvents = useMemo(
+    () => ({
+      finished: handleFinished,
+    }),
+    [handleFinished],
+  );
+
+  return (
+    <ReactEChartsCore
+      ref={echartsInstanceRef}
+      onEvents={onEvents}
+      echarts={echarts}
+      option={option}
+      style={{ width, height }}
+      notMerge
+      theme="merico-light"
+    />
+  );
 }
 
-export function VizFunnelChart({ context }: VizViewProps) {
+export function VizFunnelChart({ context, instance }: VizViewProps) {
   const { value: confValue } = useStorageData<IFunnelConf>(context.instanceData, 'config');
   const conf = useMemo(() => defaults({}, confValue, DEFAULT_CONFIG), [confValue]);
   const data = context.data;
@@ -28,7 +64,13 @@ export function VizFunnelChart({ context }: VizViewProps) {
 
   return (
     <DefaultVizBox width={width} height={height}>
-      <Chart width={getBoxContentWidth(width)} height={getBoxContentHeight(height)} data={data} conf={conf} />
+      <Chart
+        instance={instance}
+        width={getBoxContentWidth(width)}
+        height={getBoxContentHeight(height)}
+        data={data}
+        conf={conf}
+      />
     </DefaultVizBox>
   );
 }
diff --git a/dashboard/src/components/plugins/viz-components/heatmap/viz-heatmap.tsx b/dashboard/src/components/plugins/viz-components/heatmap/viz-heatmap.tsx
index e4d4fbb22..abc8ebc63 100644
--- a/dashboard/src/components/plugins/viz-components/heatmap/viz-heatmap.tsx
+++ b/dashboard/src/components/plugins/viz-components/heatmap/viz-heatmap.tsx
@@ -6,7 +6,7 @@ import { useStorageData } from '~/components/plugins/hooks';
 import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
 import { AnyObject } from '~/types';
-import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
+import { IVizInteractionManager, VizInstance, VizViewProps } from '~/types/plugin';
 import { ITemplateVariable, parseDataKey } from '~/utils';
 import { HeatmapPagination } from './heatmap-pagination';
 import { getOption } from './option';
@@ -14,6 +14,7 @@ import { useHeatmapGroupedData } from './render/use-heatmap-grouped-data';
 import { SeriesDataItem, useHeatmapSeriesData } from './render/use-heatmap-series-data';
 import { ClickHeatBlock } from './triggers';
 import { DEFAULT_CONFIG, IHeatmapConf } from './type';
+import { notifyVizRendered } from '~/components/plugins/viz-components/viz-instance-api';
 
 interface IClickHeatBlock {
   type: 'click';
@@ -34,6 +35,7 @@ function Chart({
   height,
   interactionManager,
   variables,
+  instance,
 }: {
   conf: IHeatmapConf;
   data: TPanelData;
@@ -42,6 +44,7 @@ function Chart({
   height: number;
   interactionManager: IVizInteractionManager;
   variables: ITemplateVariable[];
+  instance: VizInstance;
 }) {
   const rowDataMap = useMemo(() => {
     const x = parseDataKey(conf.x_axis.data_key);
@@ -61,12 +64,19 @@ function Chart({
     },
     [rowDataMap, triggers, interactionManager],
   );
+  const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
+  const handleFinished = useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
 
   const onEvents = useMemo(() => {
     return {
       click: handleHeatBlockClick,
+      finished: handleFinished,
     };
-  }, [handleHeatBlockClick]);
+  }, [handleHeatBlockClick, handleFinished]);
 
   const option = React.useMemo(() => {
     return getOption(conf, data, seriesData, variables, width, height);
@@ -77,6 +87,7 @@ function Chart({
       echarts={echarts}
       option={option}
       style={{ width, height }}
+      ref={echartsInstanceRef}
       onEvents={onEvents}
       notMerge
       theme="merico-light"
@@ -109,6 +120,7 @@ export function VizHeatmap({ context, instance }: VizViewProps) {
         <HeatmapPagination page={page} setPage={setPage} totalPages={totalPages} width={width} />
       )}
       <Chart
+        instance={instance}
         variables={variables}
         width={getBoxContentWidth(width)}
         height={getBoxContentHeight(height)}
diff --git a/dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx b/dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx
index 27cadf5d5..dc6274c2e 100644
--- a/dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx
@@ -6,11 +6,12 @@ import { useStorageData } from '~/components/plugins/hooks';
 import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
 import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
-import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
+import { IVizInteractionManager, VizInstance, VizViewProps } from '~/types/plugin';
 import { ITemplateVariable } from '~/utils';
 import { ClickEchartSeries } from '../cartesian/triggers';
 import { getOption } from './option';
 import { DEFAULT_CONFIG, IHorizontalBarChartConf } from './type';
+import { notifyVizRendered } from '../viz-instance-api';
 
 interface IClickEchartsSeries {
   type: 'click';
@@ -29,6 +30,7 @@ function Chart({
   height,
   interactionManager,
   variables,
+  instance,
 }: {
   conf: IHorizontalBarChartConf;
   data: TPanelData;
@@ -36,6 +38,7 @@ function Chart({
   height: number;
   interactionManager: IVizInteractionManager;
   variables: ITemplateVariable[];
+  instance: VizInstance;
 }) {
   const rowDataMap = useRowDataMap(data, conf.y_axis.data_key);
 
@@ -54,9 +57,16 @@ function Chart({
     [rowDataMap, triggers, interactionManager],
   );
 
+  const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
+  const handleFinished = React.useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
   const onEvents = useMemo(() => {
     return {
       click: handleSeriesClick,
+      finished: handleFinished,
     };
   }, [handleSeriesClick]);
 
@@ -68,6 +78,7 @@ function Chart({
     <ReactEChartsCore
       echarts={echarts}
       option={option}
+      ref={echartsInstanceRef}
       style={{ width, height }}
       onEvents={onEvents}
       notMerge
@@ -94,6 +105,7 @@ export function VizHorizontalBarChart({ context, instance }: VizViewProps) {
   return (
     <DefaultVizBox width={width} height={height}>
       <Chart
+        instance={instance}
         variables={variables}
         width={getBoxContentWidth(width)}
         height={getBoxContentHeight(height)}
diff --git a/dashboard/src/components/plugins/viz-components/merico-estimation-chart/viz-merico-estimation-chart.tsx b/dashboard/src/components/plugins/viz-components/merico-estimation-chart/viz-merico-estimation-chart.tsx
index eead15459..55562248a 100644
--- a/dashboard/src/components/plugins/viz-components/merico-estimation-chart/viz-merico-estimation-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/merico-estimation-chart/viz-merico-estimation-chart.tsx
@@ -5,10 +5,11 @@ import { defaults } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useStorageData } from '~/components/plugins/hooks';
 import { getBoxContentHeight, getBoxContentWidth, paddings } from '~/styles/viz-box';
-import { VizViewProps } from '~/types/plugin';
+import { VizInstance, VizViewProps } from '~/types/plugin';
 import { getOption } from './option';
 import { Toolbox } from './toolbox';
 import { DEFAULT_CONFIG, IMericoEstimationChartConf } from './type';
+import { notifyVizRendered } from '../viz-instance-api';
 
 function Chart({
   conf,
@@ -16,21 +17,44 @@ function Chart({
   width,
   height,
   metricKey,
+  instance,
 }: {
   conf: IMericoEstimationChartConf;
   data: TPanelData;
   width: number;
   height: number;
   metricKey: string;
+  instance: VizInstance;
 }) {
   const option = React.useMemo(() => {
     return getOption(conf, metricKey, data);
   }, [conf, data, metricKey]);
 
-  return <ReactEChartsCore echarts={echarts} option={option} style={{ width, height }} notMerge theme="merico-light" />;
+  const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
+  const handleFinished = React.useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
+  const onEvents = useMemo(() => {
+    return {
+      finished: handleFinished,
+    };
+  }, [handleFinished]);
+  return (
+    <ReactEChartsCore
+      ref={echartsInstanceRef}
+      onEvents={onEvents}
+      echarts={echarts}
+      option={option}
+      style={{ width, height }}
+      notMerge
+      theme="merico-light"
+    />
+  );
 }
 
-export function VizMericoEstimationChart({ context }: VizViewProps) {
+export function VizMericoEstimationChart({ context, instance }: VizViewProps) {
   const { value: confValue } = useStorageData<IMericoEstimationChartConf>(context.instanceData, 'config');
   const conf = useMemo(() => defaults({}, confValue, DEFAULT_CONFIG), [confValue]);
   const data = context.data;
@@ -59,7 +83,14 @@ export function VizMericoEstimationChart({ context }: VizViewProps) {
       sx={{ overflow: 'hidden', height, width }}
     >
       <Toolbox conf={conf} metricKey={metricKey} setMetricKey={setMetricKey} />
-      <Chart width={finalWidth} height={finalHeight - 30} data={data} conf={conf} metricKey={metricKey} />
+      <Chart
+        instance={instance}
+        width={finalWidth}
+        height={finalHeight - 30}
+        data={data}
+        conf={conf}
+        metricKey={metricKey}
+      />
     </Box>
   );
 }
diff --git a/dashboard/src/components/plugins/viz-components/merico-heatmap/render/index.tsx b/dashboard/src/components/plugins/viz-components/merico-heatmap/render/index.tsx
index 36e2fc457..c644f8bda 100644
--- a/dashboard/src/components/plugins/viz-components/merico-heatmap/render/index.tsx
+++ b/dashboard/src/components/plugins/viz-components/merico-heatmap/render/index.tsx
@@ -6,8 +6,9 @@ import { useStorageData } from '~/components/plugins/hooks';
 import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
 import { AnyObject } from '~/types';
-import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
+import { IVizInteractionManager, VizInstance, VizViewProps } from '~/types/plugin';
 import { ITemplateVariable, parseDataKey } from '~/utils';
+import { notifyVizRendered } from '../../viz-instance-api';
 import { ClickHeatBlock } from '../triggers';
 import { DEFAULT_CONFIG, TMericoHeatmapConf } from '../type';
 import { getOption } from './option';
@@ -30,6 +31,7 @@ function Chart({
   height,
   interactionManager,
   variables,
+  instance,
 }: {
   conf: TMericoHeatmapConf;
   data: TPanelData;
@@ -37,6 +39,7 @@ function Chart({
   height: number;
   interactionManager: IVizInteractionManager;
   variables: ITemplateVariable[];
+  instance: VizInstance;
 }) {
   const rowDataMap = useMemo(() => {
     const x = parseDataKey(conf.x_axis.data_key);
@@ -57,11 +60,18 @@ function Chart({
     [rowDataMap, triggers, interactionManager],
   );
 
+  const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
+  const handleFinished = useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
   const onEvents = useMemo(() => {
     return {
       click: handleHeatBlockClick,
+      finished: handleFinished,
     };
-  }, [handleHeatBlockClick]);
+  }, [handleHeatBlockClick, handleFinished]);
 
   const option = React.useMemo(() => {
     return getOption(conf, data, variables);
@@ -71,6 +81,7 @@ function Chart({
     <ReactEChartsCore
       echarts={echarts}
       option={option}
+      ref={echartsInstanceRef}
       style={{ width, height }}
       onEvents={onEvents}
       notMerge
@@ -98,6 +109,7 @@ export function RenderMericoHeatmap({ context, instance }: VizViewProps) {
   return (
     <DefaultVizBox width={width} height={height}>
       <Chart
+        instance={instance}
         variables={variables}
         width={getBoxContentWidth(width)}
         height={getBoxContentHeight(height)}
diff --git a/dashboard/src/components/plugins/viz-components/pareto-chart/viz-pareto-chart.tsx b/dashboard/src/components/plugins/viz-components/pareto-chart/viz-pareto-chart.tsx
index 0ebc1617b..d00f09065 100644
--- a/dashboard/src/components/plugins/viz-components/pareto-chart/viz-pareto-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/pareto-chart/viz-pareto-chart.tsx
@@ -1,12 +1,13 @@
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import _, { defaults } from 'lodash';
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
 import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { DefaultVizBox, getBoxContentStyle } from '~/styles/viz-box';
 import { VizViewProps } from '~/types/plugin';
 import { useStorageData } from '../../hooks';
+import { notifyVizRendered } from '../viz-instance-api';
 import { getOption } from './option';
 import { ClickParetoSeries } from './triggers';
 import { DEFAULT_CONFIG, IParetoChartConf } from './type';
@@ -49,11 +50,18 @@ export function VizParetoChart({ context, instance }: VizViewProps) {
     [rowDataMap, triggers, interactionManager],
   );
 
+  const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
+  const handleFinished = useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
   const onEvents = useMemo(() => {
     return {
       click: handleSeriesClick,
+      finished: handleFinished,
     };
-  }, [handleSeriesClick]);
+  }, [handleSeriesClick, handleFinished]);
 
   if (!conf || !width || !height) {
     return null;
@@ -63,6 +71,7 @@ export function VizParetoChart({ context, instance }: VizViewProps) {
       <ReactEChartsCore
         echarts={echarts}
         option={option}
+        ref={echartsInstanceRef}
         style={getBoxContentStyle(width, height)}
         onEvents={onEvents}
         notMerge
diff --git a/dashboard/src/components/plugins/viz-components/pie-chart/viz-pie-chart.tsx b/dashboard/src/components/plugins/viz-components/pie-chart/viz-pie-chart.tsx
index ae182e0dd..0c0edc1a3 100644
--- a/dashboard/src/components/plugins/viz-components/pie-chart/viz-pie-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/pie-chart/viz-pie-chart.tsx
@@ -6,7 +6,8 @@ import { useStorageData } from '~/components/plugins/hooks';
 import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
 import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
-import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
+import { IVizInteractionManager, VizInstance, VizViewProps } from '~/types/plugin';
+import { notifyVizRendered } from '../viz-instance-api';
 import { getOption } from './option';
 import { ClickPieChart } from './triggers';
 import { DEFAULT_CONFIG, IPieChartConf } from './type';
@@ -20,18 +21,21 @@ interface IClickEchartsSeries {
   color: string;
   value: string; // string-typed number
 }
+
 function Chart({
   conf,
   data,
   width,
   height,
   interactionManager,
+  instance,
 }: {
   conf: IPieChartConf;
   data: TPanelData;
   width: number;
   height: number;
   interactionManager: IVizInteractionManager;
+  instance: VizInstance;
 }) {
   const rowDataMap = useRowDataMap(data, conf.label_field);
 
@@ -47,6 +51,13 @@ function Chart({
     [rowDataMap, triggers, interactionManager],
   );
 
+  const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
+  const handleFinished = React.useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
+
   const option = React.useMemo(() => {
     return getOption(conf, data, width);
   }, [conf, data, width]);
@@ -54,8 +65,9 @@ function Chart({
   const onEvents = useMemo(() => {
     return {
       click: handleSeriesClick,
+      finished: handleFinished,
     };
-  }, [handleSeriesClick]);
+  }, [handleSeriesClick, handleFinished]);
 
   if (!width || !height || !option.series.name) {
     return null;
@@ -64,6 +76,7 @@ function Chart({
     <ReactEChartsCore
       echarts={echarts}
       option={option}
+      ref={echartsInstanceRef}
       style={{ width, height }}
       onEvents={onEvents}
       notMerge
@@ -71,6 +84,7 @@ function Chart({
     />
   );
 }
+
 export function VizPieChart({ context, instance }: VizViewProps) {
   const interactionManager = useCurrentInteractionManager({
     vizManager: context.vizManager,
@@ -87,6 +101,7 @@ export function VizPieChart({ context, instance }: VizViewProps) {
   return (
     <DefaultVizBox width={width} height={height}>
       <Chart
+        instance={instance}
         conf={conf}
         width={getBoxContentWidth(width)}
         height={getBoxContentHeight(height)}
diff --git a/dashboard/src/components/plugins/viz-components/radar-chart/viz-radar-chart.tsx b/dashboard/src/components/plugins/viz-components/radar-chart/viz-radar-chart.tsx
index 2aff5e035..7d65401b0 100644
--- a/dashboard/src/components/plugins/viz-components/radar-chart/viz-radar-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/radar-chart/viz-radar-chart.tsx
@@ -1,13 +1,14 @@
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import _, { defaultsDeep, isEmpty } from 'lodash';
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useStorageData } from '~/components/plugins/hooks';
 import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
 import { AnyObject } from '~/types';
-import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
+import { IVizInteractionManager, VizInstance, VizViewProps } from '~/types/plugin';
 import { ITemplateVariable, parseDataKey } from '~/utils';
+import { notifyVizRendered } from '../viz-instance-api';
 import { getOption } from './option';
 import { ClickRadarChartSeries } from './triggers/click-radar-chart';
 import { DEFAULT_CONFIG, IRadarChartConf } from './type';
@@ -29,6 +30,7 @@ function Chart({
   height,
   interactionManager,
   variables,
+  instance,
 }: {
   conf: IRadarChartConf;
   data: TPanelData;
@@ -36,6 +38,7 @@ function Chart({
   height: number;
   interactionManager: IVizInteractionManager;
   variables: ITemplateVariable[];
+  instance: VizInstance;
 }) {
   const rowDataMap = useMemo(() => {
     const { queryID, columnKey } = parseDataKey(conf.series_name_key);
@@ -50,6 +53,13 @@ function Chart({
 
   const triggers = useTriggerSnapshotList<IRadarChartConf>(interactionManager.triggerManager, ClickRadarChartSeries.id);
 
+  const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
+  const handleFinished = React.useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
+
   const handleRadarSeriesClick = useCallback(
     (params: IClickRadarSeries) => {
       const rowData = _.get(rowDataMap, params.name, { error: 'rowData is not found' });
@@ -63,6 +73,7 @@ function Chart({
   const onEvents = useMemo(() => {
     return {
       click: handleRadarSeriesClick,
+      finished: handleFinished,
     };
   }, [handleRadarSeriesClick]);
 
@@ -77,6 +88,7 @@ function Chart({
     <ReactEChartsCore
       echarts={echarts}
       option={option}
+      ref={echartsInstanceRef}
       style={{ width, height }}
       onEvents={onEvents}
       notMerge
@@ -103,6 +115,7 @@ export function VizRadarChart({ context, instance }: VizViewProps) {
   return (
     <DefaultVizBox width={width} height={height}>
       <Chart
+        instance={instance}
         variables={variables}
         width={getBoxContentWidth(width)}
         height={getBoxContentHeight(height)}
diff --git a/dashboard/src/components/plugins/viz-components/regression-chart/viz-regression-chart.tsx b/dashboard/src/components/plugins/viz-components/regression-chart/viz-regression-chart.tsx
index efefcf8ee..80fbbfd30 100644
--- a/dashboard/src/components/plugins/viz-components/regression-chart/viz-regression-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/regression-chart/viz-regression-chart.tsx
@@ -2,16 +2,17 @@ import { EChartsInstance } from 'echarts-for-react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import { defaultsDeep } from 'lodash';
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useStorageData } from '~/components/plugins/hooks';
 import { DefaultVizBox, getBoxContentStyle } from '~/styles/viz-box';
 import { VizViewProps } from '~/types/plugin';
 import { parseDataKey } from '~/utils';
+import { notifyVizRendered } from '../viz-instance-api';
 import { getOption } from './option';
 import { Toolbox } from './toolbox';
 import { DEFAULT_CONFIG, IRegressionChartConf } from './type';
 
-export function VizRegressionChart({ context }: VizViewProps) {
+export function VizRegressionChart({ context, instance }: VizViewProps) {
   const { value: conf } = useStorageData<IRegressionChartConf>(context.instanceData, 'config');
   const { width, height } = context.viewport;
 
@@ -45,6 +46,17 @@ export function VizRegressionChart({ context }: VizViewProps) {
   const onChartReady = (echartsInstance: EChartsInstance) => {
     echartsRef.current = echartsInstance;
   };
+  const handleFinished = useCallback(() => {
+    const chart = echartsRef.current;
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
+  const onEvents = useMemo(
+    () => ({
+      finished: handleFinished,
+    }),
+    [handleFinished],
+  );
 
   if (!width || !height || !conf) {
     return null;
@@ -56,6 +68,7 @@ export function VizRegressionChart({ context }: VizViewProps) {
         echarts={echarts}
         onChartReady={onChartReady}
         option={option}
+        onEvents={onEvents}
         style={getBoxContentStyle(width, height)}
         notMerge
         theme="merico-light"
diff --git a/dashboard/src/components/plugins/viz-components/scatter-chart/viz-scatter-chart.tsx b/dashboard/src/components/plugins/viz-components/scatter-chart/viz-scatter-chart.tsx
index e6b2a1120..df20ebddb 100644
--- a/dashboard/src/components/plugins/viz-components/scatter-chart/viz-scatter-chart.tsx
+++ b/dashboard/src/components/plugins/viz-components/scatter-chart/viz-scatter-chart.tsx
@@ -7,9 +7,10 @@ import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
 import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
 import { AnyObject } from '~/types';
-import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
+import { IVizInteractionManager, VizInstance, VizViewProps } from '~/types/plugin';
 import { ITemplateVariable } from '~/utils';
 import { StatsAroundViz } from '../../common-echarts-fields/stats-around-viz';
+import { notifyVizRendered } from '../viz-instance-api';
 import { getOption } from './option';
 import { ClickScatterChartSeries } from './triggers';
 import { DEFAULT_CONFIG, IScatterChartConf } from './type';
@@ -32,6 +33,7 @@ function Chart({
   height,
   interactionManager,
   variables,
+  instance,
 }: {
   conf: IScatterChartConf;
   data: TPanelData;
@@ -39,6 +41,7 @@ function Chart({
   height: number;
   interactionManager: IVizInteractionManager;
   variables: ITemplateVariable[];
+  instance: VizInstance;
 }) {
   const rowDataMap = useRowDataMap(data, conf.x_axis.data_key);
 
@@ -57,11 +60,19 @@ function Chart({
     [rowDataMap, triggers, interactionManager],
   );
 
+  const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
+  const handleFinished = React.useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
+
   const onEvents = useMemo(() => {
     return {
       click: handleSeriesClick,
+      finished: handleFinished,
     };
-  }, [handleSeriesClick]);
+  }, [handleSeriesClick, handleFinished]);
 
   const option = React.useMemo(() => {
     return getOption(conf, data, variables);
@@ -71,6 +82,7 @@ function Chart({
     <ReactEChartsCore
       echarts={echarts}
       option={option}
+      ref={echartsInstanceRef}
       style={{ width, height }}
       onEvents={onEvents}
       notMerge
@@ -104,6 +116,7 @@ export function VizScatterChart({ context, instance }: VizViewProps) {
       <StatsAroundViz onHeightChange={setTopStatsHeight} value={conf.stats.top} context={context} />
 
       <Chart
+        instance={instance}
         variables={variables}
         width={finalWidth}
         height={finalHeight}
diff --git a/dashboard/src/components/plugins/viz-components/sunburst/viz-sunburst.tsx b/dashboard/src/components/plugins/viz-components/sunburst/viz-sunburst.tsx
index 70040129c..252853ae6 100644
--- a/dashboard/src/components/plugins/viz-components/sunburst/viz-sunburst.tsx
+++ b/dashboard/src/components/plugins/viz-components/sunburst/viz-sunburst.tsx
@@ -1,15 +1,16 @@
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import { defaults } from 'lodash';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { useStorageData } from '~/components/plugins/hooks';
 import { DefaultVizBox, getBoxContentStyle } from '~/styles/viz-box';
 import { VizViewProps } from '~/types/plugin';
+import { notifyVizRendered } from '../viz-instance-api';
 import { getOption } from './option';
 import { DEFAULT_CONFIG, ISunburstConf } from './type';
 
-export function VizSunburst({ context }: VizViewProps) {
+export function VizSunburst({ context, instance }: VizViewProps) {
   const { variables } = context;
   const { value: confValue } = useStorageData<ISunburstConf>(context.instanceData, 'config');
   const conf = useMemo(() => defaults({}, confValue, DEFAULT_CONFIG), [confValue]);
@@ -17,6 +18,19 @@ export function VizSunburst({ context }: VizViewProps) {
   const data = context.data;
   const { width, height } = context.viewport;
 
+  const echartsInstanceRef = React.useRef<ReactEChartsCore>(null);
+  const handleFinished = React.useCallback(() => {
+    const chart = echartsInstanceRef.current?.getEchartsInstance();
+    if (!chart) return;
+    notifyVizRendered(instance, chart.getOption());
+  }, [instance]);
+  const onEvents = useMemo(
+    () => ({
+      finished: handleFinished,
+    }),
+    [handleFinished],
+  );
+
   const option = useMemo(() => getOption(conf, data, variables), [conf, data, variables]);
 
   if (!width || !height) {
@@ -27,6 +41,8 @@ export function VizSunburst({ context }: VizViewProps) {
       <ReactEChartsCore
         echarts={echarts}
         option={option}
+        ref={echartsInstanceRef}
+        onEvents={onEvents}
         style={getBoxContentStyle(width, height)}
         notMerge
         theme="merico-light"
diff --git a/dashboard/src/components/plugins/viz-components/viz-instance-api.ts b/dashboard/src/components/plugins/viz-components/viz-instance-api.ts
new file mode 100644
index 000000000..c7ab9e530
--- /dev/null
+++ b/dashboard/src/components/plugins/viz-components/viz-instance-api.ts
@@ -0,0 +1,27 @@
+import { VizInstance } from '~/types/plugin';
+import { IPanelInfo } from '~/components/plugins';
+
+/**
+ * Emit viz rendered event
+ * @param instance
+ * @param data
+ */
+export function notifyVizRendered(instance: VizInstance, data: unknown) {
+  instance.messageChannels.getChannel('viz').emit('rendered', data);
+}
+
+export interface IVizRenderedPayload {
+  panel: IPanelInfo;
+}
+
+/**
+ * Subscribe to viz rendered event of a viz instance
+ * @param instance
+ * @param callback
+ */
+export function onVizRendered(instance: VizInstance, callback: (data: unknown) => void) {
+  instance.messageChannels.getChannel('viz').on('rendered', callback);
+  return () => {
+    instance.messageChannels.getChannel('viz').off('rendered', callback);
+  };
+}
diff --git a/dashboard/src/index.ts b/dashboard/src/index.ts
index c295fc13f..236dc3b38 100644
--- a/dashboard/src/index.ts
+++ b/dashboard/src/index.ts
@@ -29,5 +29,5 @@ export interface IDashboardConfig {
   searchButtonProps: ButtonProps;
 }
 
-export { pluginManager } from './components/plugins';
+export { pluginManager, onVizRendered, notifyVizRendered } from './components/plugins';
 export { type IPanelAddon, type IPanelAddonRenderProps } from './types/plugin';
diff --git a/dashboard/src/model/meta-model/dashboard/content/panel/viz.ts b/dashboard/src/model/meta-model/dashboard/content/panel/viz.ts
index 650717885..b78f74181 100644
--- a/dashboard/src/model/meta-model/dashboard/content/panel/viz.ts
+++ b/dashboard/src/model/meta-model/dashboard/content/panel/viz.ts
@@ -1,3 +1,4 @@
+import { isEqual } from 'lodash';
 import { types } from 'mobx-state-tree';
 import { AnyObject } from '~/types';
 
@@ -19,6 +20,7 @@ export const PanelVizMeta = types
       self.type = type;
     },
     setConf(conf: AnyObject) {
+      if (isEqual(self.conf, conf)) return;
       self.conf = conf;
     },
   }));