06 Configure Styles
Step 7/13 — 07 Create Labels Sources
01 Create Graph 02 Create Nodes Sources 03 Create Edges Sources 04 Group Nodes 05 Implicit Grouping 06 Configure Styles 07 Create Labels Sources 08 Configure Labels 09 Configure Tags 10 Configure Layout 11 Update Graph 12 Adjacency Graph Builder 13 Tree Builder
08 Configure Labels

# Adding labels

In this tutorial step, you will learn how to configure GraphBuilder in order to add labels to the visualization.

Note | This step is optional when building a graph with GraphBuilder. If you do not want to add labels to your graph, you can proceed with the next step.

## Loading node label information

There are three ways to add labels to the visualization using GraphBuilder. You can use bindings or load the labels from their own sources on the NodeCreator.

For this step, we will use a simple company ownership diagram.

### Creating labels using bindings

If you want to create the label text based on the properties of the business data, you can bind the text to a property in the node’s data. For example, in the dataset below, we bind the label text to the `name` of the associated node.

    const nodeData = [
      { id: '0', name: 'Investment Capital' },
      { id: '1', name: 'Melissa Barner' }
    ]
    const nodesSource = graphBuilder.createNodesSource(nodeData, 'id')

    // create the label binding to the name property
    nodesSource.nodeCreator.createLabelBinding((data) => data.name)

The label binding can also be set explicitly using the text provider property. In this example, the label text is converted to upper-case to show that text can be augmented.

    const nodeData = [{ id: '2', name: 'Monster Inc' }]
    const nodesSource = graphBuilder.createNodesSource(nodeData, 'id')

    // create the text provider that will return the name of each node
    const labelCreator = nodesSource.nodeCreator.createLabelBinding()
    labelCreator.textProvider = (data): string => data.name.toUpperCase()

### Creating labels from their own sources

If the node data contains a varying number of label data, you can use a LabelsSource to create the labels. For instance, take a look at the dataset below where the label information is stored in the `owners` property.

    const nodeData = [
      { id: '3', owners: ['Local Group', 'Germany'] },
      { id: '4', owners: ['International Group'] }
    ]

In this case, the provider which is given as parameter is expected to return an enumerable of data items where each item represents one label.

    // create the label sources based on the `owners` property
    const labelsSource = nodesSource.nodeCreator.createLabelsSource(
      (data) => data.owners
    )

### Loading edge label information

Following a similar approach, we can also create labels for the edges. In this example, we bind the edge label text to the `ownership` property of the dataset and we add some more text information.

    const edgeData = [
      {
        id: '0',
        sourceId: '1',
        targetId: '0',
        ownership: 30
      },
      {
        id: '1',
        sourceId: '0',
        targetId: '2',
        ownership: 60
      },
      { id: '2', sourceId: '4', targetId: '0', ownership: 5 },
      { id: '3', sourceId: '3', targetId: '0', ownership: 5 }
    ]
    const edgesSource = graphBuilder.createEdgesSource(
      edgeData,
      'sourceId',
      'targetId',
      'id'
    )

    // bind the label text data and add some more text information
    edgesSource.edgeCreator.createLabelBinding(
      (data) => `Owns ${data.ownership}%`
    )

Note | Please have a look in this tutorial step’s demo code in `create-labels-sources.ts` and play around with the different ways to add labels to the visualization.

08 Configure Labels