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

Data.links.highlight

configuration

The link highlight configuration options.

data.links.highlight

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

data.links.highlight.inactiveOpacity

Number

The opacity of the links when another link is highlighted by hovering or tapping on it.

Default: 0.2

<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: 2, 
                    value: 10,
                    highlight: {
                        inactiveOpacity: 0.1
                    }
                },
                { 
                    sourceId: 2, 
                    targetId: 3, 
                    value: 5,
                    highlight: {
                        inactiveOpacity: 0.1
                    }
                }
            ]
        }
    });
</script>

data.links.highlight.opacity

Number

The opacity of the links when they are highlighted by hovering or tapping on them.

Default: 0.8

<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: 1.0
                    }
                }
            ]
        }
    });
</script>