logo

G6

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

Title

Previous
Timebar
Next
Toolbar

Resource

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

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference
weavefoxWeaveFox-AI Developer Community

Help

GitHub
StackOverflow

more productsMore Productions

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

Loading...

Overview

Title indicates the name of the image and conveys the brief content of the image.

Basic Usage

The following is a simple example of initializing the Title plugin:

const graph = new Graph({
plugins: [
{
key: 'title',
type: 'title',
title: 'This is a title',
subTitle: 'This is a subtitle',
},
],
});

Configuration Options

OptionDescriptionTypeDefaultRequired
typePlugin typestringtitle✓
keyUnique identifier for the plugin, used for subsequent updatesstring-
titletitle content style configTitleStyle-✓
subtitlesubtitle content style configSubTitleStyle-
spacingVertical spacing between main title and subtitlenumber8
classNameClass name of the title canvasstring-
alignGraph title alignmentleft | center | rightleft
sizeHeight of the title pluginnumber44
paddingPaddingnumber | number[][16,24,0,24]

size

number optional

Used to configure the space height of the title plugin. Default is 44。

align

string optional

Used to configure the horizontal alignment of the title plugin. Default is left. You can choose left, center, or right, representing left-aligned, center-aligned, and right-aligned respectively.

createGraph(
{
data: { nodes: Array.from({ length: 12 }).map((_, i) => ({ id: `node${i}` })) },
node: {
palette: 'spectral',
style: { labelText: 'Ciallo' },
},
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
plugins: [
{
key: 'title',
type: 'title',
title: 'This is a title This is a title',
subtitle: 'This is a sub-',
},
],
layout: { type: 'circular' },
autoFit: 'view',
},
{ width: 600, height: 300 },
(gui, graph) => {
const options = { align: 'left' };
const optionFolder = gui.addFolder('Align Options');
optionFolder.add(options, 'align', ['left', 'center', 'right']);
optionFolder.onChange(({ property, value }) => {
graph.updatePlugin({
key: 'title',
[property]: value,
});
graph.render();
});
},
);

spacing

number optional

Used to configure the spacing between the chart main title and subtitle. Default is 8. Appropriate spacing can make the chart look more harmonious overall.

title

The title, specifically the main title, can be customized with the following configurations for various title styles.

AttrDescTypeDefault
titleTitle text contentstring-
titleFontSizeTitle text sizenumber16
titleFontFamilyTitle text fontstringsystem-ui, sans-serif
titleFontWeightTitle font weightnumberbold
titleLineHeightTitle text line heightnumber16
titleTextAlignHorizontal alignment of content in title text linestringleft
titleTextBaselineVertical baseline of title textstringtop
titleFillFill color of title textstring#1D2129
titleFillOpacityFill transparency of title textnumber0.9
titleStrokeStroke color of title textstringtransparent
titleStrokeOpacityStroke transparency of title textnumber1
titleLineWidthStroke width of title textnumber0
titleLineDashDash style of title textnumber[][]
titleOpacityOverall transparency of title textnumber1
titleShadowColorShadow color of title textstringtransparent
titleShadowBlurGaussian blur coefficient of title text shadownumber0
titleShadowOffsetXHorizontal offset of title text shadownumber0
titleShadowOffsetYVertical offset of title text shadownumber0
titleCursorMouse style of title textstringdefault
titleDxHorizontal offset of title textnumber0
titleDyVertical offset of title textnumber0

subtitle

The subtitle, which can be customized with the following configurations for various subtitle styles.

AttrDescTypeDefault
subtitleSubtitle text contentstring-
subtitleFontSizeSubtitle text sizenumber12
subtitleFontFamilySubtitle text fontstringsystem-ui, sans-serif
subtitleFontWeightSubtitle font weightnumbernormal
subtitleLineHeightSubtitle text line heightnumber12
subtitleTextAlignSubtitle text line content horizontal alignmentstringleft
subtitleTextBaselineSubtitle text vertical baselinestringtop
subtitleFillSubtitle text fill colorstring#1D2129
subtitleFillOpacitySubtitle text fill transparencynumber0.65
subtitleStrokeSubtitle text stroke colorstringtransparent
subtitleStrokeOpacitySubtitle text stroke transparencynumber1
subtitleLineWidthSubtitle text stroke widthnumber0
subtitleLineDashSubtitle text dashed line stylenumber[][]
subtitleOpacitySubtitle text overall transparencynumber1
subtitleShadowColorSubtitle text shadow colorstringtransparent
subtitleShadowBlurSubtitle text shadow Gaussian blur coefficientnumber0
subtitleShadowOffsetXSubtitle text shadow horizontal offsetnumber0
subtitleShadowOffsetYSubtitle text shadow vertical offsetnumber0
subtitleCursorSubtitle text mouse stylestringdefault
subtitleDxSubtitle text horizontal offsetnumber0
subtitleDySubtitle text vertical offsetnumber0

Try it

Feel free to modify this example and try different configurations

import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
data: { nodes: Array.from({ length: 12 }).map((_, i) => ({ id: `node${i}` })) },
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
plugins: [
{
key: 'title',
type: 'title',
align: 'center', // Alignment of title
spacing: 4, // Spacing between main title and subtitle
size: 60, // Height of title, default is 44
// title
title: 'This is a title This is a title', // Title text
titleFontSize: 28, // Main title font size
titleFontFamily: 'sans-serif', // Main title font
titleFontWeight: 600, // Main title font weight
titleFill: '#fff', // Main title text color
titleFillOpacity: 1, // Main title text transparency
titleStroke: '#000', // Main title text stroke color
titleLineWidth: 2, // Main title text stroke line width
titleStrokeOpacity: 1, // Main title text stroke transparency
// subtitle
subtitle: 'This is a sub-', // Subtitle text
subtitleFontSize: 16, // Subtitle font size
subtitleFontFamily: 'Arial', // Subtitle font
subtitleFontWeight: 300, // Subtitle font weight
subtitleFill: '#2989FF', // Subtitle text color
subtitleFillOpacity: 1, // Subtitle text transparency
subtitleStroke: '#000', // Subtitle text stroke color
subtitleLineWidth: 1, // Subtitle text stroke line width
subtitleStrokeOpacity: 0.5, // Subtitle text stroke transparency
},
],
node: {
palette: 'spectral',
style: { labelText: 'Ciallo' },
},
layout: {
type: 'circular',
},
autoFit: 'view',
});
graph.render();