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.

ts

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]