shapeDefaults.connectorsArray
Defines the connectors the shape owns. A connector is the point in the shape where a connection between this shape and another one can originate from or end.
- "top" - top connector.
- "right" - right connector.
- "bottom" - bottom connector.
- "bottomRight" - bottom right connector.
- "left" - left connector.
- "auto" - auto connector.
You can define your own custom connectors or use the predefined types.
Example - including only some connectors and customize their look
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: [
{
name: "top",
width: 15,
height: 15,
fill: {
color: "green",
opacity: 0.7
},
hover: {
fill: {
color: "lightblue"
},
stroke: {
color: "gray",
dashType: "dot"
}
},
stroke: {
width: 2,
color: "white",
dashType: "solid"
}
},
{
name: "bottom"
}]
},
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",
fromConnector: "top",
toConnector: "top"
},{
from: "2",
to: "3",
fromConnector: "bottom",
toConnector: "top"
}],
connectionDefaults: {
endCap: "ArrowEnd"
}
});
</script>The following example demonstrates how to define a custom shape with connectors adapted to the outline of the shape. You can see how the shape bounds are accessed and used to determine the position of the connectors.
Example - creating a custom shape with custom connectors
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
dataSource: [{name: "item1"}],
shapeDefaults: {
path: "m1,53.69333l17.5647,-17.56445l0,8.78235l23.15292,0l0,-26.34678l-8.78181,0l17.56417,-17.56444l17.5647,17.56444l-8.78238,0l0,26.34678l23.15297,0l0,-8.78235l17.56473,17.56445l-17.56473,17.56466l0,-8.78231l-63.87057,0l0,8.78231l-17.5647,-17.56466l0,0z",
connectors: [{
name: "Upstream",
position: function(shape) {
return shape._transformPoint(shape.bounds().top());
}
}, {
name: "SideLeft",
position: function(shape) {
var p = shape.bounds().left();
return shape._transformPoint(new kendo.dataviz.diagram.Point(p.x, p.y + 17));
}
}, {
name: "SideRight",
position: function(shape) {
var p = shape.bounds().right();
return shape._transformPoint(new kendo.dataviz.diagram.Point(p.x, p.y + 17));
}
}]
}
});
</script>shapeDefaults.connectors.nameString
The connector name. The name is referenced when specifying explicit fromConnector and toConnector values in a connection.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Shape with Named Connectors"
},
x: 100,
y: 100
},
{
id: "2",
content: {
text: "Target Shape"
},
x: 300,
y: 100
}
],
shapeDefaults: {
connectors: [
{
name: "topConnector",
position: function(shape) {
return shape._transformedBounds().top();
}
}
]
},
connections: [
{
from: "1",
to: "2",
fromConnector: "topConnector"
}
]
});
</script>shapeDefaults.connectors.positionFunction
The function that positions the connector. The function is passed a shape and should return kendo.dataviz.diagram. As a result, a point that holds the connector position appears.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
position: function(shape) {
// Position connector at the center of the shape
return new kendo.dataviz.diagram.Point(shape.x + shape.width/2, shape.y + shape.height/2);
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.widthNumber(default: 8)
Defines the width of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
width: 12
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.heightNumber(default: 8)
Defines the height of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
height: 12
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hoverObject
Defines the hover configuration of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
fill: {
color: "lightblue"
},
stroke: {
color: "blue",
width: 2
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.fillString|Object
Defines the hover fill options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
fill: "lightgreen"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.fill.colorString
Defines the hover fill color of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
fill: {
color: "orange"
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.fill.opacityNumber(default: 1)
Defines the hover fill opacity of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
fill: {
color: "red",
opacity: 0.5
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.strokeString|Object
Defines the hover stroke options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
stroke: {
color: "purple",
width: 3,
dashType: "dot"
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.stroke.colorString(default: "Black")
Defines the hover stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
stroke: {
color: "navy"
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.stroke.dashTypeString
The hover 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({
shapeDefaults: {
connectors: {
hover: {
stroke: {
color: "red",
dashType: "dash"
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.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: {
connectors: {
hover: {
stroke: {
color: "blue",
width: 4
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.fillString|Object
Defines the fill options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
fill: {
color: "lightblue",
opacity: 0.8
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.fill.colorString
Defines the fill color of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
fill: {
color: "yellow"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.fill.opacityNumber(default: 1)
Defines the fill opacity of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
fill: {
color: "green",
opacity: 0.6
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.strokeString|Object
Defines the stroke options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
stroke: {
color: "red",
width: 2,
dashType: "dot"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.stroke.colorString(default: "Black")
Defines the stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
stroke: {
color: "magenta"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.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: {
connectors: {
stroke: {
color: "blue",
dashType: "dash"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.stroke.widthNumber(default: 1)
Defines the thickness or width of the shape connectors stroke.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
stroke: {
color: "blue",
width: 3
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.offsetNumber(default: 10)
Defines the offset applied to the connector position. The offset pushes the connector away from the shape edge by the specified number of pixels in the direction appropriate for the connector's position (e.g., upward for "top", downward for "bottom", etc.).
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: [{
name: "top",
offset: 20
}, {
name: "bottom",
offset: 15
}, {
name: "left",
offset: 10
}, {
name: "right",
offset: 10
}]
},
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", fromConnector: "right", toConnector: "left" }
],
connectionDefaults: {
endCap: "ArrowEnd"
}
});
</script>