diff --git a/__tests__/integration/snapshots/interaction/unemployment-area-legend-filter-pages/step0.png b/__tests__/integration/snapshots/interaction/unemployment-area-legend-filter-pages/step0.png
new file mode 100644
index 0000000000..08371a5fc6
Binary files /dev/null and b/__tests__/integration/snapshots/interaction/unemployment-area-legend-filter-pages/step0.png differ
diff --git a/__tests__/plots/interaction/index.ts b/__tests__/plots/interaction/index.ts
index 4267ecaff8..8b0eb2b04d 100644
--- a/__tests__/plots/interaction/index.ts
+++ b/__tests__/plots/interaction/index.ts
@@ -63,3 +63,4 @@ export { penguinsPointBrushHandleCustom } from './penguins-point-brush-handle-cu
 export { unemploymentChoropleth } from './unemployment-choropleth';
 export { weatherLineLegendMark } from './weather-line-legend-mark';
 export { countriesAnnotationSliderFilter } from './countries-annotation-slider-filter';
+export { unemploymentAreaLegendFilterPages } from './unemployment-area-legend-filter-pages';
diff --git a/__tests__/plots/interaction/unemployment-area-legend-filter-pages.ts b/__tests__/plots/interaction/unemployment-area-legend-filter-pages.ts
new file mode 100644
index 0000000000..54b48c9ed8
--- /dev/null
+++ b/__tests__/plots/interaction/unemployment-area-legend-filter-pages.ts
@@ -0,0 +1,31 @@
+import { G2Spec } from '../../../src';
+import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter';
+import { step } from './utils';
+
+export function unemploymentAreaLegendFilterPages(): G2Spec {
+  return {
+    width: 800,
+    type: 'area',
+    data: {
+      type: 'fetch',
+      value: 'data/unemployment-by-industry.csv',
+    },
+    transform: [{ type: 'stackY' }],
+    encode: {
+      x: 'date',
+      y: 'unemployed',
+      color: 'industry',
+    },
+    interaction: { tooltip: false },
+  };
+}
+
+unemploymentAreaLegendFilterPages.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const [, page] = document.getElementsByClassName('items-item-page');
+  const elements = page.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME);
+  const [e0] = elements;
+  return [step(e0, 'click')];
+};
+
+unemploymentAreaLegendFilterPages.maxError = 200;
diff --git a/src/interaction/legendFilter.ts b/src/interaction/legendFilter.ts
index 84f6fcd1f1..2ad3a495ba 100644
--- a/src/interaction/legendFilter.ts
+++ b/src/interaction/legendFilter.ts
@@ -196,12 +196,15 @@ export function LegendFilter() {
         ];
         return deepMix({}, mark, {
           transform: newTransform,
-          // Set domain of scale to preserve legends.
+          //Set domain of scale to preserve legends.
           scale: {
             [channel]: {
               domain: scaleOrdinal.getOptions().domain,
             },
           },
+          legend: {
+            [channel]: { preserve: true },
+          },
         });
       });
       const newOptions = {