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

Data.links

configuration

The links of the Sankey. The links are the connections between the nodes. Each link has a sourceId and targetId that correspond to the id of the source and target nodes, and a value that represents the value of the link.

data.links

Array

Default: (required)

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Source 1" } },
                { id: 2, label: { text: "Source 2" } },
                { id: 3, label: { text: "Target" } }
            ],
            links: [
                { sourceId: 1, targetId: 3, value: 50 },
                { sourceId: 2, targetId: 3, value: 30 }
            ]
        }
    });
</script>

data.links.color

String

The color of the link. The color is used when the colorType option is set to static. 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: "Node 1" } },
                { id: 2, label: { text: "Node 2" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10, color: "#ff6358", colorType: "static" }
            ]
        }
    });
</script>

data.links.colorType

String

The color type of the link. The supported values are:

"static" - The link color is static. The color is determined by the link's color option.
"source" - The link color is the same as the source node color.
"target" - The link color is the same as the target node color.

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

data.links.highlight

Object

The link highlight configuration options.

<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" } }
            ],
            links: [
                { 
                    sourceId: 1, 
                    targetId: 2, 
                    value: 10,
                    highlight: {
                        opacity: 0.9,
                        inactiveOpacity: 0.1
                    }
                }
            ]
        }
    });
</script>

data.links.opacity

Number

The opacity of the links.

Default: 0.4

<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" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10, opacity: 0.8 }
            ]
        }
    });
</script>

data.links.sourceId

Number|String

The source node ID of the link. The source node is the node from which the link originates.

Default: (required)

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

data.links.targetId

Number|String

The target node ID of the link. The target node is the node to which the link points.

Default: (required)

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

data.links.value

Number

The value of the link. The value represents the weight of the link and determines the width of the link.

Default: (required)

<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" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 25 }
            ]
        }
    });
</script>

Related Members