shapeDefaults.contentObject

Defines the default shapes content settings.

Example - customizing the shapes content appearance

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        align: "top left",
        color: "yellow",
        fontFamily: "Tahoma",
        fontSize: 16,
        fontStyle: "italic",
        fontWeight: 200
      }
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      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>

shapeDefaults.content.alignString

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.

Example

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

shapeDefaults.content.colorString

The color of the shape content text.

Example

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

shapeDefaults.content.fontFamilyString

The font family of the shape content text.

Example

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

shapeDefaults.content.fontSizeNumber

The font size of the shape content text.

Example

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

shapeDefaults.content.fontStyleString

The font style of the shape content text.

Example

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

shapeDefaults.content.fontWeightString

The font weight of the shape content text.

Example

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

shapeDefaults.content.templateString|Function

The template which renders the labels.

The fields which can be used in the template are:

  • dataItem - The data item if a field has been specified

Example - using a template for the shapes content

<div id="diagram"></div>
<script>
  var serviceRoot = "https://demos.telerik.com/service/v2/core";

  var shapesDataSource = {
    transport: {
      read: {
        url: serviceRoot + "/DiagramShapes"
      }
    },
    schema: {
      model: {
        fields: {
          id: { from: "Id", type: "number" },
          JobTitle: { type: "string" },
          Color: { type: "string" }
        }
      }
    }
  };

  var connectionsDataSource = {
    transport: {
      read: {
        url: serviceRoot + "/DiagramConnections"
      }
    },
    schema: {
      model: {
        id: "id",
        fields: {
          id: { from: "Id", type: "number" },
          from: { from: "FromShapeId", type: "number" },
          to: { from: "ToShapeId", type: "number" },
          fromX: { from: "FromPointX", type: "number" },
          fromY: { from: "FromPointY", type: "number" },
          toX: { from: "ToPointX", type: "number" },
          toY: { from: "ToPointY", type: "number" }
        }
      }
    }
  };

  $("#diagram").kendoDiagram({
    dataSource: shapesDataSource,
    connectionsDataSource: connectionsDataSource,
    layout: {
      type: "layered"
    },
    shapeDefaults: {
      content: {
        template: "#= dataItem.JobTitle #"
      },
      width: 200
    },
    dataBound: onDataBound
  });

  function onDataBound(e) {
    var that = this;
    setTimeout(function () {
      that.bringIntoView(that.shapes);
    }, 0);
  }
</script>

shapeDefaults.content.textString

The text that is displayed in the shape.

Example

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        content: {
            text: "Default Text"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100 },
        { id: "2", x: 300, y: 100, content: { text: "Custom Text" } }
    ]
});
</script>

shapeDefaults.content.lineSpacingNumber

The spacing between lines of text in the shape.

Example - setting line spacing

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "First Line\nSecond Line\nThird Line",
        lineSpacing: 1.5
      },
      width: 120,
      height: 80
    },
    shapes: [
      { x: 50, y: 50 }
    ]
  });
</script>

shapeDefaults.content.textWrapString(default: "nowrap")

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

Example - enabling text wrapping

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "This is a long text that will wrap within the shape boundaries",
        textWrap: "wrap"
      },
      width: 100,
      height: 80
    },
    shapes: [
      { x: 50, y: 50 }
    ]
  });
</script>

shapeDefaults.content.paddingNumber|Object

The padding of the shape content.

Example - setting uniform padding

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Padded Content",
        padding: 15
      },
      fill: { color: "lightblue" },
      stroke: { color: "blue" }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 60 }
    ]
  });
</script>

shapeDefaults.content.padding.topNumber

The top padding of the shape content.

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Top Padded",
        padding: { top: 20, right: 5, bottom: 5, left: 5 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 100, height: 60 }
    ]
  });
</script>

shapeDefaults.content.padding.rightNumber

The right padding of the shape content.

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Right Padded",
        padding: { top: 5, right: 20, bottom: 5, left: 5 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 60 }
    ]
  });
</script>

shapeDefaults.content.padding.bottomNumber

The bottom padding of the shape content.

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Bottom Padded",
        padding: { top: 5, right: 5, bottom: 20, left: 5 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 100, height: 60 }
    ]
  });
</script>

shapeDefaults.content.padding.leftNumber

The left padding of the shape content.

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Left Padded",
        padding: { top: 5, right: 5, bottom: 5, left: 20 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 60 }
    ]
  });
</script>

shapeDefaults.content.relativePaddingNumber|Object

The relative padding of the shape content e.g. 0.03 means 3% of the shape width/height.

Example - setting relative padding

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Relative Padding",
        relativePadding: 0.1
      }
    },
    shapes: [
      { x: 50, y: 50, width: 150, height: 80 },
      { x: 250, y: 50, width: 100, height: 60 }
    ]
  });
</script>

shapeDefaults.content.relativePadding.topNumber

The relative top padding of the shape content.

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Top Relative",
        relativePadding: { top: 0.2, right: 0.05, bottom: 0.05, left: 0.05 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 80 }
    ]
  });
</script>

shapeDefaults.content.relativePadding.rightNumber

The relative right padding of the shape content.

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Right Relative",
        relativePadding: { top: 0.05, right: 0.2, bottom: 0.05, left: 0.05 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 140, height: 60 }
    ]
  });
</script>

shapeDefaults.content.relativePadding.bottomNumber

The relative bottom padding of the shape content.

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Bottom Relative",
        relativePadding: { top: 0.05, right: 0.05, bottom: 0.2, left: 0.05 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 80 }
    ]
  });
</script>

shapeDefaults.content.relativePadding.leftNumber

The relative left padding of the shape content.

Example

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Left Relative",
        relativePadding: { top: 0.05, right: 0.05, bottom: 0.05, left: 0.2 }
      }
    },
    shapes: [
      { x: 50, y: 50, width: 140, height: 60 }
    ]
  });
</script>