connectionDefaults.strokeObject
Defines the connection line configuration.
Example - customizing the connections stroke (line)
<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: 200,
y: 20
}
],
connections:[
{
from: "1",
to: "2"
}
],
connectionDefaults: {
stroke: {
color: "blue",
width: 3
}
}
});
</script>connectionDefaults.stroke.colorString
Defines the stroke or line color of the connection.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
stroke: {
color: "#FF6600",
width: 2
}
},
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" }
]
});
</script>connectionDefaults.stroke.widthNumber
Defines the stroke width of the connection.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
stroke: {
width: 3,
color: "red"
}
},
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" }
]
});
</script>connectionDefaults.stroke.lineCapString
Defines the line cap style of the stroke. Supported values are "butt", "round", and "square".
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes:[
{ id:"1", content: { text: "Start" }, x: 20, y: 20 },
{ id:"2", content: { text: "End" }, x: 200, y: 20 }
],
connections:[
{ from: "1", to: "2" }
],
connectionDefaults: {
stroke: {
color: "blue",
width: 5,
lineCap: "round"
}
}
});
</script>connectionDefaults.stroke.lineJoinString
Defines the line join style of the stroke. Supported values are "bevel", "miter", and "round".
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes:[
{ id:"1", content: { text: "Start" }, x: 20, y: 20 },
{ id:"2", content: { text: "End" }, x: 200, y: 20 }
],
connections:[
{ from: "1", to: "2", points: [{ x: 110, y: 50 }] }
],
connectionDefaults: {
stroke: {
color: "blue",
width: 8,
lineJoin: "round"
},
type: "polyline"
}
});
</script>In this article