diff --git a/examples/mouse-in-iframe/iframe.html b/examples/mouse-in-iframe/iframe.html
new file mode 100644
index 0000000..acc7b55
--- /dev/null
+++ b/examples/mouse-in-iframe/iframe.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Frame
+
+
+
+
+
+
diff --git a/examples/mouse-in-iframe/index.html b/examples/mouse-in-iframe/index.html
new file mode 100644
index 0000000..bc2df76
--- /dev/null
+++ b/examples/mouse-in-iframe/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+ Mouse effects in iFrame
+
+
+ Mouse effects in iFrame
+
+
+
+
diff --git a/examples/mouse-in-iframe/mouse-in-iframe.ts b/examples/mouse-in-iframe/mouse-in-iframe.ts
new file mode 100644
index 0000000..c70f194
--- /dev/null
+++ b/examples/mouse-in-iframe/mouse-in-iframe.ts
@@ -0,0 +1,53 @@
+import {
+ TimeLine,
+ Point,
+ doubleClickCopyPlugin,
+ pointerCrosshairPlugin,
+ highlightNearestPointPlugin,
+ nearestPointInfoPopupPlugin,
+} from "../../src";
+
+const data: Point[] = [];
+const maxPoints = 300;
+const chart = new TimeLine({
+ container: document.getElementById("chart-container") as HTMLElement,
+ data,
+ maxPoints,
+ // Note that these aren't used by the chart itself, they're just used by plugins
+ xLabel: "Time",
+ yLabel: "Random numbers",
+ plugins: [
+ doubleClickCopyPlugin(),
+ pointerCrosshairPlugin(),
+ highlightNearestPointPlugin(),
+ nearestPointInfoPopupPlugin(),
+ ],
+});
+
+let prev = 0;
+setInterval(() => {
+ const y =
+ prev + Math.floor(Math.random() * 10) * (Math.random() > 0.5 ? -1 : 1);
+ prev = y;
+ data.push({
+ x: Date.now(),
+ y,
+ });
+ // This is very important!
+ // You can't have more points in the data array
+ // than chart.maxPoints, or you'll have weird
+ // rendering issues.
+ while (data.length > maxPoints) {
+ data.shift();
+ }
+
+ // Call chart.recompute() when you're done updating `data`
+ chart.recompute();
+}, 50);
+
+// Note that you need to call chart.draw() yourself
+function renderLoop() {
+ requestAnimationFrame(renderLoop);
+ chart.draw();
+}
+renderLoop();