Troubleshooting

Keep a minimal reproduction and console errors, then change one condition at a time. Verify the environment with the quick start instead of changing data, layout, and styling together.

Blank canvas · Graph is very small · Missing labels · Installation and runtime

Blank canvas

Check mounted/non-zero container dimensions, initialization errors, unique node IDs, and endpoints. Start with two nodes and an edge, without optional styling or extensions.

const container = document.querySelector<HTMLElement>('#container');
console.table({
  exists: Boolean(container),
  width: container?.clientWidth ?? 0,
  height: container?.clientHeight ?? 0,
  visibility: document.visibilityState,
});

If dimensions are valid but WebGL fails, check GPU/host/CSP instead of repeatedly constructing Graph. Runtime requirements · Data identity rules

Tiny graph or unexpected position

Check coordinates, outliers, and dimensions before changing fitView padding/maxZoom. First render, resize, setData, and layout fit differently. Do not force fitting after every user zoom. Why the graph is still small

Missing or overlapping labels

Confirm node/edge.style.label produces text; then check zoom thresholds, collisions, colors, and clipping. Disable policies for a comparison, then restore them individually. Label guide · Policy fields

Clicking, dragging, or edge events do not respond

Check behaviors, required Behavior types, and modifiers; [] disables defaults. Inspect DOM overlays, edge hit areas, and event types. Subscribing to a derived event does not enable its Behavior. Interaction composition · Event reference

Worker does not run or falls back

Inspect Worker requests, execution threads, clone errors, and server responses. Function/cyclic configuration may not clone; worker: true is not evidence of success. Worker deployment and cancellation

Leftovers or duplicate responses after unmount

Pair creation/destroy, on/off, and requests/cancellation. Handle StrictMode’s extra mounting with cleanup instead of skipping setup. React · Vue · Extension cleanup

Performance issues

What if force layout makes startup slow?

Measure layout separately from render. Omit layout for supplied positions and assess Worker/iteration options where supported. See performance tuning.

What if highlighting or selection stutters?

Reuse Graph and update states instead of rebuilding or replacing the graph for a highlight. See the state guide.

Installation and runtime

What browsers and WebGL capabilities are required?

Real DOM, Canvas 2D, and a usable WebGL1 or WebGL2 context are required. See runtime requirements for modules, Worker, and CSP.

Can Graph run directly in Node.js or during SSR?

Graph does not render in ordinary Node.js/SSR. Create it after client mounting and destroy on unmount; see framework integration.

Where should TypeScript types be imported from?

Import values and types from the @antv/g6-lite package root and use the declarations shipped with your installed version. See Configuration options for constructor options and data types.

What if an installed package does not contain a field?

Identify the actual version and root types rather than copying development-only fields. See installation for known archive and UMD differences.

Choosing features and finding examples

How should I choose between G6Lite and G6 v5?

Compare required graphics, runtime, and interactions, then validate with your own data. See What is G6Lite? for G6Lite's intended use cases.

Can I use Combo?

Grouping, nesting, and collapsing can be evaluated but remain experimental. Check Combo boundaries.

Can examples run online?

Run the example gallery; each case includes code, data descriptions, and interaction expectations.

Provide reproducible information

Package version / source commit:
Framework / bundler / deployment base path:
Browser / OS / GPU / DPR / container CSS size:
Minimal GraphData and options:
Steps:
Expected / actual:
First console error and failed network request:
Does the minimal quick-start graph work?