Title

import { createGraph } from '/demo-runtime.ts';

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

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