shapeDefaults.hoverObject
Defines the hover configuration.
Example - changing the shapes default color on hover
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
layout: "tree",
shapeDefaults: {
hover: {
fill: {
color: "pink"
}
}
},
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.hover.fillString|Object
Defines the hover fill options.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
hover: {
fill: {
color: "#ffcc00",
opacity: 0.8
}
}
},
shapes: [{
id: "1",
content: { text: "Hover Me" },
x: 100,
y: 20
}]
});
</script>shapeDefaults.hover.fill.colorString
Defines the hover fill color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
hover: {
fill: {
color: "#ff9900"
}
}
},
shapes: [{
id: "1",
content: { text: "Hover for Orange" },
x: 100,
y: 20
}]
});
</script>shapeDefaults.hover.fill.opacityNumber(default: 1)
Defines the hover fill opacity.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
hover: {
fill: {
color: "#ff6600",
opacity: 0.7
}
}
},
shapes: [{
id: "1",
content: { text: "Hover for Transparency" },
x: 100,
y: 20
}]
});
</script>In this article