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

Legend.item

configuration

The configuration of the legend items.

legend.item

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 }
        ]
    },
    legend: {
        visible: true,
        item: {
            cursor: "pointer"
        }
    }
});
</script>

legend.item.areaBackground

String

The background color of the legend item square element. Accepts a valid CSS color string, including HEX and RGB. Defaults to the corresponding node color.

<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 }
        ]
    },
    legend: {
        visible: true,
        item: {
            areaBackground: "#ff6358"
        }
    }
});
</script>

legend.item.areaOpacity

Number

The opacity of the legend item square element. Defaults to the corresponding node opacity.

<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 }
        ]
    },
    legend: {
        visible: true,
        item: {
            areaOpacity: 0.5
        }
    }
});
</script>

legend.item.cursor

String

The cursor style of the legend item.

<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 }
        ]
    },
    legend: {
        visible: true,
        item: {
            cursor: "pointer"
        }
    }
});
</script>

legend.item.visual

Function

A function that can be used to create a custom visual for the legend items. The available argument fields are:

options—The item options.
createVisual—A function for getting the default visual.

<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 }
        ]
    },
    legend: {
        visible: true,
        item: {
            visual: function(e) {
                var rect = new kendo.drawing.Rect(e.rect, {
                    fill: {
                        color: e.options.areaBackground
                    },
                    stroke: {
                        color: "#000000"
                    }
                });
                return rect;
            }
        }
    }
});
</script>