New to Kendo UI for Angular? Start a free 30-day trial
SankeyLinkTooltipTemplateDirective
A directive that selects a template
within the <kendo-sankey-tooltip> component for the
links tooltip.
The following context fields are frequently utilized:
let-source="source"—The link source data item..let-target="target"—The link target data item.let-value="value"—The link value.
For the full list of available fields, refer to the SankeyLinkTooltipTemplateContext.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-tooltip>
<ng-template kendoChartSeriesTooltipTemplate let-value="value">
Value is {{value}}
</ng-template>
</kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item [data]="[1, 2, 3]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
}
import { Component } from '@angular/core';
import { SankeyData } from '@progress/kendo-angular-charts';
@Component({
selector: 'my-app',
template: `
<kendo-sankey [data]="data">
<kendo-sankey-tooltip [followPointer]="true">
<ng-template kendoSankeyLinkTooltipTemplate let-source="source" let-target="target" let-value="value">
{{ source.label?.text }} - {{ target.label?.text }}: {{ value }}
</ng-template>
</kendo-sankey-tooltip>
</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
[kendoSankeyLinkTooltipTemplate]
