connections.contentObject
Defines the connection content settings.
Example - configuring the connections content (text)
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes:[
{
id:"1",
content:{
text: "State 1"
},
x: 20,
y: 20
},
{
id:"2",
content: {
text: "State 2"
},
x: 300,
y: 20
}
],
connections:[
{
from: "1",
to: "2",
content: {
text: "Step 1",
color: "purple",
fontFamily: "Tahoma",
fontSize: 16,
fontStyle: "italic",
fontWeight: 600
}
}
]
});
</script>connections.content.colorString
The color of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
color: "#ff6358"
}
}]
});
</script>connections.content.fontFamilyString
The font family of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
fontFamily: "Arial, sans-serif"
}
}]
});
</script>connections.content.fontSizeNumber
The font size of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
fontSize: 14
}
}]
});
</script>connections.content.fontStyleString
The font style of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
fontStyle: "italic"
}
}]
});
</script>connections.content.fontWeightString
The font weight of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
fontWeight: "bold"
}
}]
});
</script>connections.content.templateString|Function
The template which renders the labels.
Example - using a template for the connection label
pseudo
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes:[
{
id:"1",
content:{
text: "State 1"
},
x: 20,
y: 20
},
{
id:"2",
content: {
text: "State 2"
},
x: 300,
y: 20
}
],
connections:[
{
from: "1",
to: "2",
content: {
template: () => {
return (
"Iteration on " + kendo.toString(new Date(), "MM/dd/yyyy")
);
},
},
}
]
});
</script>connections.content.textString
The text displayed for the connection.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection Label"
}
}]
});
</script>connections.content.visualFunction
A function returning a visual element to render for the content of the connection.
Example - using a custom visual to render additional content in the connection label
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes:[
{
id:"1",
content:{
text: "State 1"
},
x: 20,
y: 20
},
{
id:"2",
content: {
text: "State 2"
},
x: 300,
y: 20
}
],
connections:[
{
from: "1",
to: "2",
content: {
visual: function(e) {
var g = new kendo.dataviz.diagram.Group({
autoSize: true
});
var circle = new kendo.dataviz.diagram.Circle({
width: 15,
height: 15,
fill: {
color: "LimeGreen"
}
});
var text = new kendo.dataviz.diagram.TextBlock({
text: "Valid",
fontSize: 16,
x: 20
});
g.append(circle);
g.append(text);
return g;
}
}
}
]
});
</script>connections.content.positionString|Object(default: { vertical: "top", horizontal: "right" })
Defines the position of the label relative to the connection path. Can be set to "inline" to position the label along the connection path, or an object with vertical and horizontal properties.
Example - positioning connection label inline
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
position: "inline"
}
}]
});
</script>Example - positioning connection label using object configuration
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 200, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
position: {
vertical: "bottom",
horizontal: "left"
}
}
}]
});
</script>connections.content.position.verticalString(default: "top")
The vertical position of the label relative to horizontal connections. The supported values are "top" and "bottom".
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
position: {
vertical: "bottom"
}
}
}]
});
</script>connections.content.position.horizontalString(default: "right")
The horizontal position of the label relative to vertical connections. The supported values are "left" and "right".
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 100, y: 300, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
position: {
horizontal: "left"
}
}
}]
});
</script>connections.content.backgroundString
The background color of the connection label. Accepts valid CSS colors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Important",
background: "#ffeb3b",
border: {
color: "#000",
width: 1
}
}
}]
});
</script>connections.content.borderObject
The border options of the connection label. Applicable when background is set.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
background: "#fff",
border: {
color: "#000",
width: 1
}
}
}]
});
</script>connections.content.border.colorString
The color of the connection label border.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
background: "#fff",
border: {
color: "#2196f3",
width: 2
}
}
}]
});
</script>connections.content.border.widthNumber(default: 1)
The width of the connection label border.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
background: "#fff",
border: {
color: "#000",
width: 3
}
}
}]
});
</script>connections.content.border.dashTypeString
The dash type of the connection label border. The supported values are "dash", "dashDot", "dot", "longDash", "longDashDot", "longDashDotDot", and "solid".
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
background: "#fff",
border: {
color: "#000",
width: 1,
dashType: "dash"
}
}
}]
});
</script>connections.content.paddingNumber|Object(default: { left: 4, right: 4, top: 2, bottom: 2 })
The padding options of the connection label. Applicable when background or border is set.
Example - using uniform padding
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
background: "#ffeb3b",
padding: 10
}
}]
});
</script>connections.content.padding.topNumber(default: 2)
The top padding of the connection label.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
background: "#ffeb3b",
padding: {
top: 10,
right: 4,
bottom: 2,
left: 4
}
}
}]
});
</script>connections.content.padding.rightNumber(default: 4)
The right padding of the connection label.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
background: "#ffeb3b",
padding: {
top: 2,
right: 15,
bottom: 2,
left: 4
}
}
}]
});
</script>connections.content.padding.bottomNumber(default: 2)
The bottom padding of the connection label.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
background: "#ffeb3b",
padding: {
top: 2,
right: 4,
bottom: 10,
left: 4
}
}
}]
});
</script>connections.content.padding.leftNumber(default: 4)
The left padding of the connection label.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
content: {
text: "Connection",
background: "#ffeb3b",
padding: {
top: 2,
right: 4,
bottom: 2,
left: 15
}
}
}]
});
</script>