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.

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)

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' }]

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');
});

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

• Heatmap must use with visualMap
• levels[i].depth is mandatory and should be natural number
• Marker component is abstract component. Use markLine, markPo
• Grid "{}" not found
• {} "{}" not found

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