SankeyComponent
Represents the Kendo UI for Angular Sankey diagram component.
The Sankey diagram visualizes flow data between different categories or stages. It displays nodes connected by links where the thickness of each link represents the flow value.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-sankey [data]="data">
</kendo-sankey>
`,
})
export class AppComponent {
public data: SankeyData = {
nodes: [
{ id: 1, label: { text: 'Linux' } },
{ id: 0, label: { text: 'iOS'} },
{ id: 2, label: { text: 'Mobile' } },
{ id: 3, label: { text: 'Desktop' } },
],
links: [
{ sourceId: 0, targetId: 2, value: 1 },
{ sourceId: 1, targetId: 2, value: 2 },
{ sourceId: 1, targetId: 3, value: 3 },
],
};
}
Selector
kendo-sankey
Export Name
Accessible in templates as #kendoSankeyInstance="kendoSankey"
Inputs
Name | Type | Default | Description |
---|---|---|---|
data |
|
Specifies the data for the Sankey component containing the The data object defines the structure and relationships of your flow diagram. | |
disableAutoLayout? |
|
|
Determines whether the Sankey component performs automatic layout. When set to |
labels? |
|
Specifies the default configuration for labels. The settings are applied to all labels unless overridden by individual data items. | |
legend? |
|
Specifies the legend configuration for the Sankey component. | |
links? |
|
Specifies the default configuration for links. The settings are applied to all links unless overridden by individual data items. | |
navigable? |
|
|
Determines whether keyboard navigation is enabled for the Sankey component. When set to |
nodes? |
|
Specifies the default configuration for nodes. The settings are applied to all nodes unless overridden by individual data items. | |
popupSettings |
|
Specifies the settings for the tooltip popup. | |
title? |
|
Specifies the title configuration for the Sankey component. | |
tooltip? |
|
Specifies the configuration for the Sankey tooltip. |
Events
Name | Type | Description |
---|---|---|
linkClick |
|
Fires when the user clicks a link. |
linkEnter |
|
Fires when the user hovers over a link. Similar to the |
linkLeave |
|
Fires when the user stops hovering over a link. Similar to the |
nodeClick |
|
Fires when the user clicks a node. |
nodeEnter |
|
Fires when the user hovers over a node. Similar to the |
nodeLeave |
|
Fires when the user stops hovering over a node. Similar to the |
Methods
exportImage | ||||||
---|---|---|---|---|---|---|
Exports the Sankey diagram as an image. The export operation is asynchronous and returns a promise. | ||||||
| ||||||
|
exportSVG | ||||||
---|---|---|---|---|---|---|
Exports the Sankey diagram as an SVG document. The export operation is asynchronous and returns a promise. | ||||||
| ||||||
|
exportVisual | ||||||
---|---|---|---|---|---|---|
Exports the visual of the Sankey component to a drawing group. | ||||||
| ||||||
|
notifyChanges | ||||||
---|---|---|---|---|---|---|
Updates the component fields with the specified values and refreshes the component. Use this method when you cannot set configuration values through the template. ts
| ||||||
|
reloadTheme |
---|
Reloads the Sankey appearance settings from the current Kendo UI Theme. Call this method after loading a different theme stylesheet. |