shapeDefaults.strokeObject
Defines the configuration of the border around Diagram shapes.
Example - applying a custom border around shapes
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
layout: "layered",
shapeDefaults: {
stroke: {
color: "rgb(92, 229, 0)",
dashType: "dashDot",
width: 3
}
},
shapes: [{
id: "1",
content: {
text: "Monday"
}
}, {
id: "2",
content: {
text: "Tuesday"
}
}, {
id: "3",
content: {
text: "Wednesday"
}
}],
connections: [{
from: "1",
to: "2"
},{
from: "2",
to: "3"
}],
connectionDefaults: {
endCap: "ArrowEnd"
}
});
</script>shapeDefaults.stroke.colorString(default: "Black")
Defines the color of the shape stroke.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
stroke: {
color: "#0066cc",
width: 3
}
},
shapes: [{
id: "1",
content: { text: "Blue Stroke" },
x: 100,
y: 20
}]
});
</script>shapeDefaults.stroke.dashTypeString
The dash type of the shape.
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({
shapeDefaults: {
stroke: {
dashType: "longDashDot",
color: "#cc6600"
}
},
shapes: [{
id: "1",
content: { text: "Dashed Border" },
x: 100,
y: 20
}]
});
</script>shapeDefaults.stroke.widthNumber(default: 1)
Defines the thickness or width of the shape stroke.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
stroke: {
width: 5,
color: "#cc0066"
}
},
shapes: [{
id: "1",
content: { text: "Thick Border" },
x: 100,
y: 20
}]
});
</script>