Vue 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:
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
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.