DevExtreme Angular - 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:
jQuery
JavaScript
$(function() { var weightsReducer = function(accumulator, currentValue) { return accumulator + currentValue.weight; } $("#sankeyContainer").dxSankey({ // ... label: { customizeText: function(node) { return node.title + " (in: " + node.linksIn.reduce(weightsReducer, 0) + ", " + + "out: " + node.linksOut.reduce(weightsReducer, 0) + ")"; } } }); });
Angular
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.