logoCreated with Sketch.

G6

Update Label

1 min read

There are three ways to modify the styles for labels in G6.

Configure When Instantiating Graph

When instantiating a Graph, assign labelCfg in defaultNode or defaultEdge to configure the styles for labels of global nodes and global edges respectively.

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 800,
  defaultNode: {
    shape: 'node',
    labelCfg: {
      style: {
        fill: '#fff',
        fontSize: 14,
      },
    },
  },
  defaultEdge: {
    shape: 'line-with-arrow',
    labelCfg: {
      style: {
        fill: '#fff',
        fontSize: 14,
      },
    },
  },
});

Configure Style in Data

const data = {
  nodes: [
    {
      id: 'node1',
      label: 'node1',
      labelCfg: {
        style: {
          fill: '#fff',
          fontSize: 12,
        },
      },
    },
  ],
};

update/updateItem

When using update/updateItem to update a node or edge, the label can be updated as well.

graph.updateItem(node, {
  // The style of the node
  style: {
    stroke: 'blue',
  },
  // The configurations of the label on the node
  labelCfg: {
    style: {
      fill: '#fff',
      fontSize: 12,
    },
  },
});

For more information about the label styles, refer to Label on Node and Label on Edge.