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.

ts

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]