Skip to content
G6

Edge Common Configuration

View MarkdownEdit this page

This document introduces the built-in edge common property configurations.

EdgeOptions

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

const graph = new Graph({
  edge: {
    type: 'line', // Edge type
    style: {}, // Edge style
    state: {}, // State styles
    palette: {}, // Palette configuration
    animation: {}, // Animation configuration
  },
});
Property Description Type Default Required
type Edge type, built-in edge type name or custom edge name Type line
style Edge style configuration, including color, thickness, etc. Style -
state Style configuration for different states State -
palette Define edge palette for mapping colors based on different data Palette -
animation Define edge animation effects Animation -

Type

Specify the edge type, built-in edge type name or custom edge name. Default is line (straight line edge). ⚠️ Note: This determines the shape of the main graphic.

const graph = new Graph({
  edge: {
    type: 'polyline',
  },
});

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

const graph = new Graph({
  edge: {
    // Static configuration
    type: 'line',

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

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

Available values:

Style

Define edge styles, including color, thickness, etc.

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

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

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

      // Dynamic configuration - arrow function form
      lineWidth: (datum) => (datum.data.isImportant ? 3 : 1),

      // Dynamic configuration - regular function form (can access graph instance)
      lineDash: function (datum) {
        console.log(this); // graph instance
        return datum.data.type === 'dashed' ? [5, 5] : [];
      },

      // Nested properties also support dynamic configuration
      labelText: (datum) => `Edge: ${datum.id}`,
      endArrow: (datum) => datum.data.hasArrow,
    },
  },
});

Where the datum parameter is the edge data object (EdgeData), containing all data information of the edge.

A complete edge consists of the following parts:

  • key: The main graphic of the edge, representing the main path of the edge, such as straight lines, curves, etc.
  • label: Text label, usually used to display the name or description of the edge
  • badge: Badge on the edge
  • halo: The halo effect graphic displayed around the main graphic
  • startArrow: Arrow at the starting end of the edge
  • endArrow: Arrow at the ending end of the edge

The following style configurations will be explained by atomic graphics in order:

Main Graphic Styles

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

Basic Style Configuration

Set the basic appearance of the edge:


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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 40 } },
      { id: 'node2', style: { x: 180, y: 40 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#5B8FF9', // Blue edge
      lineWidth: 2, // Edge width
    },
  },
});

graph.render();

Dashed Line Style

Create edges with dashed line style:


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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 40 } },
      { id: 'node2', style: { x: 180, y: 40 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#F5222D',
      lineWidth: 2,
      lineDash: [6, 4], // Dashed line style
      lineDashOffset: 0,
    },
  },
});

graph.render();

Shadow Effect

Add shadow effect to edges:


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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 40 } },
      { id: 'node2', style: { x: 180, y: 40 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#722ED1',
      lineWidth: 3,
      shadowColor: 'rgba(114, 46, 209, 0.3)',
      shadowBlur: 8,
      shadowOffsetX: 2,
      shadowOffsetY: 2,
    },
  },
});

graph.render();

The following is the complete main graphic style configuration:

Property Description Type Default Required
cursor Mouse cursor style when hovering over edge, options string default
increasedLineWidthForHitTesting When lineWidth is small, the interactive area also becomes small. We can increase this area to make “thin lines” easier to pick up number 0
lineDash Edge dash line style number[] -
lineDashOffset Edge dash line offset number 0
lineWidth Edge width number 1
opacity Edge opacity number | string 1
pointerEvents How edge responds to pointer events, options string auto
shadowBlur Edge shadow blur number -
shadowColor Edge shadow color string -
shadowOffsetX Edge shadow offset in x direction number | string -
shadowOffsetY Edge shadow offset in y direction number | string -
shadowType Edge shadow type inner | outer outer
sourcePort Connection port at the source end of the edge string -
stroke Edge color string #000
strokeOpacity Edge color opacity number | string 1
targetPort Connection port at the target end of the edge string -
transform Transform property allows you to rotate, scale, skew, or translate the given edge string -
transformOrigin The center of rotation and scaling, also known as the transform center string -
visibility Whether the edge is visible visible | hidden visible
zIndex Edge rendering layer number 1

PointerEvents

The pointerEvents property controls how graphics respond to interaction events. Refer to MDN documentation.

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

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

  • auto: Default value, equivalent to visiblepainted
  • none: Never becomes a target for responding to events
  • visiblepainted: Responds to events only when the following conditions are met:
    • visibility is set to visible, i.e., the graphic is visible
    • Triggered in the graphic stroke area while stroke takes a non-none value
  • visiblestroke: Responds to events only when 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 stroke value
  • visible: Responds to events only when 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 stroke value
  • painted: Responds to events only when the following conditions are met:
    • Triggered in the graphic stroke area while stroke takes a non-none value
    • Not affected by visibility value
  • stroke: Responds to events only when the following conditions are met:
    • Triggered in the graphic stroke area, not affected by stroke value
    • Not affected by visibility value
  • all: Responds to events as long as entering the graphic stroke area, not affected by stroke or visibility values

Usage Examples:

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

// Example 2: Completely non-responsive to events
const graph = new Graph({
  edge: {
    style: {
      pointerEvents: 'none', // Edge 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 Styles

Labels are used to display text information for edges, supporting various style configurations and layout options. 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: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'Edge Label',
      labelFill: '#262626',
      labelFontSize: 12,
      labelPlacement: 'center',
    },
  },
});

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: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'This is a very long edge label that needs line wrapping',
      labelWordWrap: true,
      labelMaxWidth: '200%',
      labelMaxLines: 2,
      labelTextOverflow: 'ellipsis',
      labelFill: '#434343',
      labelPlacement: 'center',
      labelTextAlign: 'center',
    },
  },
});

graph.render();

Label with Background

Add background to labels for better readability:


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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'Important Connection',
      labelBackground: true,
      labelBackgroundFill: 'rgba(250, 140, 22, 0.1)',
      labelBackgroundRadius: 6,
      labelPadding: [4, 8],
      labelFill: '#D4380D',
      labelFontWeight: 'bold',
      labelPlacement: 'center',
    },
  },
});

graph.render();

Auto-rotating Label

Labels can automatically rotate to align with edge direction:


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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 30 } },
      { id: 'node2', style: { x: 180, y: 90 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'Auto Rotate',
      labelAutoRotate: true, // Auto rotate
      labelFill: '#1890FF',
      labelFontWeight: 'bold',
      labelPlacement: 'center',
    },
  },
});

graph.render();

The following is the complete label style configuration:

Property Description Type Default Required
label Whether to show edge label boolean true
labelAutoRotate Whether edge label automatically rotates to align with edge direction boolean true
labelCursor Mouse cursor style when hovering over edge label, options string default
labelFill Edge label text color string -
labelFontFamily Edge label font family string -
labelFontSize Edge label font size number 12
labelFontStyle Edge label font style normal | italic | oblique -
labelFontVariant Edge label font variant normal | small-caps | string -
labelFontWeight Edge label font weight normal | bold | bolder | lighter | number -
labelLeading Line spacing number 0
labelLetterSpacing Edge label letter spacing number | string -
labelLineHeight Edge label line height number | string -
labelMaxLines Edge label maximum lines number 1
labelMaxWidth Edge label maximum width, options number | string 200%
labelOffsetX Edge label offset in x direction number 0
labelOffsetY Edge label offset in y direction number 0
labelPadding Edge label padding number | number[] 0
labelPlacement Edge label position relative to edge, options string | number center
labelText Edge label text content string | (datum) => string -
labelTextAlign Edge label text horizontal alignment start | center | middle | end | left | right left
labelTextBaseline Edge label text baseline top | hanging | middle | alphabetic | ideographic | bottom -
labelTextDecorationColor Edge label text decoration line color string -
labelTextDecorationLine Edge label text decoration line string -
labelTextDecorationStyle Edge label text decoration line style solid | double | dotted | dashed | wavy -
labelTextOverflow Edge label text overflow handling clip | ellipsis | string -
labelTextPath Edge label text path Path -
labelWordWrap Whether to enable automatic line wrapping for edge labels. When enabled, text exceeding labelMaxWidth will wrap boolean false
labelZIndex Edge label rendering layer number 0

LabelPlacement

Edge label position relative to the edge, can be set to:

  • start: Label positioned at the starting point of the edge
  • center: Label positioned at the center of the edge (default)
  • end: Label positioned at the ending point of the edge
  • number: Value range 0-1, representing the specific position ratio of the label on the edge, 0 for start position, 1 for end position

LabelMaxWidth

After enabling automatic line wrapping labelWordWrap, text exceeding this width will wrap:

  • string: Represents the maximum width defined as a percentage relative to the edge length. For example, 50% means the label width does not exceed half the edge length
  • number: Represents the maximum width defined in pixels. For example, 100 means the label’s maximum width is 100 pixels

For example, setting multi-line label text:

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

Label Background Styles

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

Property Description Type Default
labelBackground Whether to show edge label background boolean false
labelBackgroundCursor Edge label background mouse cursor style, options string default
labelBackgroundFill Edge label background fill color string -
labelBackgroundFillOpacity Edge label background opacity number 1
labelBackgroundHeight Edge label background height string | number -
labelBackgroundLineDash Edge label background dash line configuration number | string |(number | string )[] -
labelBackgroundLineDashOffset Edge label background dash line offset number -
labelBackgroundLineWidth Edge label background stroke line width number -
labelBackgroundRadius Edge label background border radius
- number: Uniform radius for all corners
- number[]: Individual radius for each corner, auto-filled if insufficient		 number | number[] 0
labelBackgroundShadowBlur Edge label background shadow blur number -
labelBackgroundShadowColor Edge label background shadow color string -
labelBackgroundShadowOffsetX Edge label background shadow X offset number -
labelBackgroundShadowOffsetY Edge label background shadow Y offset number -
labelBackgroundStroke Edge label background stroke color string -
labelBackgroundStrokeOpacity Edge label background stroke opacity number | string 1
labelBackgroundVisibility Edge label background visibility visible | hidden -
labelBackgroundZIndex Edge label background rendering layer number 1

Halo Styles

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

Basic Halo Effect

Add basic halo effect to edges:


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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      lineWidth: 2,
      halo: true,
      haloStroke: '#1890FF',
      haloLineWidth: 6,
      haloStrokeOpacity: 0.3,
    },
  },
});

graph.render();

The following is the complete halo style configuration:

Property Description Type Default Required
halo Whether to show edge halo boolean false
haloCursor Edge halo mouse cursor style, options string default
haloDraggable Whether edge halo allows dragging boolean true
haloDroppable Whether edge halo allows receiving dragged elements boolean true
haloFillRule Edge halo fill rule nonzero | evenodd -
haloFilter Edge halo filter string -
haloLineWidth Edge halo stroke width number 3
haloPointerEvents Whether edge halo responds to pointer events, options string none
haloStroke Edge halo stroke color, this property sets the color of the halo around the edge string Consistent with main graphic stroke color
haloStrokeOpacity Edge halo stroke opacity number 0.25
haloVisibility Edge halo visibility visible | hidden visible
haloZIndex Edge halo rendering layer number -1

Arrow Styles

Edges support adding arrows at the start and end points to indicate the directionality of the edge.

Basic Arrow

Add basic arrow to the end of the edge:


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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#1890FF',
      lineWidth: 2,
      endArrow: true, // End arrow
      endArrowType: 'vee', // Arrow type
      endArrowSize: 10, // Arrow size
    },
  },
});

graph.render();

Bidirectional Arrows

Add arrows to both ends of the edge:


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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#52C41A',
      lineWidth: 2,
      startArrow: true, // Start arrow
      startArrowType: 'circle',
      startArrowSize: 8,
      endArrow: true, // End arrow
      endArrowType: 'triangle',
      endArrowSize: 10,
    },
  },
});

graph.render();

Custom Arrow Style

Customize arrow color and type:


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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#722ED1',
      lineWidth: 3,
      endArrow: true,
      endArrowType: 'diamond', // Diamond arrow
      endArrowSize: 12,
      endArrowFill: '#FF4D4F', // Red arrow fill
      endArrowStroke: '#722ED1', // Arrow stroke color
      endArrowStrokeOpacity: 0.8,
    },
  },
});

graph.render();

Start Arrow Style Configuration

Property Description Type Default Required
startArrow Whether to show edge start arrow boolean false
startArrowCursor Edge start arrow mouse cursor style, options string default
startArrowFill Edge start arrow fill color string Default consistent with edge color
startArrowFillOpacity Edge start arrow fill opacity number 1
startArrowOffset Edge start arrow offset number 0
startArrowSize Edge start arrow size number | [number, number] 10
startArrowStroke Edge start arrow stroke color string Default consistent with edge color
startArrowStrokeOpacity Edge start arrow stroke opacity number 1
startArrowType Edge start arrow type triangle | circle | diamond | vee | rect | triangleRect | simple vee

End Arrow Style Configuration

Property Description Type Default Required
endArrow Whether to show edge end arrow boolean false
endArrowCursor Edge end arrow mouse cursor style, options string default
endArrowFill Edge end arrow fill color string Default consistent with edge color
endArrowFillOpacity Edge end arrow fill opacity number 1
endArrowOffset Edge end arrow offset number 0
endArrowSize Edge end arrow size number | [number, number] 10
endArrowStroke Edge end arrow stroke color string Default consistent with edge color
endArrowStrokeOpacity Edge end arrow stroke opacity number 1
endArrowType Edge end arrow type triangle | circle | diamond | vee | rect | triangleRect | simple vee

Loop Edge Styles

Loop edges are special edges where the start and end nodes are the same node.

Basic Loop Edge

Create a basic loop edge:


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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', style: { x: 100, y: 50 } }],
    edges: [{ source: 'node1', target: 'node1' }],
  },
  edge: {
    style: {
      stroke: '#1890FF',
      lineWidth: 2,
      endArrow: true,
      loopPlacement: 'top', // Loop position
      loopDist: 30, // Loop size
    },
  },
});

graph.render();

Multiple Loop Edges

Create multiple loop edges at different positions for the same node:


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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', style: { x: 100, y: 60 } }],
    edges: [
      { id: 'edge1', source: 'node1', target: 'node1' },
      { id: 'edge2', source: 'node1', target: 'node1' },
      { id: 'edge3', source: 'node1', target: 'node1' },
    ],
  },
  edge: {
    style: {
      lineWidth: 2,
      endArrow: true,
      loopPlacement: (datum) => {
        const placements = ['top', 'right', 'bottom'];
        return placements[parseInt(datum.id.slice(-1)) - 1];
      },
      loopDist: 25,
      stroke: (datum) => {
        const colors = ['#1890FF', '#52C41A', '#722ED1'];
        return colors[parseInt(datum.id.slice(-1)) - 1];
      },
    },
  },
});

graph.render();

The following is the complete loop edge style configuration:

Property Description Type Default Required
loop Whether to enable loop edges boolean true
loopClockwise Whether to draw the loop clockwise boolean true
loopDist Distance from node edge to loop top, used to specify loop curvature number Default to max node size
loopPlacement Loop edge position left | right | top | bottom | left-top | left-bottom | right-top | right-bottom | top-left | top-right | bottom-left | bottom-right top

State

In some interactive behaviors, such as clicking to select an edge or hovering to activate an edge, it’s simply marking certain states on that 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 that graphic element.

G6 provides several built-in states, including selected, highlight, active, inactive, and disabled. Additionally, it 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 EdgeState = {
  [state: string]: EdgeStyle;
};

For example, when an edge is in the focus state, you can add a halo with a width of 6 and orange color.

const graph = new Graph({
  edge: {
    state: {
      focus: {
        halo: true,
        haloLineWidth: 6,
        haloStroke: 'orange',
        haloStrokeOpacity: 0.6,
      },
    },
  },
});

The effect is shown in the following image:


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

Animation

Define edge animation effects. Supports the following two configuration methods:

  1. Disable all edge animations
{
  "edge": {
    "animation": false
  }
}
  1. Configure stage animations

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

  • enter: Animation when edge enters the canvas
  • update: Animation when edge updates
  • exit: Animation when edge leaves the canvas
  • show: Animation when edge shows from hidden state
  • hide: Animation when edge hides
  • collapse: Animation when edge collapses
  • expand: Animation when edge expands

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

{
  "edge": {
    "animation": {
      "update": [
        {
          "fields": ["stroke"], // Only animate stroke property during update
          "duration": 1000, // Animation duration
          "easing": "linear" // Easing function
        }
      ]
    }
  }
}

You can also use built-in animation effects:

{
  "edge": {
    "animation": {
      "enter": "fade", // Use fade animation
      "update": "path-in", // Use path animation
      "exit": "fade" // Use fade animation
    }
  }
}

You can pass false to disable specific stage animations:

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

Palette

Define the edge palette, which is a predefined edge color pool that is allocated according to rules and maps colors to the stroke property.

For palette definitions, please refer to Palette.

Property Description Type Default
color Palette colors. If the palette is registered, you can directly specify its registration name, or accept a color array string | string[] -
field Specify the grouping field in element data. If not specified, defaults to using id as grouping field string | ((datum) => string) id
invert Whether to invert the palette boolean false
type Specify current palette type.
- group: Discrete palette
- value: Continuous palette		 group | value group

For example, to assign edge colors to a group of data by the direction field, making edges of the same category have the same color:

{
  "edge": {
    "palette": {
      "type": "group",
      "field": "direction",
      "color": ["#F08F56", "#00C9C9", "#D580FF"]
    }
  }
}

The effect is shown in the following image:


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

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  data: {
    nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })),
    edges: [
      { source: 'node-1', target: 'node-2', data: { direction: 'out' } },
      { source: 'node-1', target: 'node-3', data: { direction: 'out' } },
      { source: 'node-1', target: 'node-4', data: { direction: 'out' } },
      { source: 'node-5', target: 'node-1', data: { direction: 'in' } },
      { source: 'node-6', target: 'node-1', data: { direction: 'in' } },
    ],
  },
  layout: {
    type: 'radial',
    unitRadius: 120,
    linkDistance: 120,
  },
  edge: {
    style: {
      endArrow: true,
    },
    palette: {
      type: 'group',
      field: 'direction',
      color: ['#F08F56', '#00C9C9'],
    },
  },
});

graph.render();

You can also use default configuration:

{
  "edge": {
    "palette": "tableau" // tableau is the palette name, colors assigned by ID by default
  }
}

The effect is shown in the following image:


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

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  data: {
    nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })),
    edges: [
      { source: 'node-1', target: 'node-2', data: { direction: 'out' } },
      { source: 'node-1', target: 'node-3', data: { direction: 'out' } },
      { source: 'node-1', target: 'node-4', data: { direction: 'out' } },
      { source: 'node-5', target: 'node-1', data: { direction: 'in' } },
      { source: 'node-6', target: 'node-1', data: { direction: 'in' } },
    ],
  },
  layout: {
    type: 'radial',
    unitRadius: 120,
    linkDistance: 120,
  },
  edge: {
    style: {
      endArrow: true,
    },
    palette: 'tableau',
  },
});

graph.render();
© Copyright 2026 Ant Group Co., Ltd..备案号：京ICP备15032932号-38
Site search
Documentation and examplesType to start searching

Search documentation, APIs, and examples

↑↓Select↵OpenEscClose