New to Kendo UI for AngularStart a free 30-day trial

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.

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

NameTypeDefaultDescription

data

SankeyData

Specifies the data for the Sankey component containing the links and nodes.

The data object defines the structure and relationships of your flow diagram.

disableAutoLayout?

boolean

false

Determines whether the Sankey component performs automatic layout.

When set to true, the component will not arrange nodes and links automatically.

labels?

SankeyLabelDefaults

Specifies the default configuration for labels.

The settings are applied to all labels unless overridden by individual data items.

legend?

SankeyLegend

Specifies the legend configuration for the Sankey component.

SankeyLinkDefaults

Specifies the default configuration for links.

The settings are applied to all links unless overridden by individual data items.

boolean

true

Determines whether keyboard navigation is enabled for the Sankey component.

When set to false, the keyboard navigation will be disabled.

nodes?

SankeyNodeDefaults

Specifies the default configuration for nodes.

The settings are applied to all nodes unless overridden by individual data items.

popupSettings

PopupSettings

Specifies the settings for the tooltip popup.

title?

SankeyTitle

Specifies the title configuration for the Sankey component.

tooltip?

SankeyTooltip

Specifies the configuration for the Sankey tooltip.

Events

NameTypeDescription

linkClick

EventEmitter<SankeyLinkEvent>

Fires when the user clicks a link.

linkEnter

EventEmitter<SankeyLinkEvent>

Fires when the user hovers over a link.

Similar to the mouseenter event.

linkLeave

EventEmitter<SankeyLinkEvent>

Fires when the user stops hovering over a link.

Similar to the mouseleave event.

nodeClick

EventEmitter<SankeyNodeEvent>

Fires when the user clicks a node.

nodeEnter

EventEmitter<SankeyNodeEvent>

Fires when the user hovers over a node.

Similar to the mouseenter event.

nodeLeave

EventEmitter<SankeyNodeEvent>

Fires when the user stops hovering over 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 configuration options for the exported image.

Returns

Promise<string>

  • A promise that resolves 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 component.

Use this method when you cannot set configuration values 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.

In this article
SelectorExport NameInputsEventsMethods
Not finding the help you need?
Contact Support