All docs
V20.1
20.2 (CTP)
20.1
19.2
19.1
18.2
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

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