Customization
Applies to: all styles
Full reference of classes and attributes, grouped by style.
Circle Flow
Container: .circle-flow
Container classes
| Class | Description |
|---|---|
circle-flow |
Required. Marks the container. |
node-circle |
(default) Circular nodes. |
node-box |
Rounded rectangle nodes. |
node-none |
Text-only, no node background. |
arrow-chevron |
(default) Filled chevron arrows. |
arrow-curved |
Filled SVG arc arrows. |
arrow-thin |
Thin SVG lines with arrowheads. |
arrow-ring |
Single ring circle behind nodes. |
arrow-arc |
Single filled clockwise arc. |
arrow-double |
Thin lines, arrowheads both ends. |
Container attributes
| Attribute | Description |
|---|---|
node-color |
Color for all nodes (default #2e6b8a). |
arrow-color |
Color for all arrows (default #2e6b8a). |
Item attributes
| Attribute | Description |
|---|---|
color |
Overrides node color for this item only. |
Pie
Container: .pie
Container classes
| Class | Description |
|---|---|
pie |
Required. Marks the container. |
gap |
Separate every slice with an offset; removes the white slice stroke. |
Container attributes
| Attribute | Description |
|---|---|
node-color |
Base slice color. |
Item classes
| Class | Description |
|---|---|
gap |
Offset just that slice from the center. |
Item attributes
| Attribute | Description |
|---|---|
color |
Per-slice color override. |
Sizing behavior (Circle Flow)
Node size and layout radius are computed from n (number of items). The gap between neighboring circle edges equals nodeRadius:
nodeRadius = (2/3) · layoutR · sin(π/n)
layoutR + nodeRadius ≤ 240For n=1: layoutR=0, nodeRadius=240 (fills the container).
Font size is scaled using canvas measureText so the longest label fills the node without overflow. For node-none, the label width is capped at 80px.