contentObject
Defines the shapes content settings.
Example - customizing the shape content
<div id="diagram"></div>
<script>
var Shape = kendo.dataviz.diagram.Shape;
$("#diagram").kendoDiagram();
var diagram = $("#diagram").data("kendoDiagram");
var shape = new Shape({
id: 1,
x: 40,
y: 40,
fill: "#c0f0fc",
content: {
align: "bottom center",
text: "State 1",
color: "#cc3388",
fontFamily: "Segoe UI",
fontWeight: "bold",
fontSize: 18,
fontStyle: "italic"
}
});
diagram.addShape(shape);
</script>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({
shapes: [{
id: "1",
width: 150,
height: 100,
content: {
text: "Right Aligned Text",
align: "middle right"
}
}]
});
</script>content.colorString
The color of the shape content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Red Text",
color: "red"
}
}]
});
</script>content.fontFamilyString
The font family of the shape content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Arial Font",
fontFamily: "Arial, sans-serif"
}
}]
});
</script>content.fontSizeNumber
The font size of the shape content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Large Text",
fontSize: 18
}
}]
});
</script>content.fontStyleString
The font style of the shape content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Italic Text",
fontStyle: "italic"
}
}]
});
</script>content.fontWeightString
The font weight of the shape content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Bold Text",
fontWeight: "bold"
}
}]
});
</script>content.textString
The text displayed in the shape.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Hello World!"
}
}]
});
</script>In this article