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

Labels

configuration

The default labels configuration of the Sankey. The labels configuration options will be overridden by the data.nodes.label configuration.

labels

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 }
            ]
        },
        labels: {
            align: "left",
            color: "red",
            font: "12px Arial,Helvetica,sans-serif",
            margin: { left: 8, right: 8 },
            offset: { left: 0, top: 0 },
            opacity: 1,
            padding: 0,
            position: "inside",
            stroke: { color: "white", lineJoin: "round", width: 1 },
            visible: true
        }
    });
</script>

labels.align

String

The alignment of the label.

Default: "left"

<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 }
            ]
        },
        labels: {
            align: "center"
        }
    });
</script>

labels.border

Object

The border of the label.

<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 }
            ]
        },
        labels: {
            border: {
                color: "#ff6358",
                width: 2,
                dashType: "solid"
            }
        }
    });
</script>

labels.color

String

The color of the label.

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

labels.font

String

The font of the label.

<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 }
            ]
        },
        labels: {
            font: "bold 16px Arial"
        }
    });
</script>

labels.margin

Object

The margin of the label.

<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 }
            ]
        },
        labels: {
            margin: {
                left: 15,
                right: 10
            }
        }
    });
</script>

labels.offset

Object

The offset applied to the label's position.

<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 }
            ]
        },
        labels: {
            offset: {
                left: 10,
                top: -5
            }
        }
    });
</script>

labels.padding

Number|Object

The padding of the label.

Default: 0

<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 }
            ]
        },
        labels: {
            padding: {
                top: 5,
                bottom: 5,
                left: 10,
                right: 10
            },
            border: {
                color: "#ff6358",
                width: 1
            }
        }
    });
</script>

labels.position

String

The position of the label. The supported values are:

"inside" - The label is positioned after the node, except for the nodes at the end of the Sankey, that are placed before the node.
"before" - The label is positioned before the node.
"after" - The label is positioned after the node.

Default: "inside"

<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 }
            ]
        },
        labels: {
            position: "before"
        }
    });
</script>

labels.stroke

Object

The stroke of the label text.

<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 }
            ]
        },
        labels: {
            stroke: {
                color: "#ff6358",
                width: 2,
                lineJoin: "round"
            }
        }
    });
</script>

labels.visible

Boolean

If set to false, the label will not be displayed.

Default: true

<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 }
            ]
        },
        labels: {
            visible: false
        }
    });
</script>

Related Members