logo

G6

  • Docs
  • API
  • Playground
  • Community
  • Productsantv logo arrow
  • 5.0.49
  • Introduction
  • Data
  • Getting Started
    • Quick Start
    • Installation
    • Integration
      • react
      • vue
      • angular
    • Step-by-step guide
  • Graph
    • Extensions En
    • Graph
    • Options
    • extension
  • Element
    • Element Overview
    • Element State
    • Node
      • Node Overview
      • Common Node Configuration
      • Circle Node
      • Diamond Node
      • Donut Node
      • Ellipse Node
      • Hexagon Node
      • HTML Node
      • Image Node
      • Rect Node
      • Star Node
      • Triangle Node
      • Custom Node
      • Define Nodes with React
    • Edge
      • Edge Overview
      • Edge Common Configuration
      • Cubic Bezier Curve Edge
      • CubicHorizontal Bezier Curve Edge
      • CubicVertical Bezier Curve Edge
      • Line Edge
      • Polyline Edge
      • Quadratic Bezier Curve Edge
      • Custom Edge
    • Combo
      • Combo Overview
      • Combo Common Options
      • Circle Combo
      • Rect Combo
      • Custom Combo
    • Shape
      • Shape and KeyShape
      • Atomic Shapes and Their Properties
      • Design and Implementation of Composite Shape
  • Layout
    • Layout Overview
    • Common Layout Configuration Options
    • AntvDagre Layout
    • Circular Layout
    • ComboCombined Layout
    • CompactBox Layout
    • Concentric Layout
    • 3D Force-Directed Layout
    • D3 Force-Directed Layout
    • Dagre Layout
    • Dendrogram Layout
    • Fishbone Layout
    • ForceAtlas2 Force-directed Layout
    • Force-directed Layout
    • Fruchterman Force-directed Layout
    • Grid Layout
    • Indented Tree
    • MDS High-dimensional Data Dimensionality Reduction Layout
    • Mindmap Tree
    • Radial Layout
    • Random Layout
    • Snake Layout
    • Custom Layout
  • Behavior
    • Behavior Overview
    • ZoomCanvas
    • AutoAdaptLabel
    • BrushSelect
    • ClickSelect
    • CollapseExpand
    • CreateEdge
    • DragCanvas
    • DragElement
    • DragElementForce
    • FixElementSize
    • FocusElement
    • HoverActivate
    • LassoSelect
    • OptimizeViewportTransform
    • ScrollCanvas
    • Custom Behavior
  • Plugin
    • Plugin Overview
    • Background
    • BubbleSets
    • Contextmenu
    • EdgeBundling
    • EdgeFilterLens
    • Fisheye
    • Fullscreen
    • GridLine
    • History
    • Hull
    • Legend
    • Minimap
    • Snapline
    • Timebar
    • Toolbar
    • Tooltip
    • Watermark
    • Custom Plugin
  • Transform
    • Data Transformation Overview
    • MapNodeSize
    • PlaceRadialLabels
    • ProcessParallelEdges
    • Custom Transform
  • Theme
    • Theme Overview
    • Custom Theme
    • Palette
    • Custom Palette
  • Animation
    • Animation Overview
    • Custom Animation
  • Further Reading
    • Event
    • renderer
    • coordinate
    • download-image
    • Using Iconfont
    • Use 3D
    • Bundle Project
  • What's new
    • Feature
    • Upgrade To 5.0
  • FAQ
  • contribute

Common Node Configuration

Previous
Node Overview
Next
Circle Node

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

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
},
});
PropertyDescriptionTypeDefaultRequired
typeNode type, built-in node type name or custom node nameTypecircle
styleNode style configuration, including color, size, etc.Style-
stateStyle configuration for different statesState-
paletteDefine node palette for mapping colors based on different dataPalette-
animationDefine animation effects for nodesAnimation-

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:

PropertyDescriptionTypeDefaultRequired
collapsedWhether the current node/combo is collapsedbooleanfalse
cursorNode mouse hover style, optionsstringdefault
fillNode fill colorstring#1783FF
fillOpacityNode fill color transparencynumber | string1
increasedLineWidthForHitTestingWhen lineWidth is small, the interactive area also becomes small. Sometimes we want to increase this area to make "thin lines" easier to pick upnumber0
lineCapNode stroke end styleround | square | buttbutt
lineDashNode stroke dash stylenumber[]-
lineDashOffsetNode stroke dash offsetnumber-
lineJoinNode stroke join styleround | bevel | mitermiter
lineWidthNode stroke widthnumber1
opacityNode transparencynumber | string1
pointerEventsHow the node responds to pointer events, optionsstringauto
shadowBlurNode shadow blurnumber-
shadowColorNode shadow colorstring-
shadowOffsetXNode shadow offset in x-axis directionnumber | string-
shadowOffsetYNode shadow offset in y-axis directionnumber | string-
shadowTypeNode shadow typeinner | outerouter
sizeNode size, quick setting for node width and height, optionsnumber | number[]32
strokeNode stroke colorstring#000
strokeOpacityNode stroke color transparencynumber | string1
transformTransform property allows you to rotate, scale, skew or translate the given nodestring-
transformOriginRotation and scaling center, also called transformation centerstring-
visibilityWhether the node is visiblevisible | hiddenvisible
xNode x coordinatenumber0
yNode y coordinatenumber0
zNode z coordinatenumber0
zIndexNode rendering levelnumber0

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:

PropertyDescriptionTypeDefaultRequired
labelWhether to display node labelbooleantrue
labelCursorStyle displayed when mouse hovers over node label, optionsstringdefault
labelFillNode label text colorstring-
labelFontFamilyNode label font familystring-
labelFontSizeNode label font sizenumber12
labelFontStyleNode label font stylenormal | italic | oblique-
labelFontVariantNode label font variantnormal | small-caps | string-
labelFontWeightNode label font weightnormal | bold | bolder | lighter | number-
labelLeadingLine spacingnumber0
labelLetterSpacingNode label letter spacingnumber | string-
labelLineHeightNode label line heightnumber | string-
labelMaxLinesMaximum number of lines for node labelnumber1
labelMaxWidthMaximum width of node label, optionsnumber | string200%
labelOffsetXNode label offset in x-axis directionnumber0
labelOffsetYNode label offset in y-axis directionnumber0
labelPaddingNode label paddingnumber | number[]0
labelPlacementPosition of node label relative to node main graphic, optionsstringbottom
labelTextNode label text contentstring | (datum) => string-
labelTextAlignNode label text horizontal alignmentstart | center | middle | end | left | rightleft
labelTextBaselineNode label text baselinetop | hanging | middle | alphabetic | ideographic | bottom-
labelTextDecorationColorNode label text decoration line colorstring-
labelTextDecorationLineNode label text decoration linestring-
labelTextDecorationStyleNode label text decoration line stylesolid | double | dotted | dashed | wavy-
labelTextOverflowNode label text overflow handlingclip | ellipsis | string-
labelTextPathNode label text pathPath-
labelWordWrapWhether node label enables automatic line wrapping. After enabling labelWordWrap, parts exceeding labelMaxWidth wrap automaticallybooleanfalse
labelZIndexNode label rendering levelnumber0

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:

PropertyDescriptionTypeDefault
labelBackgroundWhether to display node label backgroundbooleanfalse
labelBackgroundCursorNode label background mouse hover style, optionsstringdefault
labelBackgroundFillNode label background fill colorstring-
labelBackgroundFillOpacityNode label background transparencynumber1
labelBackgroundHeightNode label background heightstring | number-
labelBackgroundLineDashNode label background dash configurationnumber | string |(number | string )[]-
labelBackgroundLineDashOffsetNode label background dash offsetnumber-
labelBackgroundLineWidthNode label background stroke line widthnumber-
labelBackgroundRadiusNode label background border radius
- number: Uniform setting for four border radii
- number[]: Set four border radii separately, automatically supplement missing values
number | number[]0
labelBackgroundShadowBlurNode label background shadow blur degreenumber-
labelBackgroundShadowColorNode label background shadow colorstring-
labelBackgroundShadowOffsetXNode label background shadow X direction offsetnumber-
labelBackgroundShadowOffsetYNode label background shadow Y direction offsetnumber-
labelBackgroundStrokeNode label background stroke colorstring-
labelBackgroundStrokeOpacityNode label background stroke transparencynumber | string1
labelBackgroundVisibilityWhether node label background is visiblevisible | hidden-
labelBackgroundZIndexNode label background rendering levelnumber1

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:

PropertyDescriptionTypeDefaultRequired
haloWhether to display node halobooleanfalse
haloCursorNode halo mouse hover style, optionsstringdefault
haloDraggableWhether node halo allows draggingbooleantrue
haloDroppableWhether node halo allows receiving dragged elementsbooleantrue
haloFillRuleNode halo fill rulenonzero | evenodd-
haloFilterNode halo filterstring-
haloLineWidthNode halo stroke widthnumber3
haloPointerEventsWhether node halo effect responds to pointer events, optionsstringnone
haloStrokeNode halo stroke color, this property is used to set the color of the halo around the node, helping to highlight the nodestringConsistent with main graphic fill color
haloStrokeOpacityNode halo stroke color transparencynumber0.25
haloVisibilityNode halo visibilityvisible | hiddenvisible
haloZIndexNode halo rendering levelnumber-1

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:

PropertyDescriptionTypeDefault
iconWhether to display node iconbooleantrue
iconFillNode icon text colorstring-
iconFontFamilyNode icon font familystring-
iconFontSizeNode icon font sizenumber16
iconFontStyleNode icon font stylenormal | italic | obliquenormal
iconFontVariantNode icon font variantnormal | small-caps | stringnormal
iconFontWeightNode icon font weightnumber | stringnormal
iconHeightNode icon heightnumberHalf of main graphic height
iconLetterSpacingNode icon text letter spacingnumber | string-
iconLineHeightNode icon text line heightnumber | string-
iconMaxLinesMaximum lines for node icon textnumber1
iconRadiusNode icon border radiusnumber0
iconSrcNode image source. Has higher priority than iconTextstring-
iconTextNode icon textstring-
iconTextAlignNode icon text horizontal alignmentstart | center | middle | end | left | rightleft
iconTextBaselineNode icon text baselinetop | hanging | middle | alphabetic | ideographic | bottomalphabetic
iconTextDecorationColorNode icon text decoration line colorstring-
iconTextDecorationLineNode icon text decoration linestring-
iconTextDecorationStyleNode icon text decoration line stylesolid | double | dotted | dashed | wavysolid
iconTextOverflowNode icon text overflow handlingclip | ellipsis | stringclip
iconWidthNode icon widthnumberHalf of main graphic width
iconWordWrapWhether node icon text automatically wrapsboolean-

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:

PropertyDescriptionTypeDefault
badgeWhether the node displays badgesbooleantrue
badgePaletteBadge background color palettestring[][#7E92B5, #F4664A, #FFBE3A]
badgesNode badge settingsBadgeStyleProps[]-

BadgeStyleProps

PropertyDescriptionTypeDefault
backgroundWhether node badge displays backgroundbooleantrue
backgroundCursorNode badge background mouse hover style, optionsstringdefault
backgroundFillNode badge background fill color. If not specified, badgePalette is considered for allocation in orderstring-
backgroundFillOpacityNode badge background fill transparencynumber1
backgroundFilterNode badge background filterstring-
backgroundHeightNode badge background heightnumber | string-
backgroundLineDashNode badge background dash configurationnumber | string |(number | string )[]-
backgroundLineDashOffsetNode badge background dash offsetnumber-
backgroundLineWidthNode badge background stroke line widthnumber-
backgroundRadiusNode badge background border radius
- number: Uniform setting for four border radii
- number[]: Set four border radii separately, automatically supplement missing values
- string: Similar to CSS padding property, separated by spaces
number | number[] | string0
backgroundShadowBlurNode badge background shadow blur degreenumber-
backgroundShadowColorNode badge background shadow colorstring-
backgroundShadowOffsetXNode badge background shadow X direction offsetnumber-
backgroundShadowOffsetYNode badge background shadow Y direction offsetnumber-
backgroundStrokeNode badge background stroke colorstring-
backgroundStrokeOpacityNode badge background stroke transparencynumber | string1
backgroundVisibilityWhether node badge background is visiblevisible | hidden-
backgroundZIndexNode badge background rendering levelnumber-
fillNode badge text colorstring-
fontFamilyNode badge font familystring-
fontSizeNode badge font sizenumber8
fontStyleNode badge font stylenormal | italic | obliquenormal
fontVariantNode badge font variantnormal | small-caps | stringnormal
fontWeightNode badge font weightnumber | stringnormal
lineHeightNode badge line heightstring | number-
lineWidthNode badge line widthstring | number-
maxLinesMaximum lines for node badge textnumber1
offsetXNode badge offset in x-axis directionnumber0
offsetYNode badge offset in y-axis directionnumber0
paddingNode badge paddingnumber | number[]0
placementPosition of node badge relative to node main graphic. If not specified, defaults to clockwise arrangement starting from top-right cornerleft | right | top | bottom | left-top | left-bottom | right-top | right-bottom | top-left | top-right | bottom-left | bottom-right-
textNode badge text contentstring-
textAlignNode badge text horizontal alignmentstart | center | middle | end | left | rightleft
textBaselineNode badge text baselinetop | hanging | middle | alphabetic | ideographic | bottomalphabetic
textDecorationColorNode badge text decoration line colorstring-
textDecorationLineNode badge text decoration linestring-
textDecorationStyleNode badge text decoration line stylesolid | double | dotted | dashed | wavysolid
textOverflowNode badge text overflow handlingclip | ellipsis | stringclip
visibilityWhether node badge is visiblevisible | hidden-
wordWrapWhether node badge text automatically wrapsboolean-
zIndexNode badge rendering levelnumber3

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:

PropertyDescriptionTypeDefaultRequired
portWhether the node displays portsbooleantrue
portsNode port configuration, supports configuring multiple portsPortStyleProps[]-

PortStyleProps

PropertyDescriptionTypeDefaultRequired
keyKey value of node port, defaults to the index of the node portstring-
placementPosition of node port relative to node main graphicleft | right | top | bottom | center | left-top | left-bottom | right-top | right-bottom | top-left | top-right | bottom-left | bottom-right | [number, number]-✓
rNode port radius
- If set to undefined, the port is treated as a point, not displayed on canvas but exists, edges will preferentially connect to the nearest port
- If set to a number, the port is treated as a circle with radius specified here
number-
linkToCenterWhether edges connect to the center of the node port
- If true, edges connect to the center of the node port
- If false, edges connect to the edge of the node port
booleanfalse
cursorNode port mouse hover style, optionsstringdefault
fillNode port fill colorstring-
fillOpacityNode port fill transparencynumber1
isBillboardWhether node port has Billboard effectboolean-
isSizeAttenuationWhether node port enables size attenuationboolean-
lineDashNode port stroke dash configurationnumber | string |(number | string )[]-
lineDashOffsetNode port stroke dash offsetnumber-
lineWidthNode port stroke line widthnumber-
shadowBlurNode port shadow blur degreenumber-
shadowColorNode port shadow colorstring-
shadowOffsetXNode port shadow X direction offsetnumber-
shadowOffsetYNode port shadow Y direction offsetnumber-
strokeNode port stroke colorstring-
strokeOpacityNode port stroke transparencynumber | string1
visibilityWhether node port is visiblevisible | hiddenvisible
zIndexNode port rendering levelnumber2

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
}
}
  1. 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.

PropertyDescriptionTypeDefault
colorPalette colors. If the palette is registered, you can directly specify its registration name, or accept a color arraystring | string[]-
fieldSpecify the grouping field in element data. If not specified, defaults to id as the grouping fieldstring | ((datum) => string)id
invertWhether to invert the palettebooleanfalse
typeSpecify the current palette type.
- group: Discrete palette
- value: Continuous palette
group | valuegroup

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();