Recharts Line with Reference Annotations
A time-series line annotated with the full Recharts reference-shape suite — `<ReferenceArea>` shades a target band across the y-axis (the 'on-target SLO band'), `<ReferenceLine>` drops a labelled vertical line at a key event date and a horizontal line at the SLO threshold, and `<
Template details
- chart
- line
- reference
- annotations
- events
- recharts
- react
When to use this template
This visualization makes it obvious how specific events, thresholds, or outlier points directly impact or relate to a time-series metric. Analysts reach for it to quickly understand the context behind metric fluctuations, enabling them to identify causal relationships or assess performance against predefined goals without needing to cross-reference external logs or reports.
- Single primary quantitative metric measured over time.
- Datasets with discrete event timestamps requiring visual markers.
- Data necessitating clear performance thresholds or target ranges.
- Time-series data where specific points are known outliers.
- Regularly sampled time-series data with consistent cadence.
- Quantitative Y-axis values for comparison against targets.