shadcn.io is not affiliated with official shadcn/ui
Area Chart With Reference Area Stats Block for Radix UI
An 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.
Installation
Overview
An area chart with a reference area for React with Radix UI. A compact header for Hushbell, on-call alerting, says how late the alerts ran ("Alerts ran up to 39 s late for 32 minutes"). Under the top rule, a band splits in two across a solid divider that starts at a + on the rule. At the start is the chart: a framed plot of alert delivery time in two-minute steps with a scale in seconds and a time under every half hour, a smooth area, and the incident drawn as a tint between two hairlines, labelled above it with a status dot, "Incident, 14:10 to 14:42". At the end are three rows: how long it lasted, the peak delay with its time, and how many alerts were sent during the window. On a phone the chart comes first and the rows follow under a rule. The window's edges, the three rows and the headline are computed from the readings and the two indices that bound the incident, so the text and the drawing can't disagree. It's built from Guides, Status and hand-drawn SVG in your theme's foreground colour, with no chart library and no amber tint over the line. For an incident review, a status page or any chart where one stretch of time matters most.
FAQ
How do I change the readings and the window?
Edit START and STEP (the first reading's time in minutes, and the minutes between readings), the DELAY and SENT lists, and FROM and TO, the readings the incident starts and ends at. The shaded band, its label, the duration, the peak, the alerts affected and the headline all follow. The scale rounds up to a multiple of fifteen seconds above the peak. Times are computed from the start, so the copy has no date.
How is the shaded window drawn?
It is a plain HTML element placed over the plot with two CSS variables, the start of the window and its width, both in percent of the plot, so it lines up with the curve at any size. It has a hairline at each edge and a faint tint, which darkens the area under it without hiding the line. The label above it is placed from the same variable. Because it is HTML, it stays crisp and the text can be selected and read.
Why does only the label have a status dot?
The block uses a status colour once, on the one thing that is an alert: the incident's label. Everything else, including the line, the tint and the three rows, is drawn in your theme's foreground colour, so the chart reads in every theme and without colour.
Is the chart accessible?
Yes. The chart is an image whose name gives its span, its normal level, the incident's window and its peak with the time. The three rows are a description list, which says the same in text, and the scale and time labels are hidden from assistive technology because the image's name and the rows carry the facts. Values are kept left to right so a right-to-left page doesn't reorder them.