Combo Common Options

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

ComboOptions

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

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

Property	Description	Type	Default
type	Combo type, built-in combo type name or custom combo name	Type	`circle`
style	Combo style configuration, including color, size, etc.	Style	-
state	Style configuration for different states	State	-
palette	Define combo palette for mapping colors based on data	Palette	-
animation	Define combo animation effects	Animation	-

Type

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

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

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

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

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

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

Available values:

circle: Circle Combo
rect: Rect Combo

Style

Defines combo style, including color, size, etc.

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

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

const graph = new Graph({
  combo: {
    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) => `Combo: ${datum.id}`,
      badges: (datum) => datum.data.tags.map((tag) => ({ text: tag })),
    },
  },
});

Where the datum parameter is the combo data object (ComboData), containing all combo data information.

A complete combo consists of the following parts:

key: The main graphic of the combo, representing the primary shape of the combo, such as circle, rectangle, etc.
label: Text label, usually used to display the combo's name or description
halo: Graphic displaying halo effect around the main graphic
badge: Badge displayed at the top-right corner of the combo by default

The following style configurations will be explained by atomic graphics:

Main Graphic Style

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

Basic Style Configuration

Set the basic appearance of the combo:

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' }],
  },
  combo: {
    style: {
      fill: '#5B8FF9', // Blue fill
      stroke: '#1A1A1A', // Dark stroke
      lineWidth: 2,
      fillOpacity: 0.2,
    },
  },
});

graph.render();

Transparency and Shadow Effects

Add transparency and shadow effects to combos:

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' }],
  },
  combo: {
    style: {
      fill: '#61DDAA',
      fillOpacity: 0.15,
      shadowColor: 'rgba(97, 221, 170, 0.4)',
      shadowBlur: 12,
      shadowOffsetX: 2,
      shadowOffsetY: 4,
      stroke: '#F0F0F0',
      lineWidth: 1,
    },
  },
});

graph.render();

Dashed Border Style

Create combos with dashed borders:

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' }],
  },
  combo: {
    style: {
      fill: '#FFF1F0',
      fillOpacity: 0.1,
      stroke: '#F5222D',
      lineWidth: 2,
      lineDash: [6, 4],
      lineCap: 'round',
    },
  },
});

graph.render();

Here is the complete main graphic style configuration:

Property	Description	Type	Default
collapsed	Whether the current combo is collapsed	boolean	false
cursor	Combo mouse hover style, options	string	default
fill	Combo fill color	string	`#99ADD1`
fillOpacity	Combo fill opacity	number \| string	0.04
increasedLineWidthForHitTesting	When lineWidth is small, the interactive area becomes small. Sometimes we want to increase this area to make "thin lines" easier to pick	number	0
lineCap	Combo stroke end cap style	`round` \| `square` \| `butt`	`butt`
lineDash	Combo stroke dash style	number[]	-
lineDashOffset	Combo stroke dash offset	number	-
lineJoin	Combo stroke join style	`round` \| `bevel` \| `miter`	`miter`
lineWidth	Combo stroke width	number	1
opacity	Combo opacity	number \| string	1
pointerEvents	How combo responds to pointer events, options	string	`auto`
shadowBlur	Combo shadow blur	number	-
shadowColor	Combo shadow color	string	-
shadowOffsetX	Combo shadow offset in x direction	number \| string	-
shadowOffsetY	Combo shadow offset in y direction	number \| string	-
shadowType	Combo shadow type	`inner` \| `outer`	`outer`
size	Combo size, quick setting for combo width and height, options	number \| number[]	-
stroke	Combo stroke color	string	`#99ADD1`
strokeOpacity	Combo stroke opacity	number \| string	1
transform	Transform property allows you to rotate, scale, skew or translate the given combo	string	-
transformOrigin	Rotation and scaling center, also called transformation center	string	-
visibility	Whether combo is visible	`visible` \| `hidden`	`visible`
x	Combo x coordinate	number	0
y	Combo y coordinate	number	0
z	Combo z coordinate	number	0
zIndex	Combo rendering layer	number	0

Size

Combo size, quick setting for combo width and height, supports three configuration methods:

number: Indicates that combo width and height are the same as the specified value
[number, number]: Indicates that combo width and height are represented by array elements in order for combo width and height
[number, number, number]: Indicates that combo width, height, and depth are represented by array elements in order

PointerEvents

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

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

auto: Default value, equivalent to visiblepainted
none: Will never be the target of responding events
visiblepainted: Will respond to events only when 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 when 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 fill value
visiblestroke: Will respond 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 the stroke value
visible: Will respond to events only when 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 fill and stroke values
painted: Will respond to events only when 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 visibility value
fill: Will respond to events only when the following conditions are met:
- Triggered in the graphic fill area, not affected by the fill value
- Not affected by visibility value
stroke: Will respond to events only when the following conditions are met:
- Triggered in the graphic stroke area, not affected by the stroke value
- Not affected by visibility value
all: Will respond to events as long as entering the graphic fill and stroke areas, not affected by fill, stroke, visibility values

Usage Examples:

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

// Example 2: Does not respond to events at all
const graph = new Graph({
  combo: {
    style: {
      pointerEvents: 'none', // Combo does not respond to any events
    },
  },
});

Cursor

Style When Expanded

Main graphic style when the combo is expanded

Attribute	Description	Type	Default
collapsed	Whether the combo is currently collapsed	boolean	false
cursor	Combo mouse hover style, configuration item	string	default
fill	Combo fill color	string	`#99ADD1`
fillOpacity	Combo fill color opacity	number string	0.04
increasedLineWidthForHitTesting	When lineWidth is small, the interactive area also becomes smaller. Sometimes we want to enlarge this area to make "thin lines" easier to pick up	number	0
lineCap	Combo stroke end style	`round` `square` `butt`	`butt`
lineDash	Combo stroke dash style	number[]	-
lineDashOffset	Combo stroke dash offset	number	-
lineJoin	Combo stroke join style	`round` `bevel` `miter`	`miter`
lineWidth	Combo stroke width	number	1
opacity	Combo opacity	number string	1
shadowBlur	Combo shadow blur	number	-
shadowColor	Combo shadow color	string	-
shadowOffsetX	Combo shadow offset in the x-axis direction	number string	-
shadowOffsetY	Combo shadow offset in the y-axis direction	number string	-
shadowType	Combo shadow type	`inner` `outer`	`outer`
stroke	Combo stroke color	string	`#99add1`
strokeOpacity	Combo stroke color opacity	number string	1
visibility	Whether the combo is visible	`visible` `hidden`	`visible`
x	Combo x coordinate	number	0
y	Combo y coordinate	number	0
z	Combo z coordinate	number	0
zIndex	Combo rendering layer	number	0
`{styleProps}`	More graphic configurations, refer to BaseStyleProps configuration items	BaseStyleProps	-

Cursor

Example:

const graph = new Graph({
  // Other configurations...
  combo: {
    style: {
      fill: '#1783FF', // Fill color
      stroke: '#000', // Stroke color
      lineWidth: 2, // Stroke width
    },
  },
});

The effect is as follows:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: { fill: '#1783FF', stroke: '#000', lineWidth: 2 },
  },
});

graph.render();

Style When Collapsed

Effective when collapsed is true

Attribute	Description	Type	Default
collapsedCursor	Mouse hover style when the combo is collapsed, configuration item	string	Same as the cursor when expanded
collapsedFill	Fill color when the combo is collapsed	string	Same as the fill when expanded
collapsedFillOpacity	Fill color opacity when the combo is collapsed	number string	1
collapsedIncreasedLineWidthForHitTesting	When the combo is collapsed, if lineWidth is small, the interactive area also becomes smaller. Sometimes we want to enlarge this area to make "thin lines" easier to pick up	number	0
collapsedLineCap	Stroke end style when the combo is collapsed	`round` `square` `butt`	Same as the lineCap when expanded
collapsedLineDash	Stroke dash style when the combo is collapsed	number[]	Same as the lineDash when expanded
collapsedLineDashOffset	Stroke dash offset when the combo is collapsed	number	Same as the lineDashOffset when expanded
collapsedLineJoin	Stroke join style when the combo is collapsed	`round` `bevel` `miter`	Same as the lineJoin when expanded
collapsedLineWidth	Stroke width when the combo is collapsed	number	Same as the lineWidth when expanded
collapsedMarker	Whether to display the marker when the combo is collapsed, configuration item	boolean	true
collapsedOpacity	Opacity when the combo is collapsed	number string	Same as the opacity when expanded
collapsedShadowBlur	Shadow blur when the combo is collapsed	number	Same as the shadowBlur when expanded
collapsedShadowColor	Shadow color when the combo is collapsed	string	Same as the shadowColor when expanded
collapsedShadowOffsetX	Shadow offset in the x-axis direction when the combo is collapsed	number string	Same as the shadowOffsetX when expanded
collapsedShadowOffsetY	Shadow offset in the y-axis direction when the combo is collapsed	number string	Same as the shadowOffsetY when expanded
collapsedShadowType	Shadow type when the combo is collapsed	`inner` `outer`	Same as the shadowType when expanded
collapsedSize	Size when the combo is collapsed	number \| [number, number] \| [number, number, number]	32
collapsedStroke	Stroke color when the combo is collapsed	string	Same as the stroke when expanded
collapsedStrokeOpacity	Stroke color opacity when the combo is collapsed	number string	Same as the strokeOpacity when expanded
collapsedVisibility	Whether the combo is visible when collapsed	`visible` `hidden`	Same as the visibility when expanded
`collapsed{styleProps}`	More graphic configurations, refer to BaseStyleProps configuration items	BaseStyleProps	-

Example:

const graph = new Graph({
  // Other configurations...
  combo: {
    style: {
      collapsedFill: '#1783FF', // Fill color
      collapsedStroke: '#000', // Stroke color
      collapsedLineWidth: 2, // Stroke width
    },
  },
});

The effect is as follows:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1', style: { collapsed: true } }],
  },
  combo: {
    style: { collapsedFill: '#1783FF', collapsedStroke: '#000', collapsedLineWidth: 2 },
  },
});

graph.render();

Collapsed Marker Style

Effective when collapsedMarker is true

Attribute	Description	Type	Default
collapsedMarkerType	Marker type displayed when the combo is collapsed - `'child-count'`: Number of child elements (including Node and Combo) - `'descendant-count'`: Number of descendant elements (including Node and Combo) - `'node-count'`: Number of descendant elements (only including Node) - `(children: NodeLikeData[]) => string`: Custom processing logic	`child-count` \| `descendant-count` \| `node-count` \| ((children: NodeData \| ComboData[]) => string)	`child-count`
collapsedMarkerFill	Icon text color	string	#fff
collapsedMarkerFillOpacity	Icon text color opacity	number	1
collapsedMarkerFontSize	Icon font size	number	12
collapsedMarkerFontWeight	Icon font weight	number \| string	`normal`
collapsedMarkerRadius	Icon corner radius	number	0
collapsedMarkerSrc	Image source. Its priority is higher than `collapsedMarkerText`	string	-
collapsedMarkerText	Icon text	string	-
collapsedMarkerTextAlign	Icon text horizontal alignment	`center` `end` `left` `right` `start`	`center`
collapsedMarkerTextBaseline	Icon text alignment baseline	`alphabetic` `bottom` `hanging` `ideographic` `middle` `top`	`middle`
collapsedMarkerWidth	Icon width	number	-
collapsedMarkerHeight	Icon height	number	-
collapsedMarkerZIndex	Icon rendering layer	number	1
`collapsedMarker{StyleProps}`	More icon style configurations, refer to TextStyleProps, ImageStyleProps configuration items. For example, collapsedMarkerFontSize represents the font size of the text icon	TextStyleProps \| ImageStyleProps	-

Example:

const graph = new Graph({
  // Other configurations...
  combo: {
    style: {
      collapsedMarkerFill: '#1783FF', // Fill color
      collapsedMarkerFontSize: 30, // Icon font size
    },
  },
});

The effect is as follows:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', combo: 'combo1' },
      { id: 'node2', combo: 'combo1' },
    ],
    combos: [{ id: 'combo1', style: { collapsed: true } }],
  },
  combo: {
    style: {
      collapsedMarkerFill: '#1783FF',
      collapsedMarkerFontSize: 30,
    },
  },
});

graph.render();

Label Style

Labels are used to display text information for combos, supporting rich text style configuration and flexible position layout.

Basic Label Configuration

Add basic text label to combo:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      labelText: 'Sales Department', // Label text content
      labelFill: '#1A1A1A', // Label text color
      labelFontSize: 14, // Label font size
      labelPlacement: 'bottom', // Label position: bottom
    },
  },
});

graph.render();

Multi-line Text Label

Configure labels that support multi-line display:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      labelText: 'This is a combo label text content that supports multi-line display',
      labelWordWrap: true, // Enable text wrapping
      labelMaxWidth: 100, // Maximum width 100px
      labelMaxLines: 3, // Maximum 3 lines
      labelTextAlign: 'center', // Center text alignment
      labelFontSize: 12,
    },
  },
});

graph.render();

Custom Style Label

Create labels with special styles:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      labelText: 'IMPORTANT',
      labelFill: '#FF4D4F', // Red text
      labelFontSize: 16,
      labelFontWeight: 'bold', // Bold
      labelFontStyle: 'italic', // Italic
      labelTextDecorationLine: 'underline', // Underline
      labelLetterSpacing: 2, // Letter spacing
      labelPlacement: 'top',
    },
  },
});

graph.render();

Here are the complete label style configurations:

Property	Description	Type	Default
label	Whether to show combo label	boolean	true
labelCursor	Cursor style when hovering over combo label, options	string	`default`
labelFill	Combo label text color	string	#000
labelFillOpacity	Combo label text color opacity	number	1
labelFontFamily	Combo label font family	string	-
labelFontSize	Combo label font size	number	12
labelFontStyle	Combo label font style	`normal` \| `italic` \| `oblique`	-
labelFontVariant	Combo label font variant	`normal` \| `small-caps` \| string	-
labelFontWeight	Combo label font weight	`normal` \| `bold` \| `bolder` \| `lighter` \| number	400
labelLeading	Line spacing	number	0
labelLetterSpacing	Combo label letter spacing	number \| string	-
labelLineHeight	Combo label line height	number \| string	-
labelMaxLines	Combo label maximum lines	number	1
labelMaxWidth	Combo label maximum width, options	number \| string	`200%`
labelOffsetX	Combo label X offset	number	0
labelOffsetY	Combo label Y offset	number	0
labelPadding	Combo label padding	number \| number[]	0
labelPlacement	Combo label position relative to combo main graphic, options	string	`bottom`
labelText	Combo label text content	string	-
labelTextAlign	Combo label text horizontal alignment	`start` \| `center` \| `middle` \| `end` \| `left` \| `right`	`left`
labelTextBaseline	Combo label text baseline	`top` \| `hanging` \| `middle` \| `alphabetic` \| `ideographic` \| `bottom`	-
labelTextDecorationColor	Combo label text decoration color	string	-
labelTextDecorationLine	Combo label text decoration line	string	-
labelTextDecorationStyle	Combo label text decoration style	`solid` \| `double` \| `dotted` \| `dashed` \| `wavy`	-
labelTextOverflow	Combo label text overflow handling	`clip` \| `ellipsis` \| string	-
labelTextPath	Combo label text path	Path	-
labelWordWrap	Whether combo label enables auto line wrapping. When labelWordWrap is enabled, parts exceeding labelMaxWidth automatically wrap	boolean	false
labelZIndex	Combo label rendering layer	number	0
`label{StyleProps}`	More label style configurations, refer to TextStyleProps property values. For example, labelOpacity represents label opacity	TextStyleProps	-

LabelPlacement

Label position relative to combo main graphic, available values:

center: Label at combo center
top, bottom, left, right: Label at top, bottom, left, right of combo
top-left, top-right, bottom-left, bottom-right: Label at four corners of combo
left-top, left-bottom, right-top, right-bottom: Label at edge endpoints of combo

LabelMaxWidth

When auto line wrapping labelWordWrap is enabled, text wraps when exceeding this width:

string: Defines maximum width as percentage relative to combo element width. For example, 50% means label width doesn't exceed half of combo width
number: Defines maximum width in pixels. For example, 100 means label maximum width is 100 pixels

For example, setting multi-line label text:

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

Label Background Style

Label background provides background decoration for label text, improving label readability and visual effects.

Basic Background Style

Add simple background to label:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      labelText: 'Important Combo',
      labelFill: '#fff', // White text
      labelBackground: true, // Enable background
      labelBackgroundFill: '#1783FF', // Blue background
      labelBackgroundPadding: [4, 8], // Padding: vertical 4px, horizontal 8px
      labelBackgroundRadius: 4, // Border radius
    },
  },
});

graph.render();

Gradient Background Effect

Create label background with gradient effect:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      labelText: 'VIP Combo',
      labelFill: '#fff',
      labelFontWeight: 'bold',
      labelBackground: true,
      labelBackgroundFill: 'linear-gradient(45deg, #FF6B6B, #4ECDC4)', // Gradient background
      labelBackgroundPadding: [6, 12],
      labelBackgroundRadius: 20, // Large border radius
      labelBackgroundShadowColor: 'rgba(0,0,0,0.2)',
      labelBackgroundShadowBlur: 4,
      labelBackgroundShadowOffsetY: 2,
    },
  },
});

graph.render();

Stroke-only Background Style

Create label background with stroke only:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      labelText: 'Border Label',
      labelFill: '#1783FF',
      labelBackground: true,
      labelBackgroundFill: 'transparent', // Transparent background
      labelBackgroundStroke: '#1783FF', // Blue stroke
      labelBackgroundLineWidth: 2, // Stroke width
      labelBackgroundPadding: [4, 8],
      labelBackgroundRadius: 8,
    },
  },
});

graph.render();

Here are the complete label background style configurations:

Property	Description	Type	Default
labelBackground	Whether to show combo label background	boolean	false
labelBackgroundCursor	Combo label background cursor style, options	string	`default`
labelBackgroundFill	Combo label background fill color	string	#000
labelBackgroundFillOpacity	Combo label background opacity	number	0.75
labelBackgroundHeight	Combo label background height	string \| number	-
labelBackgroundLineDash	Combo label background dash configuration	number \| string \|(number \| string )[]	-
labelBackgroundLineDashOffset	Combo label background dash offset	number	-
labelBackgroundLineWidth	Combo label background stroke line width	number	-
labelBackgroundPadding	Combo label background padding	number \| number[]	[2, 4, 2, 4]
labelBackgroundRadius	Combo label background border radius - number: Set all four corner radius uniformly - number[]: Set four corner radius separately, missing values auto-filled	number \| number[]	0
labelBackgroundShadowBlur	Combo label background shadow blur	number	-
labelBackgroundShadowColor	Combo label background shadow color	string	-
labelBackgroundShadowOffsetX	Combo label background shadow X offset	number	-
labelBackgroundShadowOffsetY	Combo label background shadow Y offset	number	-
labelBackgroundStroke	Combo label background stroke color	string	-
labelBackgroundStrokeOpacity	Combo label background stroke opacity	number \| string	1
labelBackgroundVisibility	Whether combo label background is visible	`visible` \| `hidden`	-
labelBackgroundZIndex	Combo label background rendering layer	number	1
`labelBackground{StyleProps}`	More label background style configurations, refer to RectStyleProps property values. For example, labelBackgroundOpacity represents label background opacity	RectStyleProps	-

Badge Style

Badges are small markers displayed on combos, usually used to show status, quantity, or other auxiliary information. Multiple badges can be displayed simultaneously with customizable positions.

Single Badge

Add a simple badge to the combo:

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' }],
  },
  combo: {
    style: {
      badges: [
        { text: 'NEW' }, // Display at top by default
      ],
    },
  },
});

graph.render();

Multiple Badges

Add multiple badges at different positions to the combo:

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' }],
  },
  combo: {
    style: {
      badge: true, // Whether to show badges
      badges: [
        { text: 'A', placement: 'right-top' },
        { text: 'Important', placement: 'right' },
        { text: 'Notice', placement: 'right-bottom' },
      ],
      badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'], // Badge background palette
      badgeFontSize: 7, // Badge font size
    },
  },
});

graph.render();

Custom Badge Style

Fully customize badge appearance:

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' }],
  },
  combo: {
    style: {
      badges: [
        {
          text: '99+',
          placement: 'right-top',
          backgroundFill: '#FF4D4F', // Red background
          fill: '#fff', // White text
          fontSize: 10,
          padding: [2, 6],
          backgroundRadius: 8,
        },
      ],
    },
  },
});

graph.render();

Here are the complete badge style configurations:

Property	Description	Type	Default
badge	Whether to show combo badge	boolean	true
badgePalette	Combo badge background palette	string[]	[`#7E92B5`, `#F4664A`, `#FFBE3A`]
badges	Combo badge settings	BadgeStyleProps[]	-

BadgeStyleProps

Property	Description	Type	Default
background	Whether to show combo badge background	boolean	true
backgroundCursor	Combo badge background cursor style, options	string	`default`
backgroundFill	Combo badge background fill color. If not specified, consider badgePalette for sequential allocation	string	-
backgroundFillOpacity	Combo badge background fill opacity	number	1
backgroundFilter	Combo badge background filter	string	-
backgroundHeight	Combo badge background height	number \| string	-
backgroundLineDash	Combo badge background dash configuration	number \| string \|(number \| string )[]	-
backgroundLineDashOffset	Combo badge background dash offset	number	-
backgroundLineWidth	Combo badge background stroke line width	number	-
backgroundRadius	Combo badge background border radius - number: Set all four corner radius uniformly - number[]: Set four corner radius separately, missing values will be filled - string: Similar to CSS padding property, space-separated	number \| number[] \| string	0
backgroundShadowBlur	Combo badge background shadow blur	number	-
backgroundShadowColor	Combo badge background shadow color	string	-
backgroundShadowOffsetX	Combo badge background shadow X offset	number	-
backgroundShadowOffsetY	Combo badge background shadow Y offset	number	-
backgroundStroke	Combo badge background stroke color	string	-
backgroundStrokeOpacity	Combo badge background stroke opacity	number \| string	1
backgroundVisibility	Whether combo badge background is visible	`visible` \| `hidden`	-
fill	Combo badge text color	string	-
fontFamily	Combo badge font family	string	-
fontSize	Combo badge font size	number	8
fontStyle	Combo badge font style	`normal` \| `italic` \| `oblique`	`normal`
fontVariant	Combo badge font variant	`normal` \| `small-caps` \| string	`normal`
fontWeight	Combo badge font weight	number \| string	`normal`
lineHeight	Combo badge line height	string \| number	-
lineWidth	Combo badge line width	string \| number	-
maxLines	Combo badge text maximum lines	number	1
offsetX	Combo badge X offset	number	0
offsetY	Combo badge Y offset	number	0
padding	Combo badge padding	number \| number[]	0
placement	Combo badge position relative to combo main graphic. If not specified, defaults to clockwise placement starting from top-right	`left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right`	-
text	Combo badge text content	string	-
textAlign	Combo badge text horizontal alignment	`start` \| `center` \| `middle` \| `end` \| `left` \| `right`	`left`
textBaseline	Combo badge text baseline	`top` \| `hanging` \| `middle` \| `alphabetic` \| `ideographic` \| `bottom`	`alphabetic`
textDecorationColor	Combo badge text decoration color	string	-
textDecorationLine	Combo badge text decoration line	string	-
textDecorationStyle	Combo badge text decoration style	`solid` \| `double` \| `dotted` \| `dashed` \| `wavy`	`solid`
textOverflow	Combo badge text overflow handling	`clip` \| `ellipsis` \| string	`clip`
visibility	Whether combo badge is visible	`visible` \| `hidden`	-
wordWrap	Whether combo badge text auto-wraps	boolean	-
zIndex	Combo badge rendering layer	number	3

Halo Style

Halo effect is used to highlight combos, usually used in mouse hover, selected, or active states, adding glow effect around combos.

Basic Halo Effect

Add simple halo effect to combo:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      halo: true, // Enable halo
      haloStroke: '#1783FF', // Blue halo
      haloLineWidth: 8, // Halo width
      haloStrokeOpacity: 0.3, // Halo opacity
    },
  },
});

graph.render();

Colorful Halo Effect

Create colorful gradient halo effect:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      halo: true,
      haloStroke: '#FF4D4F', // Red halo
      haloLineWidth: 12, // Thicker halo
      haloStrokeOpacity: 0.5,
      haloFilter: 'blur(2px)', // Blur filter effect
    },
  },
});

graph.render();

Dynamic Halo Effect

Use halo effect in state transitions:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', combo: 'combo1' }],
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      // No halo in default state
      halo: false,
    },
    state: {
      // Show orange halo in hover state
      hover: {
        halo: true,
        haloStroke: '#FF7A00',
        haloLineWidth: 10,
        haloStrokeOpacity: 0.4,
      },
      // Show green halo in selected state
      selected: {
        halo: true,
        haloStroke: '#52C41A',
        haloLineWidth: 6,
        haloStrokeOpacity: 0.6,
      },
    },
  },
});

graph.render();

Here are the complete halo style configurations:

Property	Description	Type	Default
halo	Whether to show combo halo	boolean	false
haloCursor	Combo halo cursor style, options	string	`default`
haloDraggable	Whether combo halo allows dragging	boolean	true
haloDroppable	Whether combo halo allows receiving dragged elements	boolean	false
haloFill	Halo fill color	string	Same as main graphic fill color
haloFillRule	Combo halo fill rule	`nonzero` \| `evenodd`	-
haloFilter	Combo halo filter effect, such as 'blur(2px)' for blur effect	string	-
haloLineWidth	Combo halo stroke width, controls halo thickness	number	12
haloPointerEvents	Whether combo halo effect responds to pointer events, options	string	`none`
haloStroke	Combo halo stroke color, this property is used to set the color of halo around combo, helping to highlight the combo	string	`#99add1`
haloStrokeOpacity	Combo halo stroke opacity, recommended to use 0.2-0.6 values for natural halo effect	number	0.25
haloVisibility	Combo halo visibility	`visible` \| `hidden`	`visible`
haloZIndex	Combo halo rendering layer, usually set to negative value to ensure halo is below combo main graphic	number	-1
`halo{StyleProps}`	More halo style configurations, refer to DisplayObject options. For example, haloFillOpacity represents halo fill opacity	DisplayObject	-

Halo Usage Recommendations:

Performance Consideration: Halo effects increase rendering burden, recommend enabling only when necessary
Color Matching: Halo color should coordinate with combo main color tone, avoid being too abrupt
Opacity Setting: Reasonable opacity (0.2-0.6) can create natural halo effect
State Application: Halo is usually used for hover, selected, active and other interactive states

Icon Style

Icons are used to display text or image content in combos, usually located at the center of the combo, can be used to represent combo type or function.

Text Icon

Use text as combo icon:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      iconText: 'A', // Display letter A
      iconFill: '#1783FF', // Blue text
      iconFontSize: 24, // Large font
      iconFontWeight: 'bold', // Bold
    },
  },
});

graph.render();

Image Icon

Use image as combo icon:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      fill: '#1890FF',
      iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
      iconWidth: 32,
      iconHeight: 32,
    },
  },
});

graph.render();

Colorful Text Icon

Create text icon with special styles:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    combos: [{ id: 'combo1' }],
  },
  combo: {
    style: {
      iconText: 'Dept',
      iconFill: '#FF4D4F', // Red text
      iconFontSize: 16,
      iconFontWeight: 'bold',
      iconFontStyle: 'italic', // Italic
      iconTextDecorationLine: 'underline', // Underline
      iconLetterSpacing: 1, // Letter spacing
    },
  },
});

graph.render();

Here are the complete icon style configurations:

Property	Description	Type	Default
icon	Whether to show combo icon	boolean	true
iconCursor	Combo icon cursor style, options	string	`default`
iconFill	Combo icon text color	string	-
iconFillOpacity	Combo icon text color opacity	number	1
iconFontFamily	Combo icon font family	string	-
iconFontSize	Combo icon font size	number	16
iconFontStyle	Combo icon font style	`normal` \| `italic` \| `oblique`	`normal`
iconFontVariant	Combo icon font variant	`normal` \| `small-caps` \| string	`normal`
iconFontWeight	Combo icon font weight	number \| string	`normal`
iconHeight	Combo icon height, used to control image size when using image icon	number	Half of main graphic height
iconLetterSpacing	Combo icon text letter spacing	number \| string	-
iconLineHeight	Combo icon text line height	number \| string	-
iconMaxLines	Combo icon text maximum lines	number	1
iconOffsetX	Combo icon X offset	number	0
iconOffsetY	Combo icon Y offset	number	0
iconOpacity	Combo icon opacity	number	1
iconRadius	Combo icon border radius (only effective for rectangular icons)	number	0
iconSrc	Combo image source. Has higher priority than iconText, supports local and network images	string	-
iconText	Combo icon text content, supports text, Unicode characters, etc.	string	-
iconTextAlign	Combo icon text horizontal alignment	`start` \| `center` \| `middle` \| `end` \| `left` \| `right`	`center`
iconTextBaseline	Combo icon text baseline	`top` \| `hanging` \| `middle` \| `alphabetic` \| `ideographic` \| `bottom`	`middle`
iconTextDecorationColor	Combo icon text decoration color	string	-
iconTextDecorationLine	Combo icon text decoration line, such as underline, strikethrough, etc.	string	-
iconTextDecorationStyle	Combo icon text decoration style	`solid` \| `double` \| `dotted` \| `dashed` \| `wavy`	`solid`
iconTextOverflow	Combo icon text overflow handling	`clip` \| `ellipsis` \| string	`clip`
iconVisibility	Whether combo icon is visible	`visible` \| `hidden`	`visible`
iconWidth	Combo icon width, used to control image size when using image icon	number	Half of main graphic width
iconWordWrap	Whether combo icon text auto-wraps	boolean	false
iconZIndex	Combo icon rendering layer	number	1
`icon{StyleProps}`	More icon style configurations, refer to specific icon type options. For example, iconStroke represents icon stroke color	-	-

Icon Usage Recommendations:

Priority: iconSrc (image) has higher priority than iconText (text), if both are set, image will be displayed first
Size Control: Recommend setting icon size reasonably according to combo size, avoid icons being too large or small affecting visual effect
Performance Optimization: Text icons have better performance, image icons require additional network requests and rendering overhead
Style Consistency: Icon styles in the same graph should be consistent to improve overall visual effect
Accessibility: Ensure icon color has sufficient contrast with background for easy user identification

State

In some interactive behaviors, such as clicking to select a combo or hovering to activate an edge, it is merely marking certain states on the element. To reflect these states in the visual space seen by the end user, we need to set different graphic element styles for different states to respond to changes in the element's state.

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 default styles of the element.

The data structure is as follows:

type ComboState = {
  [state: string]: ComboStyle;
};

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

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

The effect is as follows:

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

⚠️ Dynamic Configuration: State configuration also supports dynamic configuration, which can be used to set styles dynamically based on combo data:

const graph = new Graph({
  combo: {
    state: {
      // Static configuration
      selected: {
        stroke: '#1783FF',
        lineWidth: 2,
      },

      // Dynamic configuration - arrow function form
      hover: (datum) => ({
        fill: datum.data.isVIP ? '#FFD700' : '#1783FF',
        fillOpacity: 0.3,
      }),

      // Dynamic configuration - regular function form (access to graph instance)
      active: function (datum) {
        console.log(this); // graph instance
        return {
          stroke: datum.data.level > 3 ? '#FF4D4F' : '#52C41A',
          lineWidth: 3,
        };
      },
    },
  },
});

⚠️ State Priority: When a combo has multiple states simultaneously, the style merge follows the following priority (high to low):

Later defined states override earlier defined states
More specific selectors have higher priority
Dynamic configuration has higher priority than static configuration

For example, if a combo has both selected and hover states, and hover is defined after selected, then hover state styles will override selected state styles.

Animation

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

Disable all combo animations

{
  "combo": {
    "animation": false
  }
}

Configure stage animations

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

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

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

Enter Animation

Configure animation when combo enters the canvas:

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' }],
  },
  combo: {
    animation: {
      enter: [
        {
          fields: ['opacity'], // Animate opacity property
          from: 0, // Start from 0
          to: 1, // End at 1
          duration: 1000, // Animation duration
          easing: 'ease-out', // Easing function
        },
      ],
    },
  },
});

graph.render();

Update Animation

Configure animation when combo updates:

const graph = new Graph({
  combo: {
    animation: {
      update: [
        {
          fields: ['x', 'y'], // Only animate x and y properties during update
          duration: 1000, // Animation duration
          easing: 'linear', // Easing function
        },
      ],
    },
  },
});

Exit Animation

Configure animation when combo leaves the canvas:

const graph = new Graph({
  combo: {
    animation: {
      exit: [
        {
          fields: ['opacity'], // Animate opacity property
          to: 0, // End at 0
          duration: 500, // Animation duration
          easing: 'ease-in', // Easing function
        },
      ],
    },
  },
});

Show/Hide Animation

Configure animation when combo shows/hides:

const graph = new Graph({
  combo: {
    animation: {
      show: [
        {
          fields: ['opacity'],
          from: 0,
          to: 1,
          duration: 300,
        },
      ],
      hide: [
        {
          fields: ['opacity'],
          to: 0,
          duration: 300,
        },
      ],
    },
  },
});

You can also use built-in animation effects:

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

You can pass false to disable specific stage animations:

{
  "combo": {
    "animation": {
      "enter": false // Disable combo enter animation
    }
  }
}

Animation Configuration Options:

Property	Description	Type	Default
fields	Properties to animate	string[]	-
from	Starting value	number \| string	-
to	Ending value	number \| string	-
duration	Animation duration (milliseconds)	number	1000
easing	Easing function	string	'ease'
delay	Animation delay (milliseconds)	number	0
repeat	Number of repetitions (-1 for infinite)	number	0
direction	Animation direction	'normal' \| 'reverse' \| 'alternate' \| 'alternate-reverse'	'normal'

Palette

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

For palette definition, please refer to Palette.

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

For example, assign combo colors to a group of data by category field, so that combos of the same category have the same color:

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

The effect is as follows:

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

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

graph.render();

You can also use default configuration:

{
  "combo": {
    "palette": "tableau" // tableau is palette name, defaults to assign colors by ID
  }
}

The effect is as follows:

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

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

graph.render();