---
title: "Options"
description: "Options"
language: "en"
canonical: "https://g6.antv.antgroup.com/en/manual/graph/option/"
version: "5.1.1"
---
[Resource index](/llms.txt)
## autoFit
> _{ type: 'view'; options?: [FitViewOptions](#fitviewoptions); animation?: [ViewportAnimationEffectTiming](#viewportanimationeffecttiming); } \| { type: 'center'; animation?: [ViewportAnimationEffectTiming](#viewportanimationeffecttiming); } \| 'view' \| 'center'_
Whether to automatically fit the canvas. ⚠️ **Note**: Each time `render` is executed, it will adapt according to `autoFit`.
Two basic adaptation modes:
- `'view'` - Automatically scale to ensure all content is visible within the view
- `'center'` - Center the content without changing the zoom level
More precise adaptation control can be achieved through object form:
```javascript
const graph = new Graph({
autoFit: {
type: 'view', // Adaptation type: 'view' or 'center'
options: {
// Only applicable to 'view' type
when: 'overflow', // When to adapt: 'overflow' (only when content overflows) or 'always' (always adapt)
direction: 'x', // Adaptation direction: 'x', 'y', or 'both'
},
animation: {
// Adaptation animation effect
duration: 1000, // Animation duration (milliseconds)
easing: 'ease-in-out', // Animation easing function
},
},
});
```
#### FitViewOptions
| Property | Description | Type | Default | Required |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ---------- | -------- |
| when | Adaptation occurs under the following conditions
- `'overflow'` adapt only when content overflows
- `'always'` always adapt | `'overflow'` \| `'always'` | `'always'` | |
| direction | Adapt only in the specified direction
- `'x'` adapt only in x direction
- `'y'` adapt only in y direction
- `'both'` adapt in both x and y directions | `'x'` \| `'y'` \| `'both'` | `'both'` | |
#### ViewportAnimationEffectTiming
```typescript
type ViewportAnimationEffectTiming =
| boolean // true to enable default animation, false to disable animation
| {
easing?: string; // Animation easing function: 'ease-in-out', 'ease-in', 'ease-out', 'linear'
duration?: number; // Animation duration (milliseconds)
};
```
## autoResize
> _boolean_ **Default:** `false`
Whether to automatically resize the canvas.
Implemented based on the `window.onresize` event. When the browser window size changes, the canvas will automatically resize to fit the container.
## background
> _string_
Canvas background color.
This color is used as the background color when exporting images. Any valid CSS color value can be used, such as hexadecimal, RGB, RGBA, etc.
## canvas
> [CanvasConfig](#canvasconfig)
Canvas configuration. Related configuration items under GraphOptions (such as `container`, `width`, `height`, `devicePixelRatio`, `background`, `cursor`) are shortcut configuration items and will be converted to canvas configuration items.
#### CanvasConfig
| Property | Description | Type | Default | Required |
| ---------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------- | -------- |
| container | Canvas container | string \| HTMLElement | - | |
| devicePixelRatio | Device pixel ratio | number | - | |
| width | Canvas width | number | - | |
| height | Canvas height | number | - | |
| cursor | Cursor style, same as [GraphOptions.cursor](#cursor) | string | - | |
| background | Canvas background color | string | - | |
| renderer | Renderer, same as [GraphOptions.renderer](#renderer) | (layer: `'background'` \| `'main'` \| `'label'` \| `'transient'`) => IRenderer | - | |
| enableMultiLayer | Whether to enable multi-layer. Non-dynamic parameter, effective only during initialization | boolean | - | |
## container
> _string \|_ _HTMLElement_ _\|_ Canvas
Canvas container, can be one of the following three assignments:
- ID string of the DOM element, such as `'container'`
- HTML element object, such as `document.getElementById('container')`
- Canvas instance, such as `new Canvas(options)`, where `options` is of type [CanvasConfig](#canvasconfig).
## cursor
> string
Cursor style, controls the cursor shape when hovering over the canvas. Any valid CSS cursor value can be used.
Supported values include: `'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'.
Cursor values are referenced from [MDN - cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor).
## devicePixelRatio
> _number_
Device pixel ratio.
Used for high-definition screens, the default is [window.devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio).
## width
> _number_
Canvas width. If not set, the container width will be automatically obtained.
## height
> _number_
Canvas height. If not set, the container height will be automatically obtained.
## renderer
> _(layer: 'background' \| 'main' \| 'label' \| 'transient') =>_ _IRenderer_
Manually specify the renderer
G6 uses a layered rendering approach, divided into four layers: `background`, `main`, `label`, `transient`. Users can set the renderer for each layer of the canvas through this configuration item.
**Example**: Use SVG renderer for rendering
```javascript
import { Renderer as SVGRenderer } from '@antv/g-svg';
import { Graph } from '@antv/g6';
const graph = new Graph({
renderer: () => new SVGRenderer(),
});
```
## padding
> _number \| number[]_
Canvas padding
Usually, during adaptation, it will be adapted according to the padding. It can be a single value (same padding on all sides) or an array form (specify the padding for top, right, bottom, left in order).
**Example:**
```javascript
// Single value
const graph1 = new Graph({
padding: 20, // 20 pixels of padding on all sides
});
// Array form
const graph2 = new Graph({
padding: [20, 40, 20, 40], // Padding for top, right, bottom, left
});
```
## rotation
> _number_ **Default:** `0`
Rotation angle (in radians)
## x
> _number_
Viewport x coordinate, sets the initial horizontal position of the viewport.
## y
> _number_
Viewport y coordinate, sets the initial vertical position of the viewport.
## zoom
> _number_ **Default:** `1`
Sets the initial zoom level of the viewport, 1 means 100% (original size).
## zoomRange
> _[number, number]_ **Default:** `[0.01, 10]`
Zoom range, limits the minimum and maximum scale that users can zoom.
## animation
> _boolean \| [AnimationEffectTiming](#animationeffecttiming)_
Enable or disable global animation
When configured as an animation option, animation will be enabled, and this animation configuration will be used as the base configuration for global animation.
#### AnimationEffectTiming
| Property | Description | Type | Default | Required |
| ---------- | ------------------------------ | ------------------------------------------------------------------- | ----------- | -------- |
| delay | Animation delay time | number | - | |
| direction | Animation direction | `'alternate'` \| `'alternate-reverse'` \| `'normal'` \| `'reverse'` | `'forward'` | |
| duration | Animation duration | number | - | |
| easing | Animation easing function | string | - | |
| fill | Fill mode after animation ends | `'auto'` \| `'backwards'` \| `'both'` \| `'forwards'` \| `'none'` | `'none'` | |
| iterations | Animation iteration count | number | - | |
**Example:**
```javascript
// Simple enable
const graph1 = new Graph({
animation: true,
});
// Detailed configuration
const graph2 = new Graph({
animation: {
duration: 500, // Animation duration (milliseconds)
easing: 'ease-in-out', // Easing function
},
});
```
## data
> [GraphData](#graphdata)
Data.
#### GraphData
| Property | Description | Type | Default | Required |
| -------- | ----------- | ------------------------- | ------- | -------- |
| nodes | Node data | [NodeData](#nodedata)[] | - | ✓ |
| edges | Edge data | [EdgeData](#edgedata)[] | - | ✓ |
| combos | Combo data | [ComboData](#combodata)[] | - | ✓ |
#### NodeData
| Property | Description | Type | Default | Required |
| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------- | -------- |
| id | Unique identifier for the node, used to distinguish different nodes | string | - | ✓ |
| type | Node type, built-in node type name or custom node name | string | - | |
| data | Node data, used to store custom data for the node, such as node name, description, etc. Can be accessed in style mapping through callback functions | object | - | |
| style | Node style, including visual attributes such as position, size, color, etc. | object | - | |
| states | Initial state of the node, such as selected, activated, hovered, etc. | string[] | - | |
| combo | ID of the combo to which it belongs, used to organize the hierarchical relationship of nodes, if none, it is null | string \| null | - | |
| children | Collection of child node IDs, used only in tree graph scenarios | string[] | - | |
#### EdgeData
| Property | Description | Type | Default | Required |
| -------- | -------------------------------------------------------------------------------------------------------------- | -------- | ------- | -------- |
| source | Starting node ID of the edge | string | - | ✓ |
| target | Target node ID of the edge | string | - | ✓ |
| id | Unique identifier for the edge | string | - | |
| type | Edge type, built-in edge type name or custom edge name | string | - | |
| data | Edge data, used to store custom data for the edge, can be accessed in style mapping through callback functions | object | - | |
| style | Edge style, including visual attributes such as line color, width, arrow, etc. | object | - | |
| states | Initial state of the edge | string[] | - | |
#### ComboData
| Property | Description | Type | Default | Required |
| -------- | ---------------------------------------------------------------------------------------------------------------- | -------------- | ------- | -------- |
| id | Unique identifier for the combo | string | - | ✓ |
| type | Combo type, built-in combo type name or custom combo name | string | - | |
| data | Combo data, used to store custom data for the combo, can be accessed in style mapping through callback functions | object | - | |
| style | Combo style | object | - | |
| states | Initial state of the combo | string[] | - | |
| combo | Parent combo ID. If there is no parent combo, it is null | string \| null | - | |
**Example:**
```javascript
const graph = new Graph({
data: {
nodes: [
{ id: 'node1', style: { x: 100, y: 100 } },
{ id: 'node2', style: { x: 200, y: 200 } },
],
edges: [{ id: 'edge1', source: 'node1', target: 'node2' }],
combos: [{ id: 'combo1', style: { x: 150, y: 150 } }],
},
});
```
- Read [Data](/en/manual/data/) to learn more about graph data, including but not limited to data formats, how to manipulate data, etc.
## node
> [NodeOptions](#nodeoptions)
Node configuration options.
#### NodeOptions
| Property | Description | Type | Default | Required |
| --------- | -------------------------------------------------------------------------------- | -------------------------------------------------------- | -------- | -------- |
| type | Node type, built-in node type name or custom node name | [Type](/en/manual/element/node/BaseNode/#type) | `circle` | |
| style | Node style, including color, size, etc. | [Style](/en/manual/element/node/BaseNode/#style) | - | |
| state | Define the style of the node in different states | [State](/en/manual/element/node/BaseNode/#state) | - | |
| palette | Define the color palette of the node, used to map colors based on different data | [Palette](/en/manual/element/node/BaseNode/#palette) | - | |
| animation | Define the animation effect of the node | [Animation](/en/manual/element/node/BaseNode/#animation) | - | |
See [Node](/en/manual/element/node/BaseNode/) for details
**Example:**
```javascript
const graph = new Graph({
node: {
type: 'circle', // Node type
style: {
fill: '#e6f7ff', // Fill color
stroke: '#91d5ff', // Border color
lineWidth: 1, // Border width
r: 20, // Radius
labelText: (d) => d.id, // Label text
},
// Node state style
state: {
hover: {
lineWidth: 2,
stroke: '#69c0ff',
},
selected: {
fill: '#bae7ff',
stroke: '#1890ff',
lineWidth: 2,
},
},
},
});
```
## edge
> [EdgeOptions](#edgeoptions)
Edge configuration options
#### EdgeOptions
| Property | Description | Type | Default | Required |
| --------- | -------------------------------------------------------------------------------- | -------------------------------------------------------- | ------- | -------- |
| type | Edge type, built-in edge type name or custom edge name | [Type](/en/manual/element/edge/BaseEdge/#type) | `line` | |
| style | Edge style, including color, size, etc. | [Style](/en/manual/element/edge/BaseEdge/#style) | - | |
| state | Define the style of the edge in different states | [State](/en/manual/element/edge/BaseEdge/#state) | - | |
| palette | Define the color palette of the edge, used to map colors based on different data | [Palette](/en/manual/element/edge/BaseEdge/#palette) | - | |
| animation | Define the animation effect of the edge | [Animation](/en/manual/element/edge/BaseEdge/#animation) | - | |
See [Edge](/en/manual/element/edge/BaseEdge/) for details
**Example:**
```javascript
const graph = new Graph({
edge: {
type: 'polyline', // Edge type
style: {
stroke: '#91d5ff', // Edge color
lineWidth: 2, // Edge width
endArrow: true, // Whether there is an arrow
},
// Edge state style
state: {
selected: {
stroke: '#1890ff',
lineWidth: 3,
},
},
},
});
```
## combo
> [ComboOptions](#combooptions)
Combo configuration options
| Property | Description | Type | Default | Required |
| --------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------- | -------- | -------- |
| type | Combo type, built-in combo type name or custom combo name | [Type](/en/manual/element/combo/BaseCombo/#type) | `circle` | |
| style | Combo style, including color, size, etc. | [Style](/en/manual/element/combo/BaseCombo/#style) | - | |
| state | Define the style of the combo in different states | [State](/en/manual/element/combo/BaseCombo/#state) | - | |
| palette | Define the color palette of the combo, used to map colors based on different data | [Palette](/en/manual/element/combo/BaseCombo/#palette) | - | |
| animation | Define the animation effect of the combo | [Animation](/en/manual/element/combo/BaseCombo/#animation) | - | |
See [Combo](/en/manual/element/combo/BaseCombo/) for details
**Example:**
```javascript
const graph = new Graph({
combo: {
type: 'circle', // Combo type
style: {
fill: '#f0f0f0', // Background color
stroke: '#d9d9d9', // Border color
lineWidth: 1, // Border width
},
// Combo state style
state: {
selected: {
stroke: '#1890ff',
lineWidth: 2,
},
},
},
});
```
## layout
> _CustomLayoutOptions \| CustomLayoutOptions[]_
Layout configuration options, can be an object (normal layout) or an array (pipeline layout).
**Example**:
```javascript
const graph = new Graph({
container: 'container',
layout: {
type: 'force', // Force-directed layout
preventOverlap: true, // Prevent node overlap
nodeStrength: -50, // Repulsion between nodes
edgeStrength: 0.5, // Elastic coefficient of edges
iterations: 200, // Number of iterations
animation: true, // Enable layout animation
},
});
```
## theme
> _false \| 'light' \| 'dark' \| string_
Set the theme of the chart, can be the built-in `'light'`, `'dark'` theme, or the name of a custom theme. Set to `false` to use no theme.
## behaviors
> _(string \| [CustomExtensionOptions](#customextensionoptions) \| ((this:Graph) =>CustomExtensionOptions))[]_
Configure the interaction behaviors of the chart, can be a string (using default configuration), an object (custom configuration), or a function (dynamic configuration, the graph instance can be accessed within the function).
**Example:**
```javascript
const graph = new Graph({
behaviors: [
'drag-canvas', // Enable canvas dragging with default configuration
'zoom-canvas', // Enable canvas zooming with default configuration
{
type: 'drag-element', // Custom configuration for dragging elements
key: 'drag-node-only',
enable: (event) => event.targetType === 'node', // Only allow dragging nodes
},
function () {
console.log(this); // Output graph instance
return {
type: 'hover-activate',
};
},
],
});
```
- View [Interaction Overview](/en/manual/behavior/overview/) to learn more about interaction principles
- Browse [Built-in Interactions](/en/manual/behavior/AutoAdaptLabel/) to get a list of all built-in interactions and their configuration options
## plugins
> _(string \| [CustomExtensionOptions](#customextensionoptions) \| ((this:Graph) =>CustomExtensionOptions))[]_
Set the plugins of the chart, can be a string (using default configuration), an object (custom configuration), or a function (dynamic configuration, the graph instance can be accessed within the function).
**Example:**
```javascript
const graph = new Graph({
container: 'container',
plugins: [
'minimap', // Enable minimap with default configuration
{
type: 'grid', // Enable grid background
key: 'grid-plugin',
line: {
stroke: '#d9d9d9',
lineWidth: 1,
},
},
{
type: 'toolbar', // Enable toolbar
key: 'graph-toolbar',
position: 'top-right', // Position
},
],
});
```
- View [Plugin Overview](/en/manual/plugin/overview/) to learn more about plugin principles
- Browse [Built-in Plugins](/en/manual/plugin/Background/) to get a list of all built-in plugins and their configuration options
## transforms
> _(string \| [CustomExtensionOptions](#customextensionoptions) \| ((this:Graph) =>CustomExtensionOptions))[]_
Configure data processing, used to process data before rendering, does not affect the original data. Can be a string (using default configuration), an object (custom configuration), or a function (dynamic configuration, the graph instance can be accessed within the function).
**Example:**
```javascript
const graph = new Graph({
transforms: [
'process-parallel-edges', // Process parallel edges with default configuration
{
type: 'map-node-size', // Map node size based on node data
field: 'value', // Use the value of the field
max: 50, // Maximum radius
min: 20, // Minimum radius
},
],
});
```
- View [Data Processing Overview](/en/manual/transform/overview/) to learn more about data processing principles
- Browse [Built-in Data Processing](/en/manual/transform/MapNodeSize/) to get a list of all built-in data processing and their configuration options
#### CustomExtensionOptions
```typescript
interface CustomExtensionOption extends Record {
/** Extension type */
type: string;
/** Extension key, i.e., unique identifier */
key?: string;
}
```