shadcn.io is not affiliated with official shadcn/ui
Annotated Area Chart Stats Block for React
A framed area chart of checkout latency with three numbered pins, two deploys and an incident, tied to an ordered list of notes under it; hovering or focusing either one lights the other.
Installation
Overview
An annotated area chart for React with Base UI. A start-aligned header for Shiplog, release tracking, states what the first deploy did to the line ("One deploy cut checkout latency by 28%"). Under it, a framed chart (a hairline frame with + marks on its corners) draws fifteen hourly readings of checkout latency over a smooth area, with a scale in milliseconds and a time under every second hour. Three numbered pins stand in a row above the plot, each on a hairline stem that comes down to a dot on the curve: two deploys as rounded squares and one incident as a circle. Under the frame the same three events are an ordered list in cells set apart with overshooting lines: the time, what happened, and what it did to the line (p95 163 → 118 ms, −28%). Hovering, focusing or tapping a pin lights its cell and its stem, and a cell lights its pin; a tap holds the pair. Every effect is computed from the readings either side of the event, so the notes and the drawing can't disagree. It's built from Guides and hand-drawn SVG in your theme's foreground colour, with no chart library, no colour for good or bad and no tooltip you can't also read as text. For a release, incident or deployment dashboard section.
FAQ
How do I change the readings and the events?
Edit P95 (one reading per hour from FIRST_HOUR) and SOURCES at the top of the file: each event is the index of the reading it happened at, its kind (deploy or incident) and its title. The pin, its stem, the dot on the curve, the time, the note and the headline's percentage are all computed from those, and the scale rounds up to the next hundred above the highest reading. Add an entry and a fourth pin and cell appear; the list has three columns from md, so keep it to three or two rows of three.
How do the pins and the list light each other?
Both are real buttons that share one piece of state. Hovering or focusing either one previews the pair; clicking or tapping holds it (the buttons report aria-pressed), which is how touch screens reach it. The lit pin turns solid, its stem and dot darken, and its cell takes a muted fill. The cell's button stretches over the whole cell, so hovering anywhere on it counts.
Why are the pins above the plot instead of on the line?
The incident is the highest point of the line, and a pin sitting on it would hide the peak. The pins stand in their own row and a hairline stem carries each one down to a small dot on the curve, so the line stays whole. Deploys are rounded squares and the incident is a circle, so the kinds differ by shape, not by colour.
Is the chart accessible?
The chart is an image whose name gives its span, its first and last readings, its peak and the three events by number, title and time. The events are also a real ordered list with a heading level per event, and each pin is a named button ("2: Database pool saturated, 17:00"). The scale and the time labels are hidden from assistive technology because the image's name and the notes carry the same facts. Focus rings are visible on the pins and on the cells.
Why is the incident not red?
The block shows the incident with a different shape and the numbers in the note, in the text colour, so it reads in every theme and without colour. If your own events need an alarm, give the one cell a status icon rather than tinting the chart.
What moves, and how does it fit on a phone?
The header, the frame and the notes fade up once on load, and the area fades in; hover changes are 150 millisecond colour transitions. With reduced motion all of it is off. On a phone the chart becomes a 4:3 box with a label under every fourth hour, and the notes stack one per row under it. Nothing scrolls sideways at 320 pixels.
Related
- Pro
Area Chart With Reference Area Stats
Area and lineAn area chart of alert delivery time with the incident drawn as a shaded window between two hairlines, and three rows beside it: how long it lasted, the peak delay and the alerts it touched.
- Pro
Area Chart Hero Stats
Area and lineA rail-to-rail area chart for a farm-shop sales tool: twelve months of sales fading out toward the foot, with the latest month's figure and its change laid over the top corner.
- Pro
Line Chart With Threshold Stats
Area and lineA latency line against its 300 ms SLO for an API monitor: the stretches over the threshold are drawn thicker with ringed points, and a rail repeats the breaches, the time over and the worst reading in text.
- Pro
A deployment timeline in a split: the run's facts at the start, and eight steps at the end, each with its start time, how long it took and a duration bar on one shared scale.
- Pro
Gradient Fill Area Chart Stats
Area and lineA cumulative earnings curve in a card in card, filled with the text colour fading in four stops, with dots on the curve where it crossed $10K, $50K and $100K.
- Pro
Annotated Mockup Pin Tooltips Features
App screensA shipping-ops console drawn in greyscale with six numbered pins that open a popover on click, tap or Enter, and a legend of six rows in shared hairlines that opens the same popovers.