diff --git a/__tests__/integration/api-chart-change-data-legend.spec.ts b/__tests__/integration/api-chart-change-data-legend.spec.ts
new file mode 100644
index 0000000000..ea7a1bacc6
--- /dev/null
+++ b/__tests__/integration/api-chart-change-data-legend.spec.ts
@@ -0,0 +1,23 @@
+import { chartChangeDataLegend as render } from '../plots/api/chart-change-data-legend';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import { sleep } from './utils/sleep';
+import './utils/useSnapshotMatchers';
+
+describe('chart.changeData', () => {
+  const canvas = createNodeGCanvas(640, 480);
+
+  it('mark.changeSize(width, height) should rerender expected chart', async () => {
+    const { finished } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    const dir = `${__dirname}/snapshots/api`;
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, render.name);
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});
diff --git a/__tests__/integration/snapshots/api/chartChangeDataLegend.png b/__tests__/integration/snapshots/api/chartChangeDataLegend.png
new file mode 100644
index 0000000000..2bdd318e11
Binary files /dev/null and b/__tests__/integration/snapshots/api/chartChangeDataLegend.png differ
diff --git a/__tests__/integration/snapshots/api/markChangeData.png b/__tests__/integration/snapshots/api/markChangeData.png
index c5f5c16506..aafe80f36d 100644
Binary files a/__tests__/integration/snapshots/api/markChangeData.png and b/__tests__/integration/snapshots/api/markChangeData.png differ
diff --git a/__tests__/plots/api/chart-change-data-legend.ts b/__tests__/plots/api/chart-change-data-legend.ts
new file mode 100644
index 0000000000..7aab3d65fe
--- /dev/null
+++ b/__tests__/plots/api/chart-change-data-legend.ts
@@ -0,0 +1,43 @@
+import { Chart } from '../../../src';
+
+export function chartChangeDataLegend(context) {
+  const { container, canvas } = context;
+
+  const chart = new Chart({
+    theme: 'classic',
+    container,
+    canvas,
+  });
+
+  const data = [
+    { time: '10:10', call: 4, waiting: 2, people: 2, type: 'a' },
+    { time: '10:10', call: 2, waiting: 6, people: 3, type: 'b' },
+    { time: '10:20', call: 13, waiting: 2, people: 5, type: 'a' },
+    { time: '10:20', call: 9, waiting: 9, people: 1, type: 'b' },
+    { time: '10:30', call: 5, waiting: 2, people: 3, type: 'a' },
+    { time: '10:30', call: 8, waiting: 5, people: 1, type: 'b' },
+    { time: '10:40', call: 13, waiting: 1, people: 2, type: 'a' },
+    { time: '10:40', call: 13, waiting: 3, people: 2, type: 'b' },
+  ];
+
+  chart.options({
+    theme: 'classic',
+    type: 'interval',
+    data,
+    encode: {
+      x: 'time',
+      y: 'waiting',
+      color: 'type',
+    },
+    transform: [{ type: 'dodgeX' }],
+    labels: [{ text: 'type' }],
+  });
+
+  const finished = chart
+    .render()
+    .then((chart) =>
+      chart.changeData(data.sort((x, y) => (x.type > y.type ? -1 : 1))),
+    );
+
+  return { chart, finished };
+}
diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts
index 92ca7805f7..d1e47b9ff0 100644
--- a/__tests__/plots/api/index.ts
+++ b/__tests__/plots/api/index.ts
@@ -37,3 +37,4 @@ export { chartEmitScrollbarFilter } from './chart-emit-scrollbar-filter';
 export { chartOptionsCompositeMark } from './chart-options-composite-mark';
 export { chartEmitItemTooltipHideContent } from './chart-emit-item-tooltip-hide-content';
 export { chartEmitClickTooltip } from './chart-emit-click-tooltip';
+export { chartChangeDataLegend } from './chart-change-data-legend';