Orthogonal Line Label Styling
A compact tree viewer that uses simple orthogonal lines with detached boxed labels on a gradient canvas. Users can rotate the tree, tune global line-label offsets, and reuse the same pattern for readable value badges or annotations on connectors.
Detached Background Labels on Orthogonal Tree Lines
What This Example Builds
This example builds a small tree viewer whose links use orthogonal routing and detached text badges instead of text drawn directly on the path. The canvas is deliberately stylized with a warm gradient background, translucent nodes, and bordered line labels, so the main visual lesson is readability as much as geometry.
Users can rotate the tree to the left, right, top, or bottom, then fine-tune the x and y offset