SankeyComponent

The Sankey diagram component.

ts

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	SankeyData		The data of the Sankey component containing the links and nodes.
disableAutoLayout?	boolean		If set to true, the Sankey component will not perform automatic layout.
labels?	SankeyLabelDefaults		The default configuration for labels. These settings will be applied to all labels unless overridden by individual data items.
legend?	SankeyLegend		The legend configuration of the Sankey component.
links?	SankeyLinkDefaults		The default configuration for links. These settings will be applied to all links unless overridden by individual data items.
navigable?	boolean	true	If set to false, the Sankey keyboard navigation will be disabled. By default, navigation is enabled.
nodes?	SankeyNodeDefaults		The default configuration for nodes. These settings will be applied to all nodes unless overridden by individual data items.
popupSettings	PopupSettings		The settings for the tooltip popup.
title?	SankeyTitle		The title configuration of the Sankey component.
tooltip?	SankeyTooltip		The configuration of the Sankey tooltip.

Events

Name	Type	Description
linkClick	EventEmitter<SankeyLinkEvent>	Fires when a link is clicked.
linkEnter	EventEmitter<SankeyLinkEvent>	Fires when the mouse pointer enters a link. Similar to the mouseenter event,
linkLeave	EventEmitter<SankeyLinkEvent>	Fires when the mouse pointer leaves a link. Similar to the mouseleave event.
nodeClick	EventEmitter<SankeyNodeEvent>	Fires when a node is clicked.
nodeEnter	EventEmitter<SankeyNodeEvent>	Fires when the mouse pointer enters a node. Similar to the mouseenter event.
nodeLeave	EventEmitter<SankeyNodeEvent>	Fires when the mouse pointer leaves a node. Similar to the mouseleave event.

Methods

exportImage
Exports the Sankey diagram as an image. The export operation is asynchronous and returns a promise.
Parameters options SankeyExportVisualOptions intersected with ImageExportOptions The parameters for the exported image.
Returns Promise<string> A promise that will be resolved with a PNG image encoded as a Data URI.

exportSVG
Exports the Sankey diagram as an SVG document. The export operation is asynchronous and returns a promise.
Parameters options SankeyExportVisualOptions intersected with SVGExportOptions The parameters for the exported file.
Returns Promise<string> A promise that will be resolved with an SVG document that is encoded as a Data URI.

exportVisual
Exports the visual of the Sankey component to a drawing group.
Parameters options SankeyExportVisualOptions The parameters for the export operation.
Returns Group The root Group of the scene.

notifyChanges
Updates the component fields with the specified values and refreshes the widget. Use this method when the configuration values cannot be set through the template. ts sankey.notifyChanges({ title: { text: 'New Title' } });
Parameters changes any An object containing the updated input fields.

reloadTheme
Reloads the Sankey appearance settings from the current Kendo UI Theme. Call this method after loading a different theme stylesheet.