Components / Charts / API / SankeyComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

SankeyComponent

The Sankey diagram component.

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

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.

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

NameTypeDescription

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]({% slug api_kendo-drawing_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.

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

Not finding the help you need?

Contact Support