Vue Sankey - Customize Labels

NOTE
This article describes the properties that customize labels' text. Labels have other customization properties, 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:

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>
See Also