connections.endCapString|Object
The connection end cap configuration or type name.
Example - configuring the connection end cap
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Monday"
}
}, {
id: "2",
x: 200,
content: {
text: "Tuesday"
}
}],
connections: [{
from: "1",
to: "2",
endCap: {
type: "FilledCircle",
fill: {
color: "red"
},
stroke: {
color: "blue",
width: 2
}
}
}]
});
</script>
connections.endCap.fillString|Object
The connection end cap fill options or color.
connections.endCap.fill.colorString
(default: "black")
The connection end cap fill color.
connections.endCap.fill.opacity
The connection end cap fill opacity.
connections.endCap.strokeString|Object
The connection end cap stroke options or color.
connections.endCap.stroke.colorString
The connection end cap stroke color.
connections.endCap.stroke.dashTypeString
The connection end cap stroke dash type.
The following dash types are supported:
- "dash" - A line that consists of dashes
- "dashDot" - A line that consists of a repeating pattern of dash-dot
- "dot" - A line that consists of dots
- "longDash" - A line that consists of a repeating pattern of long-dash
- "longDashDot" - A line that consists of a repeating pattern of long-dash-dot
- "longDashDotDot" - A line that consists of a repeating pattern of long-dash-dot-dot
- "solid" - A solid line
connections.endCap.stroke.widthNumber
The connection end cap stroke width.
connections.endCap.typeString
(default: "none")
The connection end cap type.
The supported values are:
- "none": no cap
- "ArrowEnd": a filled arrow
- "FilledCircle": a filled circle
You can also use "ArrowStart" for the endCap but its direction will be inversed.
In this article