G6

https://g6.antv.antgroup.com/en/manual/
Admin
G6 is an analytical, high-performance, flexible graph visualization and analysis engine, part of the...
Tokens:513,349
Snippets:3,175
Trust Score:9.6
Update:23 hours ago
Show doc for...
Tokens:
Raw
### Install website dependencies and start site

Source: https://g6.antv.antgroup.com/en/manual/contribute

From the repository root, install dependencies and start the website development server. Requires Node.js >= 22.12.0 and pnpm 10.34.5.

```bash
pnpm install
pnpm site
```

--------------------------------

### Practical example with data and graph setup

Source: https://g6.antv.antgroup.com/en/manual/behavior/FocusElement.md

A complete example showing how to create a graph with nodes, edges, combos, and the focus-element behavior.

```ts
import { Graph } from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', combo: 'combo1', style: { x: 110, y: 150 } },
    { id: 'node2', combo: 'combo1', style: { x: 190, y: 150 } },
    { id: 'node3', combo: 'combo2', style: { x: 150, y: 260 } },
  ],
  edges: [{ source: 'node1', target: 'node2' }],
  combos: [{ id: 'combo1', combo: 'combo2' }, { id: 'combo2' }],
};

const graph = new Graph({
  container: 'container',
  node: {
    style: { labelText: (d) => d.id },
  },
  data,
  behaviors: ['collapse-expand', 'focus-element'],
});

graph.render();
```

--------------------------------

### Basic Hull example with Graph setup

Source: https://g6.antv.antgroup.com/en/manual/plugin/Hull.md

Complete G6 example that creates a graph with nodes and edges, and adds the Hull plugin to wrap nodes 'node-1' and 'node-2'. Includes zoom and drag behaviors.

```TypeScript
import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 300,
  height: 150,
  autoFit: 'view',
  data: {
    nodes: [
      {
        id: 'node-0',
        data: { cluster: 'a' },
        style: { x: 555, y: 151 },
      },
      {
        id: 'node-1',
        data: { cluster: 'a' },
        style: { x: 532, y: 323 },
      },
      {
        id: 'node-2',
        data: { cluster: 'a' },
        style: { x: 473, y: 227 },
      },
      {
        id: 'node-3',
        data: { cluster: 'a' },
        style: { x: 349, y: 212 },
      },
      {
        id: 'node-4',
        data: { cluster: 'b' },
        style: { x: 234, y: 201 },
      },
      {
        id: 'node-5',
        data: { cluster: 'b' },
        style: { x: 338, y: 333 },
      },
      {
        id: 'node-6',
        data: { cluster: 'b' },
        style: { x: 365, y: 91 },
      },
    ],
    edges: [
      {
        source: 'node-0',
        target: 'node-2',
      },
      {
        source: 'node-1',
        target: 'node-2',
      },
      {
        source: 'node-2',
        target: 'node-3',
      },
      {
        source: 'node-3',
        target: 'node-4',
      },
      {
        source: 'node-3',
        target: 'node-5',
      },
      {
        source: 'node-3',
        target: 'node-6',
      },
    ],
  },
  plugins: [
    {
      type: 'hull',
      members: ['node-1', 'node-2'], // List of node IDs to be wrapped
    },
  ],
  behaviors: ['zoom-canvas', 'drag-canvas'],
});

graph.render();
```

--------------------------------

### Complete hull label example with graph setup

Source: https://g6.antv.antgroup.com/en/manual/plugin/Hull.md

Full G6 graph example with nodes, edges, and a hull plugin with label configuration. Includes zoom-canvas and drag-canvas behaviors.

```ts
import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 300,
  height: 150,
  autoFit: 'center',
  data: {
    nodes: [
      {
        id: 'node-0',
        data: { cluster: 'a' },
        style: { x: 555, y: 151 },
      },
      {
        id: 'node-1',
        data: { cluster: 'a' },
        style: { x: 532, y: 323 },
      },
      {
        id: 'node-2',
        data: { cluster: 'a' },
        style: { x: 473, y: 227 },
      },
      {
        id: 'node-3',
        data: { cluster: 'a' },
        style: { x: 349, y: 212 },
      },
      {
        id: 'node-4',
        data: { cluster: 'b' },
        style: { x: 234, y: 201 },
      },
      {
        id: 'node-5',
        data: { cluster: 'b' },
        style: { x: 338, y: 333 },
      },
      {
        id: 'node-6',
        data: { cluster: 'b' },
        style: { x: 365, y: 91 },
      },
    ],
    edges: [
      {
        source: 'node-0',
        target: 'node-2',
      },
      {
        source: 'node-1',
        target: 'node-2',
      },
      {
        source: 'node-2',
        target: 'node-3',
      },
      {
        source: 'node-3',
        target: 'node-4',
      },
      {
        source: 'node-3',
        target: 'node-5',
      },
      {
        source: 'node-3',
        target: 'node-6',
      },
    ],
  },
  plugins: [
    {
      type: 'hull',
      members: ['node-1', 'node-2'],
      label: true, // Display label
      labelText: 'hull-a',
      labelPlacement: 'top', // Label position
      labelBackground: true, // Display label background
      labelPadding: 5, // Label padding
    },
  ],
  behaviors: ['zoom-canvas', 'drag-canvas'],
});

graph.render();
```

--------------------------------

### Full example with focus state

Source: https://g6.antv.antgroup.com/en/manual/element/combo/BaseCombo

Complete G6 graph setup with a combo in the 'focus' state, including data and state styles.

```typescript
import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1', states: ['focus'] }],
  },
  combo: {
    state: {
      focus: {
        lineWidth: 3,
        stroke: 'orange',
        fill: 'orange',
        fillOpacity: 0.2,
      },
    },
  },
});

graph.render();
```

--------------------------------

### Complete data flow example with custom node and graph setup

Source: https://g6.antv.antgroup.com/en/manual/element/node/custom-node

A complete example showing how data flows from graph data to a custom node. It defines a `DataFlowNode` that uses both methods to access data, registers it, and creates a graph with a node containing business data. The style maps data fields to style attributes using functions, and the node renders custom content based on those attributes.

```ts
import { Graph, register, Rect, ExtensionCategory } from '@antv/g6';

class DataFlowNode extends Rect {
  // Method 2: Get raw data through graph
  get nodeData() {
    return this.context.graph.getNodeData(this.id);
  }

  get data() {
    return this.nodeData.data || {};
  }

  render(attributes, container) {
    // Method 1: Get processed styles from attributes
    console.log('Get from attributes:', {
      iconUrl: attributes.iconUrl,
      userName: attributes.userName,
    });

    // Method 2: Get from raw data
    console.log('Get from raw data:', {
      icon: this.data.icon,
      name: this.data.name,
      role: this.data.role,
    });

    // Render basic rectangle
    super.render(attributes, container);

    // Use data to render custom content
    if (attributes.iconUrl) {
      this.upsert(
        'icon',
        'image',
        {
          x: -25,
          y: -12,
          width: 20,
          height: 20,
          src: attributes.iconUrl,
        },
        container,
      );
    }

    if (attributes.userName) {
      this.upsert(
        'username',
        'text',
        {
          x: 10,
          y: 0,
          text: attributes.userName,
          fontSize: 10,
          fill: '#666',
          textAlign: 'center',
          textBaseline: 'middle',
        },
        container,
      );
    }
  }
}

register(ExtensionCategory.NODE, 'data-flow-node', DataFlowNode);

const graph = new Graph({
  container: 'container',
  height: 200,
  data: {
    nodes: [
      {
        id: 'user1',
        style: { x: 100, y: 100 },
        // This is the node's business data
        data: {
          name: 'Zhang San',
          role: 'Developer',
          icon: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Felix',
        },
      },
    ],
  },
  node: {
    type: 'data-flow-node',
    style: {
      size: [80, 40],
      fill: '#f0f9ff',
      stroke: '#0ea5e9',
      lineWidth: 1,
      radius: 4,
      // Map data from data field to style attributes
      iconUrl: (d) => d.data.icon, // This becomes attributes.iconUrl
      userName: (d) => d.data.name, // This becomes attributes.userName
      // Main title uses role information
      labelText: (d) => d.data.role,
      labelFontSize: 12,
      labelFill: '#0369a1',
    },
  },
});

graph.render();
```

--------------------------------

### Start the development environment

Source: https://g6.antv.antgroup.com/en/manual/contribute

Enter the g6 package directory and start the development server. Access the preview at http://127.0.0.1:8080.

```bash
# Enter the g6 code directory.
cd ./packages/g6

# Start the development environment
pnpm dev
```

--------------------------------

### Full example with edge-filter-lens plugin

Source: https://g6.antv.antgroup.com/en/manual/plugin/EdgeFilterLens

Complete G6 graph setup with nodes, edges, and the edge-filter-lens plugin configured with custom styles. Use this as a starting point for a graph with a filter lens.

```typescript
import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 400,
  height: 300,
  data: {
    nodes: [
      // Upper evacuation area
      { id: 'node1', style: { x: 150, y: 60, label: 'Node 1' } },
      { id: 'node2', style: { x: 100, y: 40, label: 'Node 2' } },
      { id: 'node3', style: { x: 200, y: 35, label: 'Node 3' } },
      { id: 'node4', style: { x: 150, y: 30, label: 'Node 4' } },

      // Middle area
      { id: 'node5', style: { x: 220, y: 140, label: 'Node 5' } },
      { id: 'node6', style: { x: 280, y: 160, label: 'Node 6' } },
      { id: 'node7', style: { x: 220, y: 120, label: 'Node 7' } },
      { id: 'node8', style: { x: 260, y: 100, label: 'Node 8' } },
      { id: 'node9', style: { x: 240, y: 130, label: 'Node 9' } },
      { id: 'node10', style: { x: 300, y: 110, label: 'Node 10' } },

      // Lower area
      { id: 'node11', style: { x: 240, y: 200, label: 'Node 11' } },
      { id: 'node12', style: { x: 280, y: 220, label: 'Node 12' } },
      { id: 'node13', style: { x: 300, y: 190, label: 'Node 13' } },
      { id: 'node14', style: { x: 320, y: 210, label: 'Node 14' } },
    ],
    edges: [
      // Upper connections
      { id: 'edge1', source: 'node1', target: 'node2' },
      { id: 'edge2', source: 'node2', target: 'node3' },
      { id: 'edge3', source: 'node3', target: 'node4' },

      // Middle connections
      { id: 'edge4', source: 'node5', target: 'node6' },
      { id: 'edge5', source: 'node6', target: 'node7' },
      { id: 'edge6', source: 'node7', target: 'node8' },
      { id: 'edge7', source: 'node8', target: 'node9' },
      { id: 'edge8', source: 'node9', target: 'node10' },

      // Lower connections
      { id: 'edge9', source: 'node11', target: 'node12' },
      { id: 'edge10', source: 'node12', target: 'node13' },
      { id: 'edge11', source: 'node13', target: 'node14' },

      // Cross-region connections
      { id: 'edge12', source: 'node4', target: 'node8' },
      { id: 'edge13', source: 'node7', target: 'node11' },
      { id: 'edge14', source: 'node10', target: 'node13' },
    ],
  },
  node: {
    style: {
      size: 20,
    },
  },
  edge: {
    style: {
      stroke: '#91d5ff',
      lineWidth: 1,
    },
  },
  plugins: [
    {
      type: 'edge-filter-lens',
      r: 80,
      style: {
        fill: '#f0f5ff', // Fill color of the lens area
        fillOpacity: 0.6, // Opacity of the fill area
        stroke: '#7e3feb', // Change lens border to purple
        strokeOpacity: 0.8, // Opacity of the border
        lineWidth: 1.5, // Line width of the border
      },
      nodeStyle: {
        size: 24, // Enlarge nodes
        fill: '#7e3feb', // Purple fill
        stroke: '#5719c9', // Dark purple stroke
        lineWidth: 1, // Thin border
        label: true, // Show label
        labelFill: '#ffffff', // White text
        labelFontSize: 14, // Enlarge text
        labelFontWeight: 'bold', // Bold text
      },
      edgeStyle: {
        stroke: '#8b9baf', // Gray edge
        lineWidth: 2, // Thicken edge line
        label: true, // Show label
        labelFill: '#5719c9', // Dark purple text
        opacity: 0.8, // Appropriate opacity
      },
    },
  ],
});

graph.render();
```

--------------------------------

### Snake Layout Usage Example

Source: https://g6.antv.antgroup.com/en/manual/layout/Snake

An example of configuring the Snake layout in a G6 Graph, including data setup and layout options.

```APIDOC
## Snake Layout Usage Example

### Description
This example demonstrates how to use the Snake layout in a G6 Graph. It creates a graph with 16 nodes and 15 edges, and applies the snake layout with a padding of 50.

### Code Example
```ts
import { Graph } from '@antv/g6';

const data = {
  nodes: new Array(16).fill(0).map((_, i) => ({ id: `${i}` })),
  edges: new Array(15).fill(0).map((_, i) => ({ source: `${i}`, target: `${i + 1}` })),
};

const graph = new Graph({
  container: 'container',
  data,
  node: {
    style: {
      labelFill: '#fff',
      labelPlacement: 'center',
      labelText: (d) => d.id,
    },
  },
  layout: {
    type: 'snake',
    padding: 50,
  },
  behaviors: ['drag-canvas', 'drag-element'],
});

graph.render();
```

### Layout Options
| Property | Description | Type | Default | Required |
| --- | --- | --- | --- | --- |
| type | Layout type | snake | - | ✓ |
| clockwise | Whether nodes are arranged clockwise | boolean | true | |
| colGap | Gap size between columns | number | Automatically calculated by canvas width and total columns | |
| cols | Number of columns | number | 5 | |
| nodeSize | Node size | Size | ((node: NodeData) => Size) | - | |
| padding | Padding, i.e., distance from layout area to canvas boundary | number | number[] | 0 | |
| rowGap | Gap size between rows | number | Automatically calculated by canvas height and total rows | |
| sortBy | Node sorting method | (nodeA: NodeData, nodeB: NodeData) => -1 | 0 | 1 | Default is the path order in the graph | |

### clockwise
- When arranged clockwise, nodes start from the top left, the first row is arranged left to right, the second row right to left, and so on, forming an S-shaped path.
- When arranged counterclockwise, nodes start from the top right, the first row is arranged right to left, the second row left to right, and so on, forming a reversed S-shaped path.
```

--------------------------------

### Basic Usage

Source: https://g6.antv.antgroup.com/en/manual/plugin/Contextmenu.md

Example of initializing the Contextmenu plugin with configuration options.

```APIDOC
## Contextmenu Plugin

### Description
Initializes the Contextmenu plugin with options such as enable, getItems, and onClick.

### Configuration Options

| Property | Description | Type | Default Value | Required |
| --- | --- | --- | --- | --- |
| className | Additional class name for the menu DOM | string | `g6-contextmenu` | No |
| trigger | How to trigger the right-click menu: `contextmenu` for right-click, `click` for click | `click` \| `contextmenu` | `contextmenu` | No |
| offset | Offset of the menu display in X and Y directions | [number, number] | [4, 4] | No |
| onClick | Callback method triggered after the menu is clicked | (value: string, target: HTMLElement, current: Element) => void | - | No |
| getItems | Returns the list of menu items, supports `Promise` type return value. Shortcut for `getContent` | (event: IElementEvent) => [Item](#item)[] \| Promise<[Item](#item)[]> | - | No |
| getContent | Returns the content of the menu, supports `Promise` type return value | (event: IElementEvent) => HTMLElement \| string \| Promise<HTMLElement \| string> | - | No |
| loadingContent | Menu content used when `getContent` returns a `Promise` | HTMLElement \| string | - | No |
| enable | Whether it is available, determines whether the right-click menu is supported by parameters | boolean \| (event: IElementEvent) => boolean | true | No |

### Item

Each menu item (Item) contains the following properties:

| Property | Description | Type | Required |
| --- | --- | --- | --- |
| name | Name displayed for the menu item | `string` | Yes |
| value | Value corresponding to the menu item | `string` | Yes |

### onClick

This function is triggered after clicking a menu item, and the function has three parameters:

- value: Corresponds to the value of the menu item
- target: The DOM node of the menu item container
- current: The element that triggered the menu item, for example, if it is a node, you can use `current` to get the node information (id), or to modify the element

### Example

```js
const graph = new Graph({
  plugins: [
    {
      type: 'contextmenu',
      // Enable right-click menu only on nodes, by default all elements are enabled
      enable: (e) => e.targetType === 'node',
      getItems: () => {
        return [{ name: 'View Details', value: 'detail' }];
      },
      onClick: (value) => {
        if (value === 'detail') console.log('Display node details');
      },
    },
  ],
});
```
```

--------------------------------

### Create and enter project directory

Source: https://g6.antv.antgroup.com/en/manual/getting-started/step-by-step

Commands to create an empty directory and navigate into it.

```bash
mkdir g6-tutorial

cd g6-tutorial
```

--------------------------------

### Get current plugins list with getPlugins

Source: https://g6.antv.antgroup.com/en/manual/plugin/overview.md

Use the getPlugins method to get the current list of plugins. The comment shows an example output.

```javascript
// Get the list of plugins
const plugins = graph.getPlugins();
// console.log(plugins) 👉 ['minimap', 'grid']
```

--------------------------------

### Initialize Background plugin with basic configuration

Source: https://g6.antv.antgroup.com/en/manual/plugin/Background

Shows the minimal setup for the Background plugin, setting a background color and image. The 'key' property is used for dynamic updates.

```javascript
const graph = new Graph({
  plugins: [
    {
      type: 'background',
      key: 'my-background', // Specify an identifier for the plugin for dynamic updates
      backgroundColor: '#f0f2f5', // Set background color
      backgroundImage: 'url(https://example.com/bg.png)', // Set background image
    },
  ],
});
```

--------------------------------

### Practical Example with Toolbar Integration

Source: https://g6.antv.antgroup.com/en/manual/plugin/Fullscreen

A complete example that creates a graph with 20 nodes, adds a Fullscreen plugin, and a custom toolbar with buttons to request and exit fullscreen.

```typescript
import { Graph } from '@antv/g6';

const graph = new Graph({
  data: { nodes: Array.from({ length: 20 }).map((_, i) => ({ id: `node${i}` })) },
  autoFit: 'center',
  background: '#fff',
  plugins: [
    {
      type: 'fullscreen',
      key: 'fullscreen',
    },
    function () {
      const graph = this;
      return {
        type: 'toolbar',
        key: 'toolbar',
        position: 'top-left',
        onClick: (item) => {
          const fullscreenPlugin = graph.getPluginInstance('fullscreen');
          if (item === 'request-fullscreen') {
            fullscreenPlugin.request();
          }
          if (item === 'exit-fullscreen') {
            fullscreenPlugin.exit();
          }
        },
        getItems: () => {
          return [
            { id: 'request-fullscreen', value: 'request-fullscreen' },
            { id: 'exit-fullscreen', value: 'exit-fullscreen' },
          ];
        },
      };
    },
  ],
});

graph.render();
```

--------------------------------

### Custom Hull style example with Graph setup

Source: https://g6.antv.antgroup.com/en/manual/plugin/Hull.md

Complete G6 example with custom hull styling, wrapping nodes 'node-1', 'node-2', and 'node-3'. Includes zoom and drag behaviors.

```TypeScript
import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 300,
  height: 150,
  autoFit: 'view',
  data: {
    nodes: [
      {
        id: 'node-0',
        data: { cluster: 'a' },
        style: { x: 555, y: 151 },
      },
      {
        id: 'node-1',
        data: { cluster: 'a' },
        style: { x: 532, y: 323 },
      },
      {
        id: 'node-2',
        data: { cluster: 'a' },
        style: { x: 473, y: 227 },
      },
      {
        id: 'node-3',
        data: { cluster: 'a' },
        style: { x: 349, y: 212 },
      },
      {
        id: 'node-4',
        data: { cluster: 'b' },
        style: { x: 234, y: 201 },
      },
      {
        id: 'node-5',
        data: { cluster: 'b' },
        style: { x: 338, y: 333 },
      },
      {
        id: 'node-6',
        data: { cluster: 'b' },
        style: { x: 365, y: 91 },
      },
    ],
    edges: [
      {
        source: 'node-0',
        target: 'node-2',
      },
      {
        source: 'node-1',
        target: 'node-2',
      },
      {
        source: 'node-2',
        target: 'node-3',
      },
      {
        source: 'node-3',
        target: 'node-4',
      },
      {
        source: 'node-3',
        target: 'node-5',
      },
      {
        source: 'node-3',
        target: 'node-6',
      },
    ],
  },
  plugins: [
    {
      type: 'hull',
      members: ['node-1', 'node-2', 'node-3'],
      stroke: '#ff000033', // Red semi-transparent border
      fill: '#7e3feb', // Light purple fill
      fillOpacity: 0.2,
      lineWidth: 2,
      padding: 15, // Larger padding
    },
  ],
  behaviors: ['zoom-canvas', 'drag-canvas'],
});

graph.render();
```

--------------------------------

### Basic Usage

Source: https://g6.antv.antgroup.com/en/manual/plugin/Toolbar

Example of initializing the Toolbar plugin with getItems and onClick handlers.

```APIDOC
## Toolbar Plugin Basic Usage

### Description
Initializes the Toolbar plugin with a set of items and a click handler.

### Configuration
- **type** (string) - Required - Plugin type, set to `'toolbar'`.
- **getItems** (function) - Required - Returns an array of ToolbarItem objects.
- **onClick** (function) - Optional - Callback invoked when a toolbar item is clicked.

### Example
```javascript
const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'toolbar',
      getItems: () => [
        { id: 'zoom-in', value: 'zoom-in' },
        { id: 'zoom-out', value: 'zoom-out' },
        { id: 'auto-fit', value: 'auto-fit' },
      ],
      onClick: (value) => {
        // Handle button click events
        if (value === 'zoom-in') {
          graph.zoomTo(1.1);
        } else if (value === 'zoom-out') {
          graph.zoomTo(0.9);
        } else if (value === 'auto-fit') {
          graph.fitView();
        }
      },
    },
  ],
});
```
```

--------------------------------

### Initialize npm project

Source: https://g6.antv.antgroup.com/en/manual/getting-started/step-by-step

Initializes a new npm project with default settings.

```bash
npm init -y
```

--------------------------------

### Practical Example with Circular Layout

Source: https://g6.antv.antgroup.com/en/manual/plugin/EdgeBundling.md

Complete example fetching data from a URL, creating a Graph with circular layout, drag behaviors, and edge bundling plugin with bundleThreshold 0.1. Renders the graph after setup.

```TypeScript
import { Graph } from '@antv/g6';

fetch('https://assets.antv.antgroup.com/g6/circular.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      autoFit: 'view',
      data,
      layout: {
        type: 'circular',
      },
      node: { style: { size: 20 } },
      behaviors: ['drag-canvas', 'drag-element'],
      plugins: [
        {
          key: 'edge-bundling',
          type: 'edge-bundling',
          bundleThreshold: 0.1,
        },
      ],
    });

    graph.render();
  });
```

--------------------------------

### Start development server

Source: https://g6.antv.antgroup.com/en/manual/getting-started/step-by-step

Runs the Vite development server.

```bash
npm run dev
```

--------------------------------

### nodeSize callback example

Source: https://g6.antv.antgroup.com/en/manual/layout/DagreLayout.md

A callback function for the nodeSize option that returns a number or an array [width, height] based on the node. In this example, the node with id 'testId' gets size 20, otherwise [10, 20].

```javascript
(d) => {
  // d is a node
  if (d.id === 'testId') return 20;
  return [10, 20];
};
```

--------------------------------

### Full example with combo-combined layout

Source: https://g6.antv.antgroup.com/en/manual/layout/ComboCombinedLayout

Complete example that fetches data and creates a graph with the combo-combined layout, setting comboPadding, node styles, palette, edge styles, and behaviors.

```typescript
import { Graph } from '@antv/g6';

fetch('https://assets.antv.antgroup.com/g6/combo.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      data,
      layout: {
        type: 'combo-combined',
        comboPadding: 2,
      },
      node: {
        style: {
          size: 20,
          labelText: (d) => d.id,
        },
        palette: {
          type: 'group',
          field: (d) => d.combo,
        },
      },
      edge: {
        style: (model) => {
          const { size, color } = model.data;
          return {
            stroke: color || '#99ADD1',
            lineWidth: size || 1,
          };
        },
      },
      behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
      autoFit: 'view',
    });

    graph.render();
  });
```

--------------------------------

### Quick Configuration (Static) - plugins: ['history']

Source: https://g6.antv.antgroup.com/en/manual/plugin/History

Declare the History plugin using a string. Simple but only supports default configurations and cannot be dynamically modified after configuration.

```javascript
const graph = new Graph({
  // Other configurations...
  plugins: ['history'],
});
```

--------------------------------

### Call plugin methods with getPluginInstance

Source: https://g6.antv.antgroup.com/en/manual/plugin/overview.md

Get a plugin instance using getPluginInstance and call its methods. This example shows configuring a history plugin and calling undo/redo.

```javascript
// Configure the plugin
const graph = new Graph({
  plugins: [{ type: 'history', key: 'my-history' }],
});

// Get the plugin instance
const history = graph.getPluginInstance('my-history');

// Call plugin methods
history.undo();
history.redo();
```

--------------------------------

### Complete example with edge in focus state

Source: https://g6.antv.antgroup.com/en/manual/element/edge/BaseEdge.md

A full G6 graph setup that renders two nodes and an edge with the 'focus' state, applying the halo style.

```typescript
import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 300,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1' }, { id: 'node2' }],
    edges: [{ source: 'node1', target: 'node2', states: ['focus'] }],
  },
  edge: {
    state: {
      focus: {
        halo: true,
        haloLineWidth: 6,
        haloStroke: 'orange',
      },
    },
  },
  layout: {
    type: 'grid',
    cols: 2,
  },
});

graph.render();
```

--------------------------------

### Contextmenu Plugin Configuration

Source: https://g6.antv.antgroup.com/en/manual/plugin/Contextmenu

Example of initializing the Contextmenu plugin with configuration options such as enable, getItems, and onClick.

```APIDOC
## Contextmenu Plugin Configuration

### Description
Initializes the Contextmenu plugin with options to enable the menu on specific elements, define menu items, and handle click events.

### Configuration Options

| Property | Description | Type | Default Value | Required |
| --- | --- | --- | --- | --- |
| className | Additional class name for the menu DOM | string | `g6-contextmenu` | No |
| trigger | How to trigger the right-click menu: `contextmenu` for right-click, `click` for click | `click` | `contextmenu` | No |
| offset | Offset of the menu display in X and Y directions | [number, number] | [4, 4] | No |
| onClick | Callback method triggered after the menu is clicked | (value: string, target: HTMLElement, current: Element) => void | - | No |
| getItems | Returns the list of menu items, supports Promise type return value | (event: IElementEvent) => Item[] | Promise<Item[]> | - | No |
| getContent | Returns the content of the menu, supports Promise type return value | (event: IElementEvent) => HTMLElement | string | Promise<HTMLElement | string> | - | No |
| loadingContent | Menu content used when getContent returns a Promise | HTMLElement | string | - | No |
| enable | Whether it is available, determines whether the right-click menu is supported by parameters | boolean | (event: IElementEvent) => boolean | true | No |

### Example

```javascript
const graph = new Graph({
  plugins: [
    {
      type: 'contextmenu',
      enable: (e) => e.targetType === 'node',
      getItems: () => {
        return [{ name: 'View Details', value: 'detail' }];
      },
      onClick: (value) => {
        if (value === 'detail') console.log('Display node details');
      },
    },
  ],
});
```

### Item Interface

Each menu item (Item) contains the following properties:

| Property | Description | Type | Required |
| --- | --- | --- | --- |
| name | Name displayed for the menu item | string | Yes |
| value | Value corresponding to the menu item | string | Yes |

### onClick Parameters

The onClick function is triggered after clicking a menu item and has three parameters:

- value: Corresponds to the value of the menu item
- target: The DOM node of the menu item container
- current: The element that triggered the menu item, for example, if it is a node, you can use current to get the node information (id), or to modify the element
```

--------------------------------

### Image Watermark Full Example

Source: https://g6.antv.antgroup.com/en/manual/plugin/Watermark

Complete G6 graph setup with an image watermark, including data, layout, behaviors, and watermark dimensions, rotation, and image URL.

```typescript
import { Graph } from '@antv/g6';

const data = {
  nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],
  edges: [
    { source: 'node-0', target: 'node-1' },
    { source: 'node-0', target: 'node-2' },
    { source: 'node-0', target: 'node-3' },
    { source: 'node-0', target: 'node-4' },
    { source: 'node-1', target: 'node-0' },
    { source: 'node-2', target: 'node-0' },
    { source: 'node-3', target: 'node-0' },
    { source: 'node-4', target: 'node-0' },
    { source: 'node-5', target: 'node-0' },
  ],
};

const graph = new Graph({
  container: 'container',
  data,
  layout: {
    type: 'grid',
  },
  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
  plugins: [
    {
      type: 'watermark',
      width: 200,
      height: 100,
      rotate: Math.PI / 12,
      imageURL: 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
    },
  ],
});

graph.render();
```

--------------------------------

### cursor configuration example

Source: https://g6.antv.antgroup.com/en/manual/behavior/DragElement.md

Example configuration for the `cursor` option, setting default, grab, and grabbing pointer styles.

```javascript
cursor: {
  default: 'default',    // Use normal pointer by default
  grab: 'grab',         // Show grab pointer when draggable
  grabbing: 'grabbing'  // Show grabbing pointer when dragging
}
```

--------------------------------

### Switch renderers dynamically with setOptions

Source: https://g6.antv.antgroup.com/en/manual/further-reading/renderer.md

G6 does not provide a dedicated API to switch renderers, but you can update the `renderer` option via `setOptions`. This example starts with WebGL and switches to SVG after rendering.

```javascript
import { Renderer as SVGRenderer } from '@antv/g-svg';
import { Renderer as WebGLRenderer } from '@antv/g-webgl';

// Use the WebGL renderer by default
const graph = new Graph({
  // ... other options
  renderer: () => new WebGLRenderer(),
});

await graph.render();

// Switch to the SVG renderer
graph.setOptions({
  renderer: () => new SVGRenderer(),
});
```

--------------------------------

### G6 5.0 Options Example

Source: https://g6.antv.antgroup.com/en/manual/whats-new/feature

Shows the clear and easy-to-understand structure of G6 5.0 Options, with node.style, node.state, and behaviors. This structure is more intuitive than 4.0.

```javascript
{
  node: {
    style: {
      size: 30,
      fill: 'steelblue',
      stroke: '#666',
      lineWidth: 1
      labelFill: '#fff',
    },
    state: {
      hover: {
        fill: 'lightsteelblue'
      }
    }
  },
  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
}
```
Tokens:
Raw