DevExtreme Vue - Customize Labels

NOTE
This article describes the options that customize labels' text. Labels have other customization options, such as font, border, shadow, and so on. Refer to the label API reference section for more information about them.

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>
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxLabel :customize-text="customizeText" />
    </DxSankey>
</template>

<script>
import DxSankey, { DxLabel } from 'devextreme-vue/sankey';

const weightsReducer = (accumulator, currentValue) => {
    return accumulator + currentValue.weight;
}

export default {
    components: {
        DxSankey,
        DxLabel
    },
    methods: {
        customizeText(node) {
            return `${node.title} (in: ${node.linksIn.reduce(weightsReducer, 0)}, out: ${node.linksOut.reduce(weightsReducer, 0)})`;
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, { Label } from 'devextreme-react/sankey';

const weightsReducer = (accumulator, currentValue) => {
    return accumulator + currentValue.weight;
}

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Label customizeText={this.customizeText} />
            </Sankey>
        )
    }
    customizeText(node) {
        return `${node.title} (in: ${node.linksIn.reduce(weightsReducer, 0)}, out: ${node.linksOut.reduce(weightsReducer, 0)})`;
    }
}

export default App;
See Also