hoverObject
Defines the hover configuration.
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: {
hover: {
fill: {
color: "red",
opacity: 0.8
},
stroke: {
color: "blue",
width: 2
}
}
}
}
});
</script>hover.fillString|Object
Defines the hover fill 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: {
hover: {
fill: {
color: "orange",
opacity: 0.7
}
}
}
}
});
</script>hover.fill.colorString
Defines the hover fill color 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: {
hover: {
fill: {
color: "purple"
}
}
}
}
});
</script>hover.fill.opacityNumber(default: 1)
Defines the hover fill opacity 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: {
hover: {
fill: {
color: "green",
opacity: 0.5
}
}
}
}
});
</script>hover.strokeString|Object
Defines the hover 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: {
hover: {
stroke: {
color: "red",
width: 3,
dashType: "dash"
}
}
}
}
});
</script>hover.stroke.colorString(default: "Black")
Defines the hover 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: {
hover: {
stroke: {
color: "crimson"
}
}
}
}
});
</script>hover.stroke.dashTypeString
The hover stroke dash type.
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: {
hover: {
stroke: {
color: "blue",
dashType: "dashDot"
}
}
}
}
});
</script>hover.stroke.widthNumber(default: 1)
Defines the thickness or width of the connector's stroke on hover.
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: {
hover: {
stroke: {
color: "orange",
width: 4
}
}
}
}
});
</script>In this article