apache/echarts · error

xAxis and yAxis must use the same grid

Error message

xAxis and yAxis must use the same grid

What it means

DEV-only guard in Grid.create: the xAxisModel and yAxisModel resolved for a series must belong to the same gridModel. If they reference different grids, no single cartesian system can be formed and it throws. Stripped in production.

Solutions

  1. Make xAxis and yAxis reference the same grid (same gridIndex/gridId, or omit both for the default grid)
  2. Drop explicit gridIndex/gridId when only a single grid is used
  3. Verify each series' xAxisIndex and yAxisIndex land on the same grid

Example fix

// before
xAxis: [{ gridIndex: 0 }],
yAxis: [{ gridIndex: 1 }],
series: [{ type: 'line', xAxisIndex: 0, yAxisIndex: 0 }]

// after
xAxis: [{}],
yAxis: [{}],
series: [{ type: 'line' }]
Defensive patterns

Strategy: validation

Validate before calling

const xAxes = Array.isArray(option.xAxis) ? option.xAxis : (option.xAxis ? [option.xAxis] : []);
const yAxes = Array.isArray(option.yAxis) ? option.yAxis : (option.yAxis ? [option.yAxis] : []);
(option.series || []).forEach((s: any) => {
  const xi = s.xAxisIndex ?? 0;
  const yi = s.yAxisIndex ?? 0;
  const xg = xAxes[xi] && (xAxes[xi].gridIndex ?? 0);
  const yg = yAxes[yi] && (yAxes[yi].gridIndex ?? 0);
  if (xg !== yg) console.error('[grid] series ' + (s.name || '') + ' xAxis/yAxis on different grids');
});

Prevention

When it happens

Trigger: xAxis gridIndex=0 and yAxis gridIndex=1 (different grids) for a series; explicit gridId mismatch between the two axes; series xAxisIndex/yAxisIndex pointing at axes on different grids.

Common situations: Multiple grids configured; series bound to axes from different grids; axis config drift across versions.

Related errors


AI-assisted analysis of apache/echarts@30076aedcd (2026-08-12). Data as JSON: /api/errors/175448db556f178c. Report an issue: GitHub.

Appendix: source

Thrown at src/coord/cartesian/Grid.ts:585

                const xAxisModel = axesModelMap.xAxisModel;
                const yAxisModel = axesModelMap.yAxisModel;
                xAxis = xAxisModel.axis;
                yAxis = yAxisModel.axis;

                const gridModel = xAxisModel.getCoordSysModel();

                if (__DEV__) {
                    if (!gridModel) {
                        throw new Error(
                            'Grid "' + retrieve3(
                                xAxisModel.get('gridIndex'),
                                xAxisModel.get('gridId'),
                                0
                            ) + '" not found'
                        );
                    }
                    if (xAxisModel.getCoordSysModel() !== yAxisModel.getCoordSysModel()) {
                        throw new Error('xAxis and yAxis must use the same grid');
                    }
                }

                const grid = gridModel.coordinateSystem as Grid;

                return grid.getCartesian(
                    xAxisModel.componentIndex, yAxisModel.componentIndex
                );
            }
            if (xAxis && yAxis) {
                associateSeriesWithAxis(xAxis, seriesModel, COORD_SYS_TYPE_CARTESIAN_2D);
                associateSeriesWithAxis(yAxis, seriesModel, COORD_SYS_TYPE_CARTESIAN_2D);
            }

        }, this);

        return grids;
    }

View on GitHub (pinned to 30076aedcd)