chevron_right Demos chevron_right Boundary Labeling
Related demos
Book a live Demo

Live Demo — yFiles in Action

30–45 min | Online | No install required

For Developers, Product Mangers & Executives

  • Interactive graph visualization in real time
  • Integration example
  • Live Q&A and next step recommendations

30–45 minutes | 1:1 or team session | Online (Zoom / Teams)

No install required | We show live code

Book a free live demo

Live Demo — yFiles in Action

30–45 min | Online | No install required

For Developers, Product Mangers & Executives

30–45 minutes | 1:1 or team session | Online (Zoom / Teams)

No install required | We show live code

Book a free live demo

Boundary Labeling

This demo shows how to configure the OrganicLayout algorithm for annotating a set of points on a diagram (map, technical drawing, etc.).

The labeling approach followed in this demo is known as "boundary labeling" and the goal is to place the labels outside the boundary of the drawing.

The dataset of this demo consists of points and some text that is associated with each point. For each of these points a label node is created that displays the information associated with the point.

This demo defines constraints for the OrganicLayout algorithm to make sure that each label is placed on the correct side of the drawing based on the point's position, i.e., left/right or top/bottom. It also defines constraints for the vertical alignment of the label nodes.

Things to try

Change the font size of the labels using the slider in the toolbar and observe how the algorithm re-arranges the labels.