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

Links.highlight

configuration

The link highlight configuration options.

links.highlight

Object

<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.highlight.inactiveOpacity

Number

The opacity of the links when they are not active.

Default: 0.2

<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.1
        }
    }
});
</script>

links.highlight.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: {
        highlight: {
            opacity: 0.8
        }
    }
});
</script>