04 Setting Styles
Step 5/12 — 05 Label Placement
01 Creating the View 02 Creating Graph Elements 03 Managing Viewport 04 Setting Styles 05 Label Placement 06 Basic Interaction 07 Undo Clipboard Support 08 Grouping 09 Data Binding 10 Layout 11 Layout Data 12 Analysis Algorithms
06 Basic Interaction

# Placing Labels

## How to influence the placement of labels.

This step shows how to control label placement with the help of layout parameters.

The default label layout parameters can be configured in the graph’s nodeDefaults and edgeDefaults.

    // Place node labels in the node center
    graph.nodeDefaults.labels.layoutParameter = InteriorLabelModel.CENTER

    // Use a rotated layout for edge labels
    graph.edgeDefaults.labels.layoutParameter = new SmartEdgeLabelModel({
      autoRotation: true
    }).createParameterFromSource({
      segmentIndex: 0,
      distance: 10.0, // distance between the label's box and the edge path
      segmentRatio: 0.5 // placement near the center of the path
    })

The label layout parameter can also be changed during runtime. Click the button below to apply the layout parameters from the code sample.

    // InteriorStretchLabelModel stretches the label width or height to match the node size
    const interiorStretchModel = new InteriorStretchLabelModel({ insets: 3 })
    graph.setLabelLayoutParameter(
      label1,
      interiorStretchModel.createParameter('north')
    )

    // ExteriorLabelModel places the label on discrete positions outside the node bounds
    const exteriorLabelModel = new ExteriorLabelModel({ insets: 10 })

    graph.setLabelLayoutParameter(
      label2,
      exteriorLabelModel.createParameter('south')
    )

    // NinePositionsEdgeLabelModel provides a set of 9 predefined locations on an edge
    graph.setLabelLayoutParameter(
      edgeLabel,
      NinePositionsEdgeLabelModel.CENTER_ABOVE
    )

You can also take a look at the Node Label Placement Demo and the Edge Label Placement Demo that show how to configure node and edge labels.

06 Basic Interaction