Support using text and image as watermark, the principle is to add the background-image property to the div of the Graph container, and then you can control the position and style of the watermark through css. For text, it will be converted to an image using a hidden canvas

createGraph(
  {
    data: { nodes: [{ id: 'node-1' }] },
    node: { style: { fill: '#7e3feb' } },
    edge: { style: { stroke: '#8b9baf' } },
    layout: { type: 'force' },
    behaviors: ['drag-canvas'],
    plugins: [{ type: 'watermark', key: 'watermark', text: 'G6: Graph Visualization' }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      type: 'watermark',
      width: 200,
      height: 100,
      opacity: 0.2,
      rotate: Math.PI / 12,
      text: 'G6: Graph Visualization',
    };
    const optionFolder = gui.addFolder('Watermark Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'width', 1, 1280, 1);
    optionFolder.add(options, 'height', 1, 800, 1);
    optionFolder.add(options, 'opacity', 0, 1, 0.1);
    optionFolder.add(options, 'rotate', 0, 2 * Math.PI, Math.PI / 12);
    optionFolder.add(options, 'text');

    optionFolder.onChange(({ property, value }) => {
      graph.updatePlugin({
        key: 'watermark',
        [property]: value,
      });
      graph.render();
    });
  },
);

Options

Required type

string

Plugin type

backgroundAttachment

string

The background attachment of watermark

backgroundBlendMode

string

The background blend of watermark

backgroundClip

string

The background clip of watermark

backgroundColor

string

The background color of watermark

backgroundImage

string

The background image of watermark

backgroundOrigin

string

The background origin of watermark

backgroundPosition

string

The background position of watermark

backgroundPositionX

string

The background position-x of watermark

backgroundPositionY

string

The background position-y of watermark

backgroundRepeat

string Default: 'repeat'

The background repeat of watermark

backgroundSize

string

The background size of watermark

height

number Default: 100

The height of watermark(single)

imageURL

string

The image url, if it has a value, it will be used, otherwise it will use the text

opacity

number Default: 0.2

The opacity of watermark

rotate

number Default: Math.PI / 12

The rotate angle of watermark

text

string

The text of watermark

textAlign

'center' | 'end' | 'left' | 'right' | 'start' Default: 'center'

The text align of text watermark

textBaseline

'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top' Default: 'middle'

The text baseline of text watermark

textFill

string Default: '#000'

The color of text watermark

textFontFamily

string

The font of text watermark

textFontSize

number Default: 16

The font size of text watermark

textFontVariant

string

The font variant of text watermark

textFontWeight

string

The font weight of text watermark

width

number Default: 200

The width of watermark(single)

API