Set the background of the label on node or edge

1 min read

Problem

In versions below G6 3.4.4, when we want to add the background to label of a node or edge, wo need use group.addShape('rect', {}) to implement it, the implementation method is not friendly enough.

Solution

In G6 3.4.5 version, uses can set the background for nodes or edges through background configuration.

Important Hint: The PR comes from GitHub use @zhanba.

const graph = new G6.Graph({
  // ...
  defaultNode: {
    position: 'left',
    style: {
      background: {
        fill: '#ffffff',
        stroke: 'green',
        padding: [3, 2, 3, 2],
        radius: 2,
        lineWidth: 3,
      },
    },
  },
  defaultEdge: {
    autoRotate: true,
    style: {
      background: {
        fill: '#ffffff',
        stroke: '#000000',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
  }
})