JavaScript is required

Customize Line Text Position

This example builds a small tree graph whose edge labels can be compared across detached-label and text-on-path modes. A floating control window drives x and y label offsets, tree-direction relayout, and default line-shape changes, making it a compact reference for line-label readability tuning.

Edit on GraphPilot

Tuning Line Text Position in a Tree Relation Graph

What This Example Builds

This example builds a small tree graph that is meant to compare how edge labels behave under different rendering rules. The canvas shows a fixed subsystem hierarchy, while a floating control window lets the user switch between detached labels and text rendered on the line path, move labels with x and y offsets, rotate the tree direction, and swap connector shapes.

The main visual focus is the line text itself. Bl