Report Annotations Panel
An annotated trend chart with numbered markers pinned to dates beside a side rail listing each annotation with author, date, note, and an add control.
An annotated trend chart with numbered markers pinned to dates beside a side rail listing each annotation with author, date, note, and an add control.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Report Annotations Panel pairs a weekly signups trend line spanning Apr 20 to Jun 8, 2026 with a side rail of four annotations. Numbered markers pin to the dates where something happened: the Product Hunt launch on May 11, a new pricing page on May 25, a homepage experiment on Jun 1, and an onboarding email revamp on Jun 8. Each marker is a dashed guide line down to the curve with a numbered dot at the top, and the same numbers head the list entries in the rail.
The chart is an inline SVG polyline with grid lines, points, and marker groups drawn from one shared array, so markers and list rows never drift out of sync. Every rail entry carries an author avatar, date, and note, an add affordance sits in the header, and the footer note that annotations are visible to everyone with access keeps the sharing model clear.
Reach for this block beside any time series a team needs to explain, wired to your metrics API and an annotations store keyed by date. The add button should open a compose form that drops a new marker at the selected point.
A natural flow around it on an Application Pro page:
Before
After
One strong use is signups with launch and pricing annotations. Other annotated series:
Tip: shared numbering between the markers and the list is what lets a reader jump from a spike to its reason.