Background

Overview

Support setting a background image for the graph canvas to enhance its layering and narrative.

Use Cases

This plugin is mainly used for:

Setting a unified brand background color or image for charts
Distinguishing different functional areas through the background
Enhancing the visual layering and aesthetics of charts

Basic Usage

const graph = new Graph({
  plugins: [
    {
      type: 'background',
      key: 'my-background', // Specify an identifier for the plugin for dynamic updates
      backgroundColor: '#f0f2f5', // Set background color
      backgroundImage: 'url(https://example.com/bg.png)', // Set background image
    },
  ],
});

Configuration Options

The configuration options for the Background plugin inherit all CSS style properties (CSSStyleDeclaration), so you can use any valid CSS property to configure the background. Here are some common configurations:

Property	Description	Type	Default Value	Required
type	Plugin type	`string`	`background`	✓
key	Unique identifier for the plugin for subsequent updates	string	-
width	Background width	string	`100%`
height	Background height	string	`100%`
backgroundColor	Background color	string	-
backgroundImage	Background image	string	-
backgroundSize	Background size	string	`cover`
backgroundPosition	Background position	string	-
backgroundRepeat	Background repeat method	string	-
opacity	Background opacity	string	-
transition	Transition animation	string	`background 0.5s`
zIndex	Stacking order	string	-1

Note: The default zIndex is -1 to prevent the background from covering other plugin DOM elements, such as grid lines.

Code Examples

Basic Background Color

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'background',
      backgroundColor: '#f0f2f5',
    },
  ],
});

Using Background Image

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'background',
      backgroundImage: 'url(https://example.com/bg.png)',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
    },
  ],
});

Gradient Background

const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'background',
      background: 'linear-gradient(45deg, #1890ff, #722ed1)',
      opacity: '0.8',
    },
  ],
});

Dynamically Update Background

// Configuration during initialization
const graph = new Graph({
  // Other configurations...
  plugins: [
    {
      type: 'background',
      key: 'my-background',
      backgroundColor: '#f0f2f5',
    },
  ],
});

// Subsequent updates
graph.updatePlugin({
  key: 'my-background',
  backgroundColor: '#e6f7ff',
  transition: 'background 1s ease',
});

Common Issues

1. Conflict between Background and Other Plugins?

By default, the zIndex of the background plugin is set to -1 to ensure it is below other elements. If there is still a conflict, you can adjust the zIndex value:

const graph = new Graph({
  plugins: [
    {
      type: 'background',
      zIndex: '-2', // Lower the z-index to avoid conflict
    },
  ],
});

G6