Options

autoFit

{ type: ‘view’; options?: FitViewOptions; animation?: ViewportAnimationEffectTiming; } | { type: ‘center’; animation?: 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:

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

ViewportAnimationEffectTiming

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

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

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.

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.

devicePixelRatio

number

Device pixel ratio.

Used for high-definition screens, the default is 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

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:

// 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

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

Example:

// 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

Data.

GraphData

NodeData

EdgeData

ComboData

Example:

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 to learn more about graph data, including but not limited to data formats, how to manipulate data, etc.

node

NodeOptions

Node configuration options.

NodeOptions

See Node for details

Example:

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

Edge configuration options

EdgeOptions

See Edge for details

Example:

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

Combo configuration options

See Combo for details

Example:

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:

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 | ((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:

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 to learn more about interaction principles
• Browse Built-in Interactions to get a list of all built-in interactions and their configuration options

plugins

(string | 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:

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 to learn more about plugin principles
• Browse Built-in Plugins to get a list of all built-in plugins and their configuration options

transforms

(string | 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:

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 to learn more about data processing principles
• Browse Built-in Data Processing to get a list of all built-in data processing and their configuration options

CustomExtensionOptions

interface CustomExtensionOption extends Record<string, any> {
  /** Extension type */
  type: string;
  /** Extension key, i.e., unique identifier */
  key?: string;
}