All docs
V20.2
20.2
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.

Resolve Overlapping

Node labels can overlap when the Sankey contains many nodes. You can specify the label.overlappingBehavior option 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