connectorDefaults.hoverObject
Defines the hover configuration of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Hover Connectors"
},
connectorDefaults: {
hover: {
fill: {
color: "yellow"
},
stroke: {
color: "red",
width: 2
}
}
}
}]
});
</script>connectorDefaults.hover.fillString|Object
Defines the hover fill options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Connector Fill Hover"
},
connectorDefaults: {
hover: {
fill: {
color: "orange",
opacity: 0.7
}
}
}
}]
});
</script>connectorDefaults.hover.fill.colorString
Defines the hover fill color of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Hover Fill Color"
},
connectorDefaults: {
hover: {
fill: {
color: "cyan"
}
}
}
}]
});
</script>connectorDefaults.hover.fill.opacityNumber(default: 1)
Defines the hover fill opacity of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Hover Fill Opacity"
},
connectorDefaults: {
hover: {
fill: {
color: "purple",
opacity: 0.4
}
}
}
}]
});
</script>connectorDefaults.hover.strokeString|Object
Defines the hover stroke options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Hover Stroke"
},
connectorDefaults: {
hover: {
stroke: {
color: "red",
width: 3,
dashType: "dash"
}
}
}
}]
});
</script>connectorDefaults.hover.stroke.colorString(default: "Black")
Defines the hover stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Hover Stroke Color"
},
connectorDefaults: {
hover: {
stroke: {
color: "magenta"
}
}
}
}]
});
</script>connectorDefaults.hover.stroke.dashTypeString
The hover stroke dash type.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Hover Dash Type"
},
connectorDefaults: {
hover: {
stroke: {
color: "green",
dashType: "dot"
}
}
}
}]
});
</script>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({
shapes: [{
id: "1",
content: {
text: "Hover Stroke Width"
},
connectorDefaults: {
hover: {
stroke: {
color: "blue",
width: 4
}
}
}
}]
});
</script>In this article