Merge pull request #4624 from VisActor/fix/restore-axis-grid-after-update

fix: restore axis grid after visibility update

Author: xuefei1313

common/changes/@visactor/vchart/fix-restore-axis-grid-after-update_2026-07-15.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: restore existing axis grid graphics when grid visibility is enabled again through updateSpec with animation disabled",
+      "type": "patch",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "lixuef1313@163.com"
+}

packages/vchart/__tests__/unit/core/update-effects.test.ts

@@ -40,6 +40,7 @@ type TestChartModel = {
   getComponentsByKey: (key: string) => Array<{
     position?: string;
     getOrient?: () => string;
+    getVRenderComponents?: () => TestVRenderGraphic[];
     getScale?: () => { domain: () => unknown[] };
     getTickData?: () => {
       getDataView: () => {
@@ -52,6 +53,15 @@ type TestChartModel = {
   reDataFlow: () => void;
 };
 
+type TestVRenderGraphic = {
+  name?: string;
+  attribute?: {
+    visible?: boolean;
+    visibleAll?: boolean;
+  };
+  forEachChildren?: (cb: (child: TestVRenderGraphic) => void) => void;
+};
+
 const getChartModel = (chart: VChart) => chart.getChart() as unknown as TestChartModel;
 
 const spyOnDataStages = (chart: VChart) => {
@@ -261,6 +271,29 @@ const createAxisElementVisibleSpec = (element: AxisVisibleElement, visible: bool
   ]
 });
 
+const createLineAxisGridVisibleSpec = (gridVisible: boolean, animation: boolean): ILineChartSpec =>
+  ({
+    type: 'line',
+    animation,
+    data: [
+      {
+        id: 'data',
+        values: [
+          { x: 'A', y: 11 },
+          { x: 'B', y: 12 },
+          { x: 'C', y: 23 },
+          { x: 'D', y: 14 }
+        ]
+      }
+    ],
+    xField: 'x',
+    yField: 'y',
+    axes: [
+      { orient: 'left', grid: { visible: gridVisible } },
+      { orient: 'bottom', grid: { visible: gridVisible } }
+    ]
+  } as ILineChartSpec);
+
 const createLegendAppearanceSpec = (
   labelFill: string,
   position: 'start' | 'middle' | 'end' = 'middle',
@@ -1282,6 +1315,55 @@ const getAxisTickTransformOptions = (chart: VChart, orient: 'angle' | 'radius')
   return tickTransform?.options as { startAngle?: number };
 };
 
+const findAxisGridComponent = (chart: VChart, orient: 'left' | 'bottom') => {
+  const axis = getChartModel(chart)
+    .getComponentsByKey('axes')
+    .find(axisItem => axisItem.getOrient?.() === orient);
+
+  return axis?.getVRenderComponents?.()[1];
+};
+
+const getAxisGridComponent = (chart: VChart, orient: 'left' | 'bottom') => {
+  const gridComponent = findAxisGridComponent(chart, orient);
+  expect(gridComponent).toBeDefined();
+
+  return gridComponent as TestVRenderGraphic;
+};
+
+const collectGraphicsByName = (graphic: TestVRenderGraphic, name: string) => {
+  const graphics: TestVRenderGraphic[] = [];
+  const visit = (current: TestVRenderGraphic) => {
+    if (current.name === name) {
+      graphics.push(current);
+    }
+    current.forEachChildren?.(visit);
+  };
+
+  visit(graphic);
+  return graphics;
+};
+
+const expectAxisGridLinesShown = (chart: VChart, orient: 'left' | 'bottom') => {
+  const gridComponent = getAxisGridComponent(chart, orient);
+  const gridLines = collectGraphicsByName(gridComponent, 'axis-grid-line');
+
+  expect(gridComponent.attribute?.visibleAll).not.toBe(false);
+  expect(gridLines.length).toBeGreaterThan(0);
+  gridLines.forEach(gridLine => {
+    expect(gridLine.attribute?.visible).not.toBe(false);
+  });
+};
+
+const expectAxisGridHidden = (chart: VChart, orient: 'left' | 'bottom') => {
+  const gridComponent = findAxisGridComponent(chart, orient);
+
+  if (!gridComponent) {
+    return;
+  }
+
+  expect(gridComponent.attribute?.visibleAll).toBe(false);
+};
+
 const getFirstScatterGraphic = (chart: VChart) => {
   const scatterSeries = chart
     .getChart()
@@ -2196,6 +2278,29 @@ describe('vchart scoped update effects', () => {
     }
   });
 
+  it('restores existing axis grid lines after animation false hides and shows them', async () => {
+    const chart = new VChart(createLineAxisGridVisibleSpec(true, true), { dom });
+
+    try {
+      chart.renderSync();
+
+      expectAxisGridLinesShown(chart, 'left');
+      expectAxisGridLinesShown(chart, 'bottom');
+
+      await chart.updateSpec(createLineAxisGridVisibleSpec(false, false));
+
+      expectAxisGridHidden(chart, 'left');
+      expectAxisGridHidden(chart, 'bottom');
+
+      await chart.updateSpec(createLineAxisGridVisibleSpec(true, false));
+
+      expectAxisGridLinesShown(chart, 'left');
+      expectAxisGridLinesShown(chart, 'bottom');
+    } finally {
+      chart.release();
+    }
+  });
+
   it('keeps axis min max updates on the series data path', () => {
     const chart = new VChart(createAxisAppearanceSpec(), { dom, animation: false });
 

packages/vchart/src/mark/component.ts

@@ -190,6 +190,9 @@ export class ComponentMark extends BaseMark<ICommonSpec> implements IComponentMa
       this._component && this._product.appendChild(this._component);
     } else {
       this._component.setAttributes(attrs as any);
+      if (this._product && this._component.parent !== this._product) {
+        this._product.appendChild(this._component);
+      }
     }
 
     if (this._component) {