connectionDefaults.endCapString|Object
The connections end cap configuration. Can be set to a configuration object or a string that represents the endCap.type value.
Example - configuring the connection end cap
<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: {
endCap: {
type: "FilledCircle",
fill: {
color: "red"
},
stroke: {
color: "blue",
width: 2
}
}
}
});
</script>connectionDefaults.endCap.fillString|Object
The connections end cap fill options or color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
endCap: {
fill: "red",
type: "ArrowEnd"
}
},
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.endCap.fill.colorString(default: "black")
The connections end cap fill color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
endCap: {
fill: {
color: "blue"
},
type: "ArrowEnd"
}
},
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.endCap.fill.opacity
The connections end cap fill opacity.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
endCap: {
fill: {
color: "blue",
opacity: 0.5
},
type: "ArrowEnd"
}
},
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.endCap.strokeString|Object
The connections end cap stroke options or color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
endCap: {
stroke: "green",
type: "ArrowEnd"
}
},
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.endCap.stroke.colorString
The connections end cap stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
endCap: {
stroke: {
color: "purple",
width: 2
},
type: "ArrowEnd"
}
},
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.endCap.stroke.lineCapString
Defines the line cap style of the stroke. Supported values are "butt", "round", and "square".
connectionDefaults.endCap.stroke.lineJoinString
Defines the line join style of the stroke. Supported values are "bevel", "miter", and "round".
connectionDefaults.endCap.stroke.dashTypeString
The connections 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({
connectionDefaults: {
endCap: {
stroke: {
dashType: "dash",
color: "red",
width: 2
},
type: "ArrowEnd"
}
},
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.endCap.stroke.widthNumber
The connections end cap stroke width.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
endCap: {
stroke: {
width: 3,
color: "red"
},
type: "ArrowEnd"
}
},
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.endCap.typeString(default: "none")
The end cap type used in connections.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
endCap: {
type: "ArrowEnd"
}
},
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>The supported values are:
- "none": no cap
- "ArrowEnd": a filled arrow
- "FilledCircle": a filled circle
connectionDefaults.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", content: { text: "Start" }, x: 20, y: 20 },
{ id:"2", content: { text: "End" }, x: 200, y: 20 }
],
connections:[
{ from: "1", to: "2" }
],
connectionDefaults: {
endCap: {
type: "ArrowEnd",
path: "M 0,0 L 10,5 L 0,10 z"
}
}
});
</script>connectionDefaults.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", content: { text: "Start" }, x: 20, y: 20 },
{ id:"2", content: { text: "End" }, x: 200, y: 20 }
],
connections:[
{ from: "1", to: "2" }
],
connectionDefaults: {
endCap: {
type: "ArrowEnd",
anchor: { x: 5, y: 5 }
}
}
});
</script>connectionDefaults.endCap.anchor.xNumber
The x-coordinate of the anchor point.
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: {
endCap: {
type: "ArrowEnd",
anchor: { x: 8, y: 5 }
}
}
});
</script>connectionDefaults.endCap.anchor.yNumber
The y-coordinate of the anchor point.
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: {
endCap: {
type: "ArrowEnd",
anchor: { x: 5, y: 8 }
}
}
});
</script>connectionDefaults.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", content: { text: "Start" }, x: 20, y: 20 },
{ id:"2", content: { text: "End" }, x: 200, y: 20 }
],
connections:[
{ from: "1", to: "2" }
],
connectionDefaults: {
endCap: {
type: "FilledCircle",
radius: 8
}
}
});
</script>In this article