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

Nodes

configuration

The default nodes configuration of the Sankey. The nodes configuration options will be overridden by the data.nodes configuration.

nodes

Object

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Node 1" } },
                { id: 2, label: { text: "Node 2" } },
                { id: 3, label: { text: "Node 3" } }
            ],
            links: [
                { sourceId: 1, targetId: 3, value: 2 },
                { sourceId: 2, targetId: 3, value: 1 }
            ]
        },
        nodes: {
            align: "stretch",
            color: "green",
            offset: { left: 0, top: 0 },
            padding: 16,
            width: 24
        }
    });
</script>

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.

Default: "stretch"

<div id="sankey"></div>
<script>
$("#sankey").kendoSankey({
    data: {
        nodes: [
            { id: 1, label: { text: "Solar" } },
            { id: 2, label: { text: "Electricity" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 40 }
        ]
    },
    nodes: {
        align: "left"
    }
});
</script>

nodes.focusHighlight

Object

The node focus highlight configuration options.

<div id="sankey"></div>
<script>
$("#sankey").kendoSankey({
    data: {
        nodes: [
            { id: 1, label: { text: "Solar" } },
            { id: 2, label: { text: "Electricity" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 40 }
        ]
    },
    nodes: {
        focusHighlight: {
            border: {
                color: "#ff6358",
                width: 3
            }
        }
    }
});
</script>

nodes.labels

Object

The node labels configuration options.

<div id="sankey"></div>
<script>
$("#sankey").kendoSankey({
    data: {
        nodes: [
            { id: 1, label: { text: "Solar" } },
            { id: 2, label: { text: "Electricity" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 40 }
        ]
    },
    nodes: {
        labels: {
            ariaTemplate: (data) => `Node: ${data.node.label.text}`
        }
    }
});
</script>

nodes.offset

Object

The offset applied to the node's position.

Default: { top: 0, left: 0 }

<div id="sankey"></div>
<script>
$("#sankey").kendoSankey({
    data: {
        nodes: [
            { id: 1, label: { text: "Solar" } },
            { id: 2, label: { text: "Electricity" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 40 }
        ]
    },
    nodes: {
        offset: {
            left: 10,
            top: 5
        }
    }
});
</script>

nodes.padding

Number

The minimum vertical space between two nodes.

Default: 16

<div id="sankey"></div>
<script>
$("#sankey").kendoSankey({
    data: {
        nodes: [
            { id: 1, label: { text: "Solar" } },
            { id: 2, label: { text: "Wind" } },
            { id: 3, label: { text: "Electricity" } }
        ],
        links: [
            { sourceId: 1, targetId: 3, value: 30 },
            { sourceId: 2, targetId: 3, value: 10 }
        ]
    },
    nodes: {
        padding: 24
    }
});
</script>

nodes.width

Number

The width of the node.

Default: 24

<div id="sankey"></div>
<script>
$("#sankey").kendoSankey({
    data: {
        nodes: [
            { id: 1, label: { text: "Solar" } },
            { id: 2, label: { text: "Electricity" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 40 }
        ]
    },
    nodes: {
        width: 32
    }
});
</script>

Related Members