All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
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.
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Overview

In the Sankey widget, nodes represent objects in a system. Nodes have weights and are connected using links that illustrate the weight flow between nodes. The links' width is proportional to the flow magnitude.

Sankey Nodes and Links

Nodes get data from the source and target data fields; links get data from the weight data field.

To configure the elements' appearance, use the node and link objects. In the following code, nodes are made half-opaque, and the links' border is made visible:

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        node: {
            opacity: 0.5
        },
        link: {
            border: {
                visible: true
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-node [opacity]="0.5"></dxo-node>
    <dxo-link>
        <dxo-border [visible]="true"></dxo-border>
    </dxo-link>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})

View Demo

See Also