Events in JavaScript Sankey Chart component
18 Nov 20183 minutes to read
The Sankey Chart provides comprehensive events that allow you to customize behavior, respond to user interactions, and hook into the chart lifecycle. These events enable advanced customization scenarios including data transformation, analytics tracking, and dynamic UI updates.
This guide covers lifecycle events, rendering events, interaction events, and export/print events.
Event List
| Event | Description |
|---|---|
| load | Triggers before the Sankey loads. Allows customization before rendering. |
| loaded | Triggers after the Sankey is fully loaded and rendered. |
| legendItemRendering | Triggers before a legend item is rendered. Allows customization of legend items. |
| labelRendering | Triggers before a label is rendered. Allows customization of label text and style. |
| nodeRendering | Triggers before a node is rendered. Allows customization of node appearance. |
| linkRendering | Triggers before a link is rendered. Allows customization of link appearance. |
| tooltipRendering | Triggers before a tooltip is rendered. Allows customization of tooltip content. |
| nodeClick | Triggers when a node is clicked. |
| nodeEnter | Triggers when the mouse enters a node area. |
| nodeLeave | Triggers when the mouse leaves a node area. |
| linkClick | Triggers when a link is clicked. |
| linkEnter | Triggers when the mouse enters a link area. |
| linkLeave | Triggers when the mouse leaves a link area. |
| sizeChanged | Triggers when the chart size changes. |
| beforeExport | Triggers before the export process starts. |
| afterExport | Triggers after the export process completes. |
| exportCompleted | Triggers when export is completed. |
| beforePrint | Triggers before the print process starts. |
Lifecycle Events
Load Event
The load event triggers before the Sankey Chart begins rendering. Use this event to customize configuration, apply themes, or prepare data before the chart loads:
Loaded Event
The loaded event triggers after the Sankey Chart is completely rendered and ready for interaction. Use this event to initialize calculations, perform analytics, or trigger dependent components:
Interaction Events
Node Interaction Events
Handle node click and hover events to respond to user actions and provide interactive feedback:
Link Interaction Events
Handle link click and hover events:
Rendering Events
Use rendering events to customize elements dynamically based on data values, conditions, or business logic. This is the most powerful approach for data-driven styling.
Node Rendering Event
The nodeRendering event triggers before each node is rendered, allowing dynamic node customization:
Link Rendering Event
The linkRendering event triggers before each link is rendered, allowing dynamic link customization:
Label Rendering Event
The labelRendering event triggers before each label is rendered, allowing dynamic label customization:
Legend Item Rendering Event
The legendItemRendering event triggers before a legend item is rendered, allowing custom legend item styling:
Size Changed Event
Respond when the chart size changes (e.g., window resize):
Complete Event Handler Example
Combine multiple events for comprehensive handling: