All docs
V23.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery Sankey - Rearrange Nodes

The Sankey's algorithm distributes nodes between columns. This distribution ensures a proper node-to-node flow direction. You cannot move nodes from one column to another because this alters the flow direction.

However, you can sort nodes within a column. Configure the sortData object so that its fields correspond to nodes. The field values should be node weights: the heavier the node, the lower it is in its column. Refer to the sortData description for an example.

Nodes in a column are separated by a space. You can use the node.padding property to specify this space. In the following code, this distance is reduced to 1 pixel:

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        node: {
            padding: 1
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-node [padding]="1"></dxo-node>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxNode :padding="1" />
    </DxSankey>
</template>

<script>
import DxSankey, { DxNode } from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey,
        DxNode
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, { Node } from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Node padding={1} />
            </Sankey>
        )
    }
}

export default App;

Each column can be aligned vertically. You can find an example in the alignment property's description.

See Also