shapeDefaults.connectorDefaultsObject
Defines the default options for the shape connectors.
Example - customizing the Diagram shape connectors
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
width: 10,
height: 10,
fill: {
color: "green",
opacity: 0.7
},
hover: {
fill: {
color: "lightblue"
},
stroke: {
color: "yellow",
dashType: "dot"
}
},
stroke: {
width: 2,
color: "yellow",
dashType: "solid"
}
}
},
shapes: [{
id: "1",
content: {
text: "Monday"
},
x: 100,
y: 20
}, {
id: "2",
content: {
text: "Tuesday"
},
x: 250,
y: 20
}, {
id: "3",
content: {
text: "Wednesday"
},
x: 250,
y: 200
}],
connections: [{
from: "1",
to: "2"
},{
from: "2",
to: "3"
}],
connectionDefaults: {
endCap: "ArrowEnd"
}
});
</script>shapeDefaults.connectorDefaults.widthNumber(default: 8)
Defines the width of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
width: 12
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectorDefaults.heightNumber(default: 8)
Defines the height of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
height: 15
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectorDefaults.hoverObject
Defines the hover configuration of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
hover: {
fill: {
color: "lightcyan",
opacity: 0.7
},
stroke: {
color: "teal",
width: 2
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectorDefaults.hover.fillString|Object
Defines the hover fill options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
hover: {
fill: "lightpink"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectorDefaults.hover.fill.colorString
Defines the hover fill color of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
hover: {
fill: {
color: "coral"
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectorDefaults.hover.fill.opacityNumber(default: 1)
Defines the hover fill opacity of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
hover: {
fill: {
opacity: 0.8
}
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.hover.strokeString|Object
Defines the hover stroke options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
hover: {
stroke: {
color: "#0066cc",
width: 3
}
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.hover.stroke.colorString(default: "Black")
Defines the hover stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
hover: {
stroke: {
color: "#ff6600"
}
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.hover.stroke.dashTypeString
The dash type of the hover stroke.
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: {
connectorDefaults: {
hover: {
stroke: {
dashType: "dash",
color: "#0066cc"
}
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.hover.stroke.widthNumber(default: 1)
Defines the thickness or width of the shape connectors stroke on hover.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
hover: {
stroke: {
width: 4,
color: "#0066cc"
}
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.fillString|Object
Defines the fill options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
fill: {
color: "#ff6600",
opacity: 0.8
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.fill.colorString
Defines the fill color of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
fill: {
color: "#00cc66"
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.fill.opacityNumber(default: 1)
Defines the fill opacity of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
fill: {
color: "#00cc66",
opacity: 0.6
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.strokeString|Object
Defines the stroke options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
stroke: {
color: "#cc0000",
width: 2,
dashType: "dot"
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.stroke.colorString(default: "Black")
Defines the stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
stroke: {
color: "#9900cc"
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.stroke.dashTypeString
Defines 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 long dashes
- "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({
shapeDefaults: {
connectorDefaults: {
stroke: {
dashType: "longDash",
color: "#9900cc"
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>shapeDefaults.connectorDefaults.stroke.widthNumber(default: 1)
Defines the thickness or width of the shape connectors stroke.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectorDefaults: {
stroke: {
width: 3,
color: "#9900cc"
}
}
},
shapes: [{
id: "1",
content: { text: "Monday" },
x: 100,
y: 20
}],
connections: [{
from: "1"
}]
});
</script>In this article