hoverObject
Defines the hover configuration.
Example - customizing the shape hovered look
<div id="diagram"></div>
<script>
var Shape = kendo.dataviz.diagram.Shape;
$("#diagram").kendoDiagram();
var diagram = $("#diagram").data("kendoDiagram");
var shape = new Shape({
id: 1,
x: 20,
y: 20,
fill: "#c0f0fc",
hover: {
fill: {
color: "#c0f08c"
}
}
});
diagram.addShape(shape);
</script>hover.fillString|Object
Defines the hover fill options of the shape.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Hover over me"
},
hover: {
fill: {
color: "yellow",
opacity: 0.8
}
}
}]
});
</script>hover.fill.colorString
Defines the hover fill color of the shape.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Hover changes color"
},
fill: {
color: "blue"
},
hover: {
fill: {
color: "red"
}
}
}]
});
</script>hover.fill.opacityNumber(default: 1)
Defines the hover fill opacity of the shape.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Hover changes opacity"
},
fill: {
color: "green",
opacity: 1
},
hover: {
fill: {
color: "green",
opacity: 0.3
}
}
}]
});
</script>In this article