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

Shapes.content

configuration

Defines the shapes content settings.

shapes.content

Object

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Monday",
        align: "top left",
        color: "yellow",
        fontFamily: "Tahoma",
        fontSize: 16,
        fontStyle: "italic",
        fontWeight: 200
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      },
      x: 250,
      y: 20
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      },
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

The alignment of the text inside the shape. You can do combinations between "top", "middle" and "bottom" for vertical align and "right", "center" and "left" for horizontal align. For example, "top right", "middle left", "bottom center", and so on.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        x: 100,
        y: 100,
        content: {
            text: "Aligned Text",
            align: "bottom right"
        }
    }]
});
</script>

shapes.content.color

String

The color of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        x: 100,
        y: 100,
        content: {
            text: "Colored Text",
            color: "red"
        }
    }]
});
</script>

shapes.content.fontFamily

String

The font family of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        x: 100,
        y: 100,
        content: {
            text: "Custom Font",
            fontFamily: "Arial"
        }
    }]
});
</script>

shapes.content.fontSize

Number

The font size of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        x: 100,
        y: 100,
        content: {
            text: "Large Text",
            fontSize: 20
        }
    }]
});
</script>

shapes.content.fontStyle

String

The font style of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        x: 100,
        y: 100,
        content: {
            text: "Italic Text",
            fontStyle: "italic"
        }
    }]
});
</script>

shapes.content.fontWeight

String

The font weight of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        x: 100,
        y: 100,
        content: {
            text: "Bold Text",
            fontWeight: "bold"
        }
    }]
});
</script>

shapes.content.lineSpacing

Number

The line spacing of the content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      content: {
        text: "Line 1\nLine 2\nLine 3",
        lineSpacing: 1.5
      }
    }]
});
</script>

shapes.content.padding

Object|Number

The padding of the content.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      content: {
        text: "Padded Text",
        padding: 10
      }
    }]
});
</script>

shapes.content.relativePadding

Object|Number

The relative padding of the content as a percentage of the shape size.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      content: {
        text: "Relative Padded Text",
        relativePadding: 0.1  // 10% of shape size
      }
    }]
});
</script>

shapes.content.template

String|Function

The template which renders the labels.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        template: "Day 1: " + kendo.toString(new Date(), "dd MMM yyyy")
      },
      width: 200,
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Day 2"
      },
      x: 450,
      y: 20
    }, {
      id: "3",
      content: {
        text: "Day 3"
      },
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.content.text

String

The text displayed in the shape.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Day 1"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Day 2"
      },
      x: 450,
      y: 20
    }, {
      id: "3",
      content: {
        text: "Day 3"
      },
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.content.textWrap

String

Configures the text wrapping behavior in the shape. Supported values are "nowrap" and "wrap".

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
      content: {
        text: "This is a long text that should wrap within the shape",
        textWrap: "wrap"
      },
      width: 120
    }]
});
</script>

Related Members