New to Kendo UI for jQuery? Start a free 30-day trial

Data.nodes

configuration

The nodes of the Sankey. The nodes are the elements that are connected by the links. Each node has an id that is used to connect the nodes with the links.

data.nodes

Array

Default: (required)

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Input 1" }, color: "#ff6358" },
                { id: 2, label: { text: "Input 2" }, color: "#ffd246" },
                { id: 3, label: { text: "Process" }, color: "#78d237" },
                { id: 4, label: { text: "Output" }, color: "#28b4c8" }
            ],
            links: [
                { sourceId: 1, targetId: 3, value: 30 },
                { sourceId: 2, targetId: 3, value: 20 },
                { sourceId: 3, targetId: 4, value: 50 }
            ]
        }
    });
</script>

data.nodes.align

String

The alignment of the node. The supported values are:

"stretch" - The node is aligned to left or right in order to fill the entire width of the Sankey.
"left" - The node is aligned to the left.
"right" - The node is aligned to the right.

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Left Node" }, align: "left" },
                { id: 2, label: { text: "Right Node" }, align: "right" },
                { id: 3, label: { text: "Center Node" }, align: "stretch" }
            ],
            links: [
                { sourceId: 1, targetId: 3, value: 10 },
                { sourceId: 2, targetId: 3, value: 15 }
            ]
        }
    });
</script>

data.nodes.color

String

The color of the node. Accepts a valid CSS color string, including hex and rgb.

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Red Node" }, color: "#ff6358" },
                { id: 2, label: { text: "Blue Node" }, color: "#1f8ef1" }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.id

Number|String

The ID of the node. The ID is used to connect the nodes with the links.

Default: (required)

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: "node-1", label: { text: "First Node" } },
                { id: "node-2", label: { text: "Second Node" } }
            ],
            links: [
                { sourceId: "node-1", targetId: "node-2", value: 10 }
            ]
        }
    });
</script>

data.nodes.label

Object

The label of the node.

Default: (required)

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { 
                    id: 1, 
                    label: { 
                        text: "Custom Label",
                        color: "#ff6358",
                        font: "bold 14px Arial"
                    } 
                },
                { id: 2, label: { text: "Target Node" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.offset

Object

The offset applied to the node's position.

Default: { top: 0, left: 0 }

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { 
                    id: 1, 
                    label: { text: "Offset Node" },
                    offset: {
                        left: 20,
                        top: 10
                    }
                },
                { id: 2, label: { text: "Normal Node" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.opacity

Number

The opacity of the node.

Default: 1

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Semi-transparent" }, opacity: 0.5 },
                { id: 2, label: { text: "Opaque" }, opacity: 1.0 }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.padding

Number

The minimum vertical space between two nodes.

Default: 16

<div id="sankey" style="width: 500px; height: 300px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Node 1" }, padding: 30 },
                { id: 2, label: { text: "Node 2" }, padding: 30 },
                { id: 3, label: { text: "Node 3" }, padding: 5 },
                { id: 4, label: { text: "Node 4" }, padding: 5 }
            ],
            links: [
                { sourceId: 1, targetId: 3, value: 10 },
                { sourceId: 2, targetId: 4, value: 10 }
            ]
        }
    });
</script>

data.nodes.width

Number

The width of the node.

Default: 24

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Wide Node" }, width: 40 },
                { id: 2, label: { text: "Narrow Node" }, width: 10 }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

Related Members