This document introduces the common configuration properties for built-in nodes.

NodeOptions

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

const graph = new Graph({
  node: {
    type: 'circle', // Node type
    style: {}, // Node style
    state: {}, // State style
    palette: {}, // Palette configuration
    animation: {}, // Animation configuration
  },
});

Type

Specifies the node type, built-in node type name or custom node name. Default is circle. ⚠️ Note: This determines the shape of the main graphic.

const graph = new Graph({
  node: {
    type: 'circle',
  },
});

⚠️ Dynamic Configuration: The type property also supports dynamic configuration, allowing you to dynamically select node types based on node data:

const graph = new Graph({
  node: {
    // Static configuration
    type: 'circle',

    // Dynamic configuration - arrow function form
    type: (datum) => datum.data.nodeType || 'circle',

    // Dynamic configuration - regular function form (can access graph instance)
    type: function (datum) {
      console.log(this); // graph instance
      return datum.data.category === 'important' ? 'diamond' : 'circle';
    },
  },
});

Available values:

• circle: Circle Node
• diamond: Diamond Node
• donut: Donut Node
• ellipse: Ellipse Node
• hexagon: Hexagon Node
• html: HTML Node
• image: Image Node
• rect: Rectangle Node
• star: Star Node
• triangle: Triangle Node

Style

Defines the style of nodes, including color, size, etc.

const graph = new Graph({
  node: {
    style: {},
  },
});

⚠️ Dynamic Configuration: All the following style properties support dynamic configuration, meaning you can pass functions to dynamically calculate property values based on node data:

const graph = new Graph({
  node: {
    style: {
      // Static configuration
      fill: '#1783FF',

      // Dynamic configuration - arrow function form
      stroke: (datum) => (datum.data.isActive ? '#FF0000' : '#000000'),

      // Dynamic configuration - regular function form (can access graph instance)
      lineWidth: function (datum) {
        console.log(this); // graph instance
        return datum.data.importance > 5 ? 3 : 1;
      },

      // Nested properties also support dynamic configuration
      labelText: (datum) => `Node: ${datum.id}`,
      badges: (datum) => datum.data.tags.map((tag) => ({ text: tag })),
    },
  },
});

Where the datum parameter is the node data object (NodeData), containing all data information of the node.

A complete node consists of the following parts:

• key: The main graphic of the node, representing the primary shape of the node, such as rectangle, circle, etc.
• label: Text label, usually used to display the name or description of the node
• icon: Icon graphic, usually used to display node icons, can be images or text icons
• badge: Badge, by default located at the top-right corner of the node
• halo: Graphic showing halo effect around the main graphic
• port: Connection points on the node, used to connect edges

The following style configurations are explained in order by atomic graphics:

Main Graphic Style

The main graphic is the core part of the node, defining the basic shape and appearance of the node. Here are common configuration scenarios:

Basic Style Configuration

Setting the basic appearance of nodes:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      fill: '#5B8FF9', // Blue fill
      stroke: '#1A1A1A', // Dark stroke
      lineWidth: 2,
      size: 40,
    },
  },
});

graph.render();

Transparency and Shadow Effects

Adding transparency and shadow effects to nodes:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      fill: '#61DDAA',
      fillOpacity: 0.85,
      shadowColor: 'rgba(97, 221, 170, 0.4)',
      shadowBlur: 12,
      shadowOffsetX: 2,
      shadowOffsetY: 4,
      stroke: '#F0F0F0',
      lineWidth: 1,
    },
  },
});

graph.render();

Dashed Border Style

Creating nodes with dashed borders:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      fill: '#FFF1F0',
      stroke: '#F5222D',
      lineWidth: 2,
      lineDash: [6, 4],
      lineCap: 'round',
    },
  },
});

graph.render();

The complete main graphic style configuration is as follows:

Size

Node size, quick setting for node width and height, supports three configuration methods:

• number: Indicates that the node width and height are the same as the specified value
• [number, number]: Indicates that the node width and height are represented by array elements indicating the node's width and height respectively
• [number, number, number]: Indicates that the node width, height, and depth are represented by array elements

PointerEvents

The pointerEvents property controls how graphics respond to interaction events. You can refer to the MDN documentation.

Available values: visible | visiblepainted | visiblestroke | non-transparent-pixel | visiblefill | visible | painted | fill | stroke | all | none | auto | inherit | initial | unset

In short, fill, stroke, and visibility can independently or in combination affect pick behavior. Currently supports the following keywords:

• auto: Default value, equivalent to visiblepainted
• none: Will never be a target for responding to events
• visiblepainted: Will respond to events only if the following conditions are met:
  • visibility is set to visible, i.e., the graphic is visible
  • Triggered in the graphic fill area and fill takes a non-none value; or triggered in the graphic stroke area and stroke takes a non-none value
• visiblefill: Will respond to events only if the following conditions are met:
  • visibility is set to visible, i.e., the graphic is visible
  • Triggered in the graphic fill area, not affected by the value of fill
• visiblestroke: Will respond to events only if the following conditions are met:
  • visibility is set to visible, i.e., the graphic is visible
  • Triggered in the graphic stroke area, not affected by the value of stroke
• visible: Will respond to events only if the following conditions are met:
  • visibility is set to visible, i.e., the graphic is visible
  • Triggered in the graphic fill or stroke area, not affected by the values of fill and stroke
• painted: Will respond to events only if the following conditions are met:
  • Triggered in the graphic fill area and fill takes a non-none value; or triggered in the graphic stroke area and stroke takes a non-none value
  • Not affected by the value of visibility
• fill: Will respond to events only if the following conditions are met:
  • Triggered in the graphic fill area, not affected by the value of fill
  • Not affected by the value of visibility
• stroke: Will respond to events only if the following conditions are met:
  • Triggered in the graphic stroke area, not affected by the value of stroke
  • Not affected by the value of visibility
• all: Will respond to events as long as entering the fill and stroke areas of the graphic, not affected by the values of fill, stroke, and visibility

Usage Examples:

// Example 1: Only stroke area responds to events
const graph = new Graph({
  node: {
    style: {
      fill: 'none',
      stroke: '#000',
      lineWidth: 2,
      pointerEvents: 'stroke', // Only stroke responds to events
    },
  },
});

// Example 2: Completely unresponsive to events
const graph = new Graph({
  node: {
    style: {
      pointerEvents: 'none', // Node does not respond to any events
    },
  },
});

Cursor

Available values: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | all-scroll | col-resize | row-resize | n-resize | e-resize | s-resize | w-resize | ne-resize | nw-resize | se-resize | sw-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | zoom-in | zoom-out

Label Style

Labels are used to display text information of nodes, supporting various style configurations and layout methods. Here are common usage scenarios:

Basic Text Label

The simplest text label configuration:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 120,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      labelText: 'Node Name',
      labelFill: '#262626',
      labelFontSize: 12,
      labelPlacement: 'bottom',
    },
  },
});

graph.render();

Multi-line Text Label

When text is long, you can set automatic line wrapping:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 120,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      labelText: 'This is a very long node name that needs line wrapping',
      labelWordWrap: true,
      labelMaxWidth: '150%',
      labelMaxLines: 3,
      labelTextOverflow: 'ellipsis',
      labelFill: '#434343',
      labelPlacement: 'bottom',
      labelTextAlign: 'center',
    },
  },
});

graph.render();

Label with Background

Adding background to labels to improve readability:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 120,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      labelText: 'Important Node',
      labelBackground: true,
      labelBackgroundFill: 'rgba(250, 140, 22, 0.1)',
      labelBackgroundRadius: 6,
      labelPadding: [6, 12],
      labelFill: '#D4380D',
      labelFontWeight: 'bold',
      labelPlacement: 'bottom',
    },
  },
});

graph.render();

The complete label style configuration is as follows:

LabelPlacement

Available values: left | right | top | bottom | left-top | left-bottom | right-top | right-bottom | top-left | top-right | bottom-left | bottom-right | center | bottom

LabelMaxWidth

After enabling automatic line wrapping labelWordWrap, text wraps when exceeding this width:

• string: Defines maximum width as a percentage relative to node width. For example, 50% means label width does not exceed half of the node width
• number: Defines maximum width in pixels. For example, 100 means the maximum width of the label is 100 pixels

For example, setting multi-line label text:

{
  "labelWordWrap": true,
  "labelMaxWidth": 200,
  "labelMaxLines": 3
}

Label Background Style

Label background is used to display the background of node labels:

Halo Style

Halo is an effect displayed around the node's main graphic, usually used for highlighting or indicating special states of nodes.

Basic Halo Effect

Adding basic halo effect to nodes:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      lineWidth: 1.5,
      halo: true,
      haloStroke: '#1890FF',
      haloLineWidth: 6,
      haloStrokeOpacity: 0.3,
    },
  },
});

graph.render();

The complete halo style configuration is as follows:

Icon Style

Node icons support three common usage methods: text icons, image icons, and IconFont icons. The configurations for these three methods are shown below:

1. Text Icons

Using text directly as icons, suitable for simple identifiers:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      fill: '#FFF0F6',
      stroke: '#EB2F96',
      lineWidth: 1.5,
      iconText: 'A', // Icon text content
      iconFill: '#C41D7F', // Deep pink icon
      iconFontSize: 16,
      iconFontWeight: 'bold',
    },
  },
});

graph.render();

2. Image Icons

Using images as icons, supporting various image formats:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      fill: '#F6FFED',
      stroke: '#52C41A',
      lineWidth: 1.5,
      iconSrc:
        'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJMMTMuMDkgOC4yNkwyMSA5TDEzLjA5IDE1Ljc4TDEyIDIyTDEwLjkxIDE1Ljc4TDMgOUwxMC45MSA4LjI2TDEyIDJaIiBmaWxsPSIjNTJDNDFBIi8+Cjwvc3ZnPgo=',
      iconWidth: 20,
      iconHeight: 20,
    },
  },
});

graph.render();

3. IconFont Icons

Using IconFont font icons, you need to import the corresponding font files first:

import { Graph, iconfont } from '@antv/g6';

const style = document.createElement('style');
style.innerHTML = `@import url('${iconfont.css}');`;
document.head.appendChild(style);

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      fill: '#E6F7FF', // Light blue background
      stroke: '#1890FF', // Blue border
      lineWidth: 1.5,
      iconFontFamily: 'iconfont',
      iconText: '\ue602',
      iconFill: '#1890FF',
    },
  },
});

graph.render();

The complete icon style configuration is as follows:

Badge Style

Badges are small markers displayed on nodes, usually used to show status, quantity, or other auxiliary information. Supports displaying multiple badges simultaneously with customizable positions.

Single Badge

Adding a simple badge to a node:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      badges: [
        { text: 'NEW' }, // Default display at the top
      ],
    },
  },
});

graph.render();

Multiple Badges

Adding multiple badges at different positions to a node:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      badge: true, // Whether to display badges
      badges: [
        { text: 'A', placement: 'right-top' },
        { text: 'Important', placement: 'right' },
        { text: 'Notice', placement: 'right-bottom' },
      ],
      badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'], // Badge background color palette
      badgeFontSize: 7, // Badge font size
    },
  },
});

graph.render();

Custom Badge Style

Completely customizing badge appearance:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      badges: [
        {
          text: '99+',
          placement: 'right-top',
          backgroundFill: '#FF4D4F', // Red background
          fill: '#fff', // White text
          fontSize: 10,
          padding: [2, 6],
          backgroundRadius: 8,
        },
      ],
    },
  },
});

graph.render();

The complete badge style configuration is as follows:

BadgeStyleProps

Port Style

Ports are connection points on nodes, used to connect edges. Supports adding multiple ports at different positions on nodes with customizable styles.

Basic Ports

Adding four basic directional ports to a node:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      port: true,
      ports: [
        { key: 'top', placement: 'top', fill: '#7E92B5' },
        { key: 'right', placement: 'right', fill: '#F4664A' },
        { key: 'bottom', placement: 'bottom', fill: '#FFBE3A' },
        { key: 'left', placement: 'left', fill: '#D580FF' },
      ],
      portR: 3,
      portLineWidth: 1,
      portStroke: '#fff',
    },
  },
});

graph.render();

Custom Position Ports

Using percentages or absolute coordinates to precisely position ports:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      ports: [
        { key: 'custom1', placement: [0.2, 0] }, // Relative position: 20% from top-left
        { key: 'custom2', placement: [0.8, 0] }, // Relative position: 80% from top-right
        { key: 'custom3', placement: [1, 0.5] }, // Relative position: right center
      ],
      portR: 4,
      portLineWidth: 1,
      portStroke: '#fff',
    },
  },
});

graph.render();

Differentiated Port Styles

Setting different styles for different ports:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: { nodes: [{ id: 'node1' }] },
  node: {
    style: {
      ports: [
        {
          key: 'input',
          placement: 'left',
          fill: '#52C41A', // Green input port
          r: 4,
        },
        {
          key: 'output',
          placement: 'right',
          fill: '#FF4D4F', // Red output port
          r: 4,
        },
      ],
      portStroke: '#fff', // Unified stroke color
      portLineWidth: 2,
    },
  },
});

graph.render();

The complete port style configuration is as follows:

PortStyleProps

State

In some interactive behaviors, such as clicking to select a node or hovering to activate an edge, only certain state identifications are made on the element. To reflect these states in the visual space seen by end users, we need to set different graphic element styles for different states to respond to changes in the state of the graphic element.

G6 provides several built-in states, including selected, highlight, active, inactive, and disabled. In addition, it also supports custom states to meet more specific needs. For each state, developers can define a set of style rules that will override the element's default styles.

The data structure is as follows:

type NodeState = {
  [state: string]: NodeStyle;
};

For example, when a node is in the focus state, you can add a stroke with width 3 and orange color.

const graph = new Graph({
  node: {
    state: {
      focus: {
        lineWidth: 3, // Stroke width
        stroke: 'orange', // Stroke color
      },
    },
  },
});

The effect is shown in the figure below:

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

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

graph.render();

Animation

Defines animation effects for nodes, supporting the following two configuration methods:

1. Disable all node animations

{
  "node": {
    "animation": false
  }
}

2. Configure stage animations

Stage animations refer to animation effects when nodes enter the canvas, update, or leave the canvas. Currently supported stages include:

• enter: Animation when nodes enter the canvas
• update: Animation when nodes are updated
• exit: Animation when nodes leave the canvas
• show: Animation when nodes are shown from hidden state
• hide: Animation when nodes are hidden
• collapse: Animation when nodes are collapsed
• expand: Animation when nodes are expanded

You can refer to Animation Paradigm to use animation syntax to configure nodes, such as:

{
  "node": {
    "animation": {
      "update": [
        {
          "fields": ["x", "y"], // Only animate x and y properties during updates
          "duration": 1000, // Animation duration
          "easing": "linear" // Easing function
        }
      ]
    }
  }
}

You can also use built-in animation effects:

{
  "node": {
    "animation": {
      "enter": "fade", // Use fade animation
      "update": "translate", // Use translate animation
      "exit": "fade" // Use fade animation
    }
  }
}

You can pass false to disable animations for specific stages:

{
  "node": {
    "animation": {
      "enter": false // Disable node entrance animation
    }
  }
}

Palette

Defines the color palette for nodes, i.e., predefined node color pool, and allocates according to rules, mapping colors to the fill property.

For the definition of palettes, please refer to Palette.

For example, assigning node colors to a group of data by category field, so that nodes of the same category have the same color:

{
  "node": {
    "palette": {
      "type": "group",
      "field": "category",
      "color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"]
    }
  }
}

The effect is shown in the figure below:

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

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 100,
  data: {
    nodes: new Array(10)
      .fill(0)
      .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),
  },
  layout: { type: 'grid', cols: 10 },
  node: {
    palette: {
      type: 'group',
      field: 'category',
      color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'],
    },
  },
});

graph.render();

You can also use default configuration:

{
  "node": {
    "palette": "tableau" // tableau is the palette name, defaults to assigning colors based on ID
  }
}

The effect is shown in the figure below:

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

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 100,
  data: {
    nodes: new Array(10)
      .fill(0)
      .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),
  },
  layout: { type: 'grid', cols: 10 },
  node: {
    palette: 'tableau',
  },
});

graph.render();