Options

The argument of new Graph(options) is GraphOptions. Only container and data are required. Node appearance, edge appearance, layout, interaction, and theme all have defaults and can be overridden where the graph needs to differ.

const graph = new Graph({
  container: 'container',
  data: {
    nodes: [{ id: 'a' }, { id: 'b' }],
    edges: [{ id: 'a-b', source: 'a', target: 'b' }],
  },
  node: { style: { size: 28, fill: '#5366ad' } },
  edge: { style: { endArrow: true } },
  layout: { type: 'dagre', rankdir: 'TB' },
  behaviors: ['zoom-canvas', 'drag-canvas', 'click-select'],
  theme: 'light',
});

Visual recipes live in the guides: Data, Node, Edge, Label, Layout, Interactions, and Theme.

GraphOptions

At runtime, node, edge, label, and theme can be updated with graph.updateOptions().

Graph data

const data: GraphData = {
  nodes: [{ id: 'a', data: { cluster: 'svc' } }],
  edges: [{ source: 'a', target: 'b', data: { weight: 1 } }],
  combos: [{ id: 'group', collapsed: false }],
};

Node GraphNode

Edge GraphEdge

Combo ComboData

Node

node?: {
  type?: 'circle' | 'rect' | string;
  labelRenderer?: string;
  decorations?: NodeDecorationConfig[];
  autoExternalLabelPlacement?: boolean;
  style?: NodeStyleConfig | ((node: GraphNode) => Partial<NodeStyleConfig>);
  stateStyles?: Partial<Record<ElementState, NodeStateStyleOverride>>;
}

An omitted type, or 'circle', draws a circle. 'rect' draws a rounded rectangle. Any other string must already be registered with register('node', ...).

Each visual field in style can be a constant or (node: GraphNode) => value. label: false and icon: false skip that layer.

stateStyles overrides fill, stroke, strokeWidth, opacity, and haloWidth while that state is active. Turn states on and off with the Graph state methods.

labelRenderer is the name of a registered custom label renderer. decorations attaches badges and other node decorations; register the renderer with register('decoration', ...). Fields and collision rules are in Label and Custom node.

Edge

edge?: {
  type?: 'line' | 'arc' | 'polyline' | 'cubic' | string;
  labelRenderer?: string;
  parallelEdges?: boolean | ParallelEdgesConfig;
  style?: { /* fields below; values may be functions */ };
  stateStyles?: Partial<Record<ElementState, EdgeStateStyleOverride>>;
}

An edge style function is (source, target, edge) => value.

stateStyles can override stroke, lineWidth, hitAreaWidth, opacity, and lineDash.

parallelEdges: true separates edges that share endpoints with the default spacing. The object form is:

'process-parallel-edges' in transforms has the same effect. See Parallel edges.

Label policy

label controls how the engine shows node and edge labels that already have text. It does not choose the text.

Layout

layout?: {
  type: string;
  worker?: boolean;
  width?: number;
  height?: number;
  center?: [number, number];
  [algorithmOption: string]: unknown;
}

type is a built-in name or a registered layout name, such as 'force', 'dagre', or 'mindmap'. The remaining fields are passed to that algorithm. worker: true runs supported algorithms in a Web Worker. Omitted width, height, and center are derived from the canvas.

Available types, parameters, and rerunning layout are in Layout.

Interactions

Each behaviors item is a behavior name or { type, ...options }.

Omitting the field is equivalent to ['zoom-canvas', 'drag-canvas']. Once an array is passed, that array is the complete list. [] turns off the default zoom and pan.

tooltip options:

getContent receives a TooltipContext with itemType, nodeId or the edge's edgeId / source / target, data, and the original event.

Behavior combinations and events are in Interactions. A custom behavior uses register('behavior', ...).

Theme

theme?: 'light' | 'dark' | ({ type: 'light' | 'dark' } & Partial<ThemeTokens>)

An object starts from the preset named by type, then overrides tokens on that object. Overridable tokens are nodeFill, nodeSize, nodeStroke, nodeStrokeWidth, edgeStroke, edgeLineWidth, edgeArrow, canvasBackground, edgeDefaultColor, edgeCategoryPalette, nodeStateStyles, and edgeStateStyles.

import { resolveTheme } from '@antv/g6-lite';

const tokens = resolveTheme({ type: 'light', nodeFill: '#1677ff' });

resolveTheme() returns a new complete ThemeTokens and does not mutate the preset.

Plugins and transforms

plugins?: Array<{ type: string; [option: string]: unknown }>
transforms?: Array<'process-parallel-edges' | string | { type: string; options?: object }>

A custom plugins or transforms type must be registered with register() first. The built-in transform name is 'process-parallel-edges'.