Generic Labeling

The generic labeling algorithm places the nodes and edge labels of a graph such that they, ideally, do not overlap with each other or with graph elements. The algorithm does not affect the node positions and the edge routes. It can also support rotated labels.

Node labels can be placed either in the interior or the exterior of the nodes with the option for rotation. The information about edge label placement can be conveyed to the labeling algorithm through a EdgeLabelPreferredPlacement.

The generic labeling algorithm provides extensive customization options through a wide array of properties accessible via the GenericLabelingOptions. It can be applied on the whole graph or only on a predefined set of nodes and edges.

Additional customization for individual graph elements, such as edgeLabelPreferredPlacements, affectedLabels, and more, can be achieved via the GenericLabelingDataProvider.

Feel free to play around with the orthogonal layout configuration in our online playground.

Extensive documentation detailing all available properties of the radial tree layout supported by yFiles layouts for React Flow can be found here.

runLayout({
  name: 'GenericLabeling',
  layoutOptions: { scope: 'all' },
  layoutData: {
    edgeLabelPreferredPlacements: () => ({
      sideOfEdge: 'left-of-edge',
      distanceToEdge: 20,
    })
  }
})

GenericLabelingOptions

The configuration options for the labeling algorithm that places the labels of a graph.

For more information on the labeling algorithm and its available settings, see GenericLabeling.

LabelingCosts

LabelingCosts

boolean

boolean

boolean

“all” | “edge-labels” | “node-labels”

number

GenericLabelingDataProvider

A provider for individual options per nodes or edges in a Labeling. It allows for defining a function that provide values for each element.

For more information, see LabelingData.

(label: LabelData) => boolean

(label: LabelData) => EdgeLabelPreferredPlacement

Playground