Angular Sankey - Customize Labels
NOTE
You can use the customizeText function to change the labels' text. Its argument contains a Node object that provides information about the node being customized. The function should return a string value that will be used as a label's text.
In the following example, the customizeText function is used to add incoming and outgoing weight values to the label:
TypeScript
HTML
- import { DxSankeyModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- constructor() {
- this.sankey_label_customizeText = this.sankey_label_customizeText.bind(this);
- }
- weightsReducer(accumulator, currentValue) {
- return accumulator + currentValue.weight;
- }
- sankey_label_customizeText(node) {
- return node.title + " (in: " + node.linksIn.reduce(this.weightsReducer, 0) + ", "
- + "out: " + node.linksOut.reduce(this.weightsReducer, 0) + ")";
- }
- }
- @NgModule({
- imports: [
- // ...
- DxSankeyModule
- ],
- // ...
- })
- <dx-sankey ... >
- <dxi-series>
- <dxo-label
- [customizeText]="sankey_label_customizeText">
- </dxo-label>
- </dxi-series>
- </dx-sankey>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.