strokeString|Object
Defines the stroke options of the connector.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: "Shape 1",
x: 100,
y: 100
}, {
id: "2",
content: "Shape 2",
x: 300,
y: 100
}],
connections: [{
from: "1",
to: "2"
}],
connectionDefaults: {
fromConnector: {
stroke: {
color: "navy",
width: 2,
dashType: "solid"
}
}
}
});
</script>stroke.colorString(default: "Black")
Defines the stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: "Shape 1",
x: 100,
y: 100
}, {
id: "2",
content: "Shape 2",
x: 300,
y: 100
}],
connections: [{
from: "1",
to: "2"
}],
connectionDefaults: {
fromConnector: {
stroke: {
color: "darkgreen"
}
}
}
});
</script>stroke.dashTypeString
The stroke dash type.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: "Shape 1",
x: 100,
y: 100
}, {
id: "2",
content: "Shape 2",
x: 300,
y: 100
}],
connections: [{
from: "1",
to: "2"
}],
connectionDefaults: {
fromConnector: {
stroke: {
color: "purple",
dashType: "longDash"
}
}
}
});
</script>stroke.widthNumber(default: 1)
Defines the thickness or width of the connector's stroke.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: "Shape 1",
x: 100,
y: 100
}, {
id: "2",
content: "Shape 2",
x: 300,
y: 100
}],
connections: [{
from: "1",
to: "2"
}],
connectionDefaults: {
fromConnector: {
stroke: {
color: "maroon",
width: 3
}
}
}
});
</script>In this article