React Sankey - Resolve Overlapping
Node labels can overlap when the Sankey contains many nodes. You can specify the label.overlappingBehavior property to resolve overlapping: you can hide overlapping labels, truncate them with ellipsis, or leave them overlapped:
jQuery
JavaScript
$(function() { $("#sankeyContainer").dxSankey({ // ... label: { overlappingBehavior: "ellipsis" // or "hide" | "none" } }); });
Angular
HTML
TypeScript
<dx-sankey ... > <dxo-label overlappingBehavior="ellipsis"> <!-- or "hide" | "none" --> </dxo-label> </dx-sankey>
import { DxSankeyModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxSankeyModule ], // ... })
Vue
App.vue
<template> <DxSankey ... > <DxLabel overlapping-behavior="ellipsis" <!-- or "hide" | "none" --> /> </DxSankey> </template> <script> import DxSankey, { DxLabel } from 'devextreme-vue/sankey'; export default { components: { DxSankey, DxLabel } } </script>
React
App.js
import React from 'react'; import Sankey, { Label } from 'devextreme-react/sankey'; class App extends React.Component { render() { return ( <Sankey ... > <Label overlappingBehavior="ellipsis" {/* or "hide" | "none" */} /> </Sankey> ) } } export default App;
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.