New to Kendo UI for Angular? Start a free 30-day trial
SankeyNodeTooltipTemplateDirective
A directive that selects a template
within the <kendo-sankey-tooltip> component for the
series tooltip.
The following context fields are frequently utilized:
let-color="color"—The node color.let-label="label"—The node label data.let-value="value"—The node value.
For the full list of available fields, refer to the SankeyNodeTooltipTemplateContext.
import { Component } from '@angular/core';
import { SankeyData } from '@progress/kendo-angular-charts';
@Component({
selector: 'my-app',
template: `
<kendo-sankey [data]="data">
<ng-template kendoSankeyNodeTooltipTemplate let-color="color" let-label="label" let-value="value">
{{ label.text }}: {{ value }}
</ng-template>
</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
[kendoSankeyNodeTooltipTemplate]
