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

Links

configuration

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

links

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 }
            ]
        },
        links: {
            color: "green",
            colorType: "static",
            highlight: {
                inactiveOpacity: 0.2,
                opacity: 0.8
            },
            opacity: 1
        }
    });
</script>

links.color

String

The color of the links.

<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 }
        ]
    },
    links: {
        color: "#ff6358"
    }
});
</script>

links.colorType

String

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

"source" - the color of the link is determined by the source node.
"static" - the color of the link is static.
"target" - the color of the link is determined by the target node.

Default: "static"

<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 }
        ]
    },
    links: {
        colorType: "source"
    }
});
</script>

links.focusHighlight

Object

The link 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 }
        ]
    },
    links: {
        focusHighlight: {
            border: {
                color: "#ff6358",
                width: 3
            }
        }
    }
});
</script>

links.highlight

Object

The link 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 }
        ]
    },
    links: {
        highlight: {
            inactiveOpacity: 0.3,
            opacity: 0.9
        }
    }
});
</script>

links.labels

Object

The link 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 }
        ]
    },
    links: {
        labels: {
            ariaTemplate: (data) => `Link: ${data.value} units`
        }
    }
});
</script>

links.opacity

Number

The opacity of the links.

Default: 1

<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 }
        ]
    },
    links: {
        opacity: 0.7
    }
});
</script>

Related Members