yFiles for HTML Demos Tutorial: Basic Features 05 Label Placement yFiles Demos

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 = InteriorNodeLabelModel.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 StretchNodeLabelModel({ insets: 3 })
graph.setLabelLayoutParameter(
  label1,
  interiorStretchModel.createParameter('top')
)

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

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

// 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