Links in JavaScript Sankey Chart component
18 Nov 20183 minutes to read
Links are the connecting paths that visualize flow between nodes in a Sankey Chart. Each link connects a source node to a target node and carries a quantitative value that determines its visual thickness. The Sankey Chart provides comprehensive customization options for link styling, colors, curvature, and interactions.
This guide covers link customization including appearance properties, color blending, curvature control, and dynamic rendering events.
Link Style Properties
The linkStyle property allows you to customize the visual appearance of all links in the Sankey Chart. These properties control opacity, highlighting behavior, curvature, and color blending.
Link Style Configuration Properties
| Property | Type | Default | Description |
|---|---|---|---|
| opacity | number | 0.35 | Opacity of the link (0 to 1). |
| highlightOpacity | number | 1 | Opacity of link when highlighted or hovered. |
| inactiveOpacity | number | 0.3 | Opacity of link when not interacting (when other links are hovered). |
| curvature | number | 0.55 | Curvature factor of the link path (0 = straight line, 1 = fully curved). |
| colorType | string | ‘Blend’ | Color blending type: ‘Source’, ‘Target’, or ‘Blend’. |
Basic Link Customization
Customize the appearance of all links using the linkStyle property to set global opacity levels, curvature, and color blending behavior:
Link Curvature
The curvature property controls the bend of the links, affecting the visual flow representation:
- Value 0: Creates straight lines between nodes
- Value 0.5-0.7: Creates moderate curves (often preferred for readability)
- Value 1.0: Creates maximum curvature with smooth paths
Choose curvature values based on your data density and aesthetic preferences:
Link Color Type
The colorType property determines how links are colored, providing flexibility in visual representation:
- ‘Source’: Links inherit the color of their source node (useful for tracking origin)
- ‘Target’: Links inherit the color of their target node (useful for tracking destination)
- ‘Blend’: Links display a smooth gradient blend of source and target node colors (default - recommended for most cases)
The color type you choose affects how users perceive flow relationships in the diagram:
Link Value and Thickness
The link thickness is determined by the value property in the link data. This quantitative value is automatically mapped to the visual thickness of the link:
- Larger values: Create thicker links (proportional to the value)
- Smaller values: Create thinner links
- Equal values: Create links of equal thickness
The thickness visualization makes it easy to understand relative flow quantities at a glance:
Advanced Link Configuration
Dynamic Link Customization
Use the linkRendering event to customize link appearance dynamically during the render process. This event is triggered for each link before rendering, allowing you to apply conditional styling based on flow values, source-target combinations, or other data attributes: