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.
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",
endCap: {
type: "ArrowEnd",
fill: "#ff6358"
}
}]
});
</script>connections.endCap.fill.colorString(default: "black")
The connection end cap fill color.
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",
endCap: {
type: "ArrowEnd",
fill: {
color: "#ff6358"
}
}
}]
});
</script>connections.endCap.fill.opacity
The connection end cap fill opacity.
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",
endCap: {
type: "ArrowEnd",
fill: {
color: "#ff6358",
opacity: 0.7
}
}
}]
});
</script>connections.endCap.strokeString|Object
The connection end cap stroke options or color.
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",
endCap: {
type: "ArrowEnd",
stroke: {
color: "#333",
width: 2
}
}
}]
});
</script>connections.endCap.stroke.colorString
The connection end cap stroke color.
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",
endCap: {
type: "ArrowEnd",
stroke: {
color: "#333",
width: 2
}
}
}]
});
</script>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
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",
endCap: {
type: "ArrowEnd",
stroke: {
color: "#333",
dashType: "dash",
width: 2
}
}
}]
});
</script>connections.endCap.stroke.widthNumber
The connection end cap stroke width.
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",
endCap: {
type: "ArrowEnd",
stroke: {
color: "#333",
width: 3
}
}
}]
});
</script>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.
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",
endCap: {
type: "FilledCircle"
}
}]
});
</script>connections.endCap.pathString
The SVG path data for the arrow marker. Applies when the type is "ArrowEnd" or "ArrowStart".
Example - using custom SVG path for end cap
<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",
endCap: {
type: "ArrowEnd",
path: "M 0 0 L 10 5 L 0 10 Z"
}
}]
});
</script>connections.endCap.anchorObject
The anchor point of the arrow marker. This is the point where the marker will be positioned relative to the line. Applies when the type is "ArrowEnd" or "ArrowStart".
Example - setting custom anchor point for end cap
<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",
endCap: {
type: "ArrowEnd",
path: "M 0 0 L 10 5 L 0 10 Z",
anchor: { x: 5, y: 5 }
}
}]
});
</script>connections.endCap.anchor.xNumber
The x-coordinate of the anchor point.
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",
endCap: {
type: "ArrowEnd",
path: "M 0 0 L 10 5 L 0 10 Z",
anchor: { x: 8 }
}
}]
});
</script>connections.endCap.anchor.yNumber
The y-coordinate of the anchor point.
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",
endCap: {
type: "ArrowEnd",
path: "M 0 0 L 10 5 L 0 10 Z",
anchor: { y: 5 }
}
}]
});
</script>connections.endCap.radiusNumber(default: 4)
The radius of the filled circle marker. Applies when the type is "FilledCircle".
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",
endCap: {
type: "FilledCircle",
radius: 8
}
}]
});
</script>In this article