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

Legend

configuration

The legend configuration options of the Sankey.

legend

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 }
            ]
        },
        legend: {
            background: "white",
            border: { color: "black", dashType: "solid", width: 1 },
            labels: {
                color: "black",
                font: "12px Arial,Helvetica,sans-serif",
            },
            position: "right",
            title: {
                align: "center",
                background: "white",
                color: "black",
                font: "bold 16px Arial,Helvetica,sans-serif",
                position: "bottom",
                text: "Legend",
            }
        }
    });
</script>

legend.align

String

The alignment of the legend. The supported values are:

"start" - The legend is aligned to the start.
"center" - The legend is aligned to the center.
"end" - The legend is aligned to the end.

Default: "start"

<div id="sankey" style="width: 500px; height: 300px;"></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 }
            ]
        },
        legend: {
            visible: true,
            align: "center"
        }
    });
</script>

legend.background

String

The background color of the legend.

<div id="sankey" style="width: 500px; height: 300px;"></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 }
            ]
        },
        legend: {
            visible: true,
            background: "#f0f0f0"
        }
    });
</script>

legend.border

Object

The border of the legend.

<div id="sankey" style="width: 500px; height: 300px;"></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 }
            ]
        },
        legend: {
            visible: true,
            border: {
                color: "#ff6358",
                width: 2,
                dashType: "solid"
            }
        }
    });
</script>

legend.height

Number

The height of the legend.

<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,
        height: 150
    }
});
</script>

legend.item

Object

The configuration of the legend items.

<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.labels

Object

The Sankey legend label configuration.

<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,
        labels: {
            color: "#333333",
            font: "14px Arial"
        }
    }
});
</script>

legend.margin

Number|Object

The margin of the Sankey legend. A numeric value will set all paddings.

Default: 5

<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,
        margin: 10
    }
});
</script>

The X offset of the Sankey legend. The offset is relative to the default position of the legend. For instance, a value of 20 will move the legend 20 pixels to the right of its initial position. A negative value will move the legend to the left of its current position.

Default: 0

<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,
        offsetX: 30
    }
});
</script>

legend.offsetY

Number

The Y offset of the Sankey legend. The offset is relative to the current position of the legend. For instance, a value of 20 will move the legend 20 pixels down from its initial position. A negative value will move the legend upwards from its current position.

Default: 0

<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,
        offsetY: -20
    }
});
</script>

legend.orientation

String

The orientation of the legend items.

The supported values are:

"vertical" - the legend items are added vertically.
"horizontal" - the legend items are added horizontally.

Default: "vertical"

<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,
        orientation: "horizontal"
    }
});
</script>

legend.padding

Number|Object

The padding of the Sankey legend. A numeric value will set all paddings.

Default: 5

<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,
        padding: 15
    }
});
</script>

legend.position

String

The positions of the Sankey legend.

The supported values are:

"top" - the legend is positioned on the top.
"bottom" - the legend is positioned on the bottom.
"left" - the legend is positioned on the left.
"right" - the legend is positioned on the right.
"custom" - the legend is positioned using legend.offsetX and legend.offsetY.

Default: "right"

<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,
        position: "bottom"
    }
});
</script>

legend.reverse

Boolean

If set to true the legend items will be reversed.

Default: false

<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,
        reverse: true
    }
});
</script>

legend.spacing

Number

The spacing between the labels in pixels when the legend.orientation is "horizontal".

<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,
        orientation: "horizontal",
        spacing: 20
    }
});
</script>

legend.title

Object

The legend title 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 }
        ]
    },
    legend: {
        visible: true,
        title: {
            text: "Legend Title"
        }
    }
});
</script>

legend.visible

Boolean

If set to false the Sankey will not display the legend.

Default: true

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

legend.width

Number

The legend width when the legend.orientation is set to "horizontal".

<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,
        orientation: "horizontal",
        width: 300
    }
});
</script>

Related Members