connections.strokeObject
Defines the stroke configuration.
Example - configuring the connection stroke
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Step 1"
}
}, {
id: "2",
x: 200,
content: {
text: "Step 2"
}
}],
connections: [{
from: "1",
to: "2",
stroke: {
color: "#33ccff",
width: 3
}
}]
});
</script>connections.stroke.colorString
Defines the stroke or line color of 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",
stroke: {
color: "#ff6358"
}
}]
});
</script>connections.stroke.widthNumber
Defines the stroke width of 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",
stroke: {
color: "#333",
width: 3
}
}]
});
</script>connections.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", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
stroke: {
lineCap: "round",
width: 4
}
}]
});
</script>connections.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", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
stroke: {
lineJoin: "round",
width: 4
}
}]
});
</script>In this article