Automatic Label Placement in Diagrams
Calculating optimal label positions in different types of diagrams
Labels annotating graph elements are essential to obtain valuable insight into the underlying data. They provide information about the graph elements like identifiers or additional data related to the element. Without placing labels, diagrams show just the graph structure without further meaning and, thus, would be useless in most cases.
While node labels are usually placed onto the box representing their associated node, placing labels of edges is often more challenging. In general, a common preference is to place labels such that they are close to their associated elements without overlapping other graph items. The label location should not be ambiguous, i.e., it should allow identifying the graph element to which a label belongs. Besides, there can be user-specified placement constraints like the edge label should be placed close to the edge’s source or rotated by 90 degrees. Of course, manual placement of labels is very time consuming and impractical for large data sets. Hence, automatic labeling algorithms help to generate such diagrams at low costs.
Labeling Algorithms
The main objective of automatic labeling algorithms is to place labels and clarify their affiliations to the associated nodes or edges while avoiding overlaps with other graph elements. There are two basic concepts: generic labeling and integrated labeling.
Generic Labeling
A generic labeling algorithm calculates a suitable position for labels without changing the locations or size of the other graph elements. There are several use cases where the application of such an algorithm is beneficial, e.g., for the visualization of geospatial data where the locations of the nodes are already fixed, see the left example below.
Besides, there exist automatic graph drawing algorithms that place the nodes and edges of a graph without considering labels. For such algorithms, generic labeling can be applied in a post-processing step and, thus, enhance their capabilities, which broadens their range of application. Of course, generic labeling is also suitable for incrementally placing new labels into an existing drawing without changing any existing elements including other existing labels. Note that for such algorithms, it is not always possible to find suitable label positions, e.g., for a dense graph drawing, finding non-ambiguous and non-overlapping locations is often not feasible, especially for larger labels.
Integrated Labeling
Integrated labeling denotes automatic label placement as an integrated part of a graph drawing algorithm, i.e., an overall layout algorithm that also places nodes and edges. Here, the advantage is that, by design, integrated labeling can prevent label overlaps completely. Of course, integrated labeling support makes the layout algorithms more complicated, and, for some approaches, it is not clear how to realize it. Hence, for such scenarios, generic labeling is the right choice.
Labeling Algorithms of yFiles
yFiles is a commercial programming library that offers both several layout algorithms with integrated labeling support like the Hierarchic Layout and Orthogonal Layout algorithm as well as a sophisticated generic labeling algorithm called Generic Labeling. The generic labeling automatically generates label arrangements that, whenever feasible, eliminate all overlaps, or minimize the number thereof otherwise.
The library also supports the placement of rotated labels, which covers both maintaining a preset rotation angle as well as finding suitable label positions in cases where the algorithm chooses the rotation. Besides, for edge labels, users can specify both preferred placement options and preferred rotation behavior.
Preferred placement options include, for example, whether an edge label shall be placed on or to the side of the path of its edge near the source node, at the center of the edge path, or near the target node. Preferred rotation behavior includes, for example, whether the edge label’s rotation angle shall be interpreted absolute or relative to the slope of its corresponding edge segment.
Examples and Source Code
Automatic label placement is part of yFiles on all platforms. yFiles for HTML, yFiles WPF, and yFiles.NET come with the following sample applications that showcase the automatic label placement capabilities of yFiles:
The source code of these sample applications is part of these yFiles packages and available on the yWorks GitHub repository:
-
yFiles for HTML: Edge Label Placement, Node Label Placement
-
yFiles WPF: Edge Label Placement, Node Label Placement
-
yFiles.NET: Edge Label Placement, Node Label Placement
yFiles Labeling Algorithms in Your Own Application
Test the yFiles labeling algorithms with a fully-functional trial package of yFiles.
The labeling algorithms work on the standard yFiles graph model and can be used in any yFiles-based project. Configuring and running automatic label placement requires only a few lines of code.
-
Download the trial version of yFiles for your target platform at the yWorks Customer Center.
-
Run the Edge Label Placement Sample Application to determine a matching configuration for your requirements interactively.