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

Data.nodes.label

configuration

The label of the node.

data.nodes.label

Object

Default: (required)

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { 
                    id: 1, 
                    label: { 
                        text: "Custom Label",
                        color: "#ff6358",
                        font: "bold 14px Arial"
                    } 
                },
                { id: 2, label: { text: "Target Node" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.label.align

String

The alignment of the label. The supported values are:

"left" - The label is aligned to the left.
"right" - The label is aligned to the right.
"center" - The label is aligned to the center.

Default: "left"

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Left Label", align: "left" } },
                { id: 2, label: { text: "Center Label", align: "center" } },
                { id: 3, label: { text: "Right Label", align: "right" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 },
                { sourceId: 2, targetId: 3, value: 5 }
            ]
        }
    });
</script>

data.nodes.label.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: "Bordered Label",
                        border: {
                            color: "#ff6358",
                            width: 2,
                            dashType: "solid"
                        }
                    } 
                },
                { id: 2, label: { text: "Target Node" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.label.color

String

The color of the label. Accepts a valid CSS color string, including hex and rgb.

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { 
                    id: 1, 
                    label: { 
                        text: "Colored Label",
                        color: "#ff6358"
                    } 
                },
                { id: 2, label: { text: "Default Color" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.label.font

String

The font of the label. Accepts a valid CSS font string. For example, "bold 12px Arial".

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { 
                    id: 1, 
                    label: { 
                        text: "Custom Font",
                        font: "bold 16px Arial"
                    } 
                },
                { id: 2, label: { text: "Default Font" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.label.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: "With Margin",
                        margin: {
                            left: 10,
                            right: 5
                        }
                    } 
                },
                { id: 2, label: { text: "Target Node" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.label.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: "Offset Label",
                        offset: {
                            left: 10,
                            top: -5
                        }
                    } 
                },
                { id: 2, label: { text: "Target Node" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.label.padding

Number|Object

The padding of the label.

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { 
                    id: 1, 
                    label: { 
                        text: "Padded Label",
                        padding: {
                            top: 5,
                            bottom: 5,
                            left: 10,
                            right: 10
                        },
                        border: {
                            color: "#ff6358",
                            width: 1
                        }
                    } 
                },
                { id: 2, label: { text: "Target Node" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.label.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: "Before Node", position: "before" } },
                { id: 2, label: { text: "After Node", position: "after" } },
                { id: 3, label: { text: "Inside Node", position: "inside" } }
            ],
            links: [
                { sourceId: 1, targetId: 3, value: 10 },
                { sourceId: 2, targetId: 3, value: 5 }
            ]
        }
    });
</script>

data.nodes.label.stroke

Object

The stroke of the label.

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { 
                    id: 1, 
                    label: { 
                        text: "Stroked Label",
                        stroke: {
                            color: "#ff6358",
                            width: 2,
                            lineJoin: "round"
                        }
                    } 
                },
                { id: 2, label: { text: "Target Node" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.label.text

String

The text of the label.

Default: (required)

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Custom Label Text" } },
                { id: 2, label: { text: "Another Node" } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

data.nodes.label.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: "Visible Label", visible: true } },
                { id: 2, label: { text: "Hidden Label", visible: false } }
            ],
            links: [
                { sourceId: 1, targetId: 2, value: 10 }
            ]
        }
    });
</script>

Related Members