Amplitude Web Chart Annotation Overlay

WHAT IT DOES

This userscript helps analysts and data teams annotate Amplitude charts directly on the dashboard. It scans Amplitude analytics pages for chart elements—line charts, bar charts, histograms, and other visualizations—then overlays custom annotations, markers, and trend lines using SVG. You can add text annotations at specific data points, draw vertical or horizontal reference lines, label significant events, and highlight trends. The script also includes a forecast projection feature that extends historical trends into the future. All annotations are persisted locally using GM_setValue, so they reappear when you revisit the same chart. The panel provides tools for adding, moving, and deleting annotations.

WHERE IT RUNS

The script runs on Amplitude analytics dashboard pages—any page with charts, including event segmentation, user retention, funnel analysis, and custom dashboards. It runs entirely within your browser, reading only the visible content of the current page. It does not track your browsing history, access other tabs, or send any data externally. Annotations are stored locally in your browser.

HOW TO USE

After installation, open the panel by clicking the tool's icon in the BotGentz sidebar. The script automatically detects charts on the page and sets up overlay containers. Click "Add annotation" to enter annotation mode—your cursor becomes a crosshair. Click anywhere on a chart to place a text annotation. Enter your text in the prompt and click OK. The annotation appears as a colored marker with your text label. To move an existing annotation, click and drag it to a new position. Use "Delete last" to remove the most recent annotation, or "Clear all" to remove all annotations. "Reset overlays" refreshes the overlay containers if charts load dynamically. All annotations are saved automatically and will reappear when you revisit the page.

THE TECHNICAL MECHANISM

This script uses DOM traversal to detect chart elements on Amplitude pages. It looks for canvas, SVG, and chart container elements, then creates an absolutely positioned overlay container on top of each chart using a div with SVG and a click-capture layer. When you click on a chart, the script calculates the click position relative to the chart's bounding rectangle, normalizing coordinates to percentages (0-100%) so annotations stay in the same relative position even if the chart resizes. Annotations are stored as objects with x, y, text, color, and chartId. Each annotation is rendered as an SVG circle marker with a foreignObject containing styled text. The move feature uses mousemove and mouseup events to drag annotations. Persistence is handled via GM_setValue with JSON serialization. The forecast projection feature extends the last data trend using linear regression, rendered as a dashed line.

THE PANEL

The panel is draggable anywhere on the screen and remembers its position between sessions. It can be collapsed to a small floating bubble to minimize distraction, and expanded again with a single click. The panel's width can be adjusted, and pressing the Escape key closes it instantly. All annotations are persisted locally using GM_setValue, so your work remains intact across page reloads and browser restarts.

PLEASE NOTE

This userscript requires the free BotGentz extension to function. The script is designed for Amplitude analytics dashboards; it may work on other charting libraries but is not guaranteed. The overlay relies on the chart container's position and may need adjustment if Amplitude updates its UI. Annotations are stored in your browser's local storage and are not shared with anyone. The script does not access your Amplitude account or API; it only reads what is visible on the page. No data from your browsing is transmitted anywhere—all processing occurs entirely in your browser.