Loading...
Title indicates the name of the image and conveys the brief content of the image.
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',},],});
Option | Description | Type | Default | Required |
---|---|---|---|---|
type | Plugin type | string | title | ✓ |
key | Unique identifier for the plugin, used for subsequent updates | string | - | |
title | title content style config | TitleStyle | - | ✓ |
subtitle | subtitle content style config | SubTitleStyle | - | |
spacing | Vertical spacing between main title and subtitle | number | 8 | |
className | Class name of the title canvas | string | - | |
align | Graph title alignment | left | center | right | left | |
size | Height of the title plugin | number | 44 | |
padding | Padding | number | number[] | [16,24,0,24] |
Used to configure the space height of the title plugin. Default is 44
。
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();});},);
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.
The title, specifically the main title, can be customized with the following configurations for various title styles.
Attr | Desc | Type | Default |
---|---|---|---|
title | Title text content | string | - |
titleFontSize | Title text size | number | 16 |
titleFontFamily | Title text font | string | system-ui, sans-serif |
titleFontWeight | Title font weight | number | bold |
titleLineHeight | Title text line height | number | 16 |
titleTextAlign | Horizontal alignment of content in title text line | string | left |
titleTextBaseline | Vertical baseline of title text | string | top |
titleFill | Fill color of title text | string | #1D2129 |
titleFillOpacity | Fill transparency of title text | number | 0.9 |
titleStroke | Stroke color of title text | string | transparent |
titleStrokeOpacity | Stroke transparency of title text | number | 1 |
titleLineWidth | Stroke width of title text | number | 0 |
titleLineDash | Dash style of title text | number[] | [] |
titleOpacity | Overall transparency of title text | number | 1 |
titleShadowColor | Shadow color of title text | string | transparent |
titleShadowBlur | Gaussian blur coefficient of title text shadow | number | 0 |
titleShadowOffsetX | Horizontal offset of title text shadow | number | 0 |
titleShadowOffsetY | Vertical offset of title text shadow | number | 0 |
titleCursor | Mouse style of title text | string | default |
titleDx | Horizontal offset of title text | number | 0 |
titleDy | Vertical offset of title text | number | 0 |
The subtitle, which can be customized with the following configurations for various subtitle styles.
Attr | Desc | Type | Default |
---|---|---|---|
subtitle | Subtitle text content | string | - |
subtitleFontSize | Subtitle text size | number | 12 |
subtitleFontFamily | Subtitle text font | string | system-ui, sans-serif |
subtitleFontWeight | Subtitle font weight | number | normal |
subtitleLineHeight | Subtitle text line height | number | 12 |
subtitleTextAlign | Subtitle text line content horizontal alignment | string | left |
subtitleTextBaseline | Subtitle text vertical baseline | string | top |
subtitleFill | Subtitle text fill color | string | #1D2129 |
subtitleFillOpacity | Subtitle text fill transparency | number | 0.65 |
subtitleStroke | Subtitle text stroke color | string | transparent |
subtitleStrokeOpacity | Subtitle text stroke transparency | number | 1 |
subtitleLineWidth | Subtitle text stroke width | number | 0 |
subtitleLineDash | Subtitle text dashed line style | number[] | [] |
subtitleOpacity | Subtitle text overall transparency | number | 1 |
subtitleShadowColor | Subtitle text shadow color | string | transparent |
subtitleShadowBlur | Subtitle text shadow Gaussian blur coefficient | number | 0 |
subtitleShadowOffsetX | Subtitle text shadow horizontal offset | number | 0 |
subtitleShadowOffsetY | Subtitle text shadow vertical offset | number | 0 |
subtitleCursor | Subtitle text mouse style | string | default |
subtitleDx | Subtitle text horizontal offset | number | 0 |
subtitleDy | Subtitle text vertical offset | number | 0 |
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 titlespacing: 4, // Spacing between main title and subtitlesize: 60, // Height of title, default is 44// titletitle: 'This is a title This is a title', // Title texttitleFontSize: 28, // Main title font sizetitleFontFamily: 'sans-serif', // Main title fonttitleFontWeight: 600, // Main title font weighttitleFill: '#fff', // Main title text colortitleFillOpacity: 1, // Main title text transparencytitleStroke: '#000', // Main title text stroke colortitleLineWidth: 2, // Main title text stroke line widthtitleStrokeOpacity: 1, // Main title text stroke transparency// subtitlesubtitle: 'This is a sub-', // Subtitle textsubtitleFontSize: 16, // Subtitle font sizesubtitleFontFamily: 'Arial', // Subtitle fontsubtitleFontWeight: 300, // Subtitle font weightsubtitleFill: '#2989FF', // Subtitle text colorsubtitleFillOpacity: 1, // Subtitle text transparencysubtitleStroke: '#000', // Subtitle text stroke colorsubtitleLineWidth: 1, // Subtitle text stroke line widthsubtitleStrokeOpacity: 0.5, // Subtitle text stroke transparency},],node: {palette: 'spectral',style: { labelText: 'Ciallo' },},layout: {type: 'circular',},autoFit: 'view',});graph.render();