dygraphs
dygraphs copied to clipboard
Published
20 hours ago •
danvk
danvk
Legend for hovered points is persistent in shadow DOM
If Dygraph is placed into the shadow DOM, as in this example:
<html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
window.addEventListener("load", function() {
var containerDiv = document.getElementById("container");
var container = containerDiv.attachShadow({ mode: "open" });
var graph = document.createElement("div");
graph.id = "graph";
container.appendChild(graph);
var data = [[1, 1], [2, 2]];
new Dygraph(container.querySelector("#graph"), data);
});
</script>
</body>
</html>
and user hovers a point in the chart, the legend with a point value is shown correctly, however it is not hidden when mouse goes out of the chart. (Tested with Dygraphs 2.1.0 in the latest Chrome - a browser with the shadow DOM support is needed.)
The same chart without the shadow DOM works as expected:
<html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
window.addEventListener("load", function() {
var container = document.getElementById("container");
var graph = document.createElement("div");
graph.id = "graph";
container.appendChild(graph);
var data = [[1, 1], [2, 2]];
new Dygraph(container.querySelector("#graph"), data);
});
</script>
</body>
</html>
The problem is not limited to the mouseout event as described in this StackOverflow question. There is a workaround suggested there - to set a custom interaction model - which can be used also in the case of the persistent legend.
