ChartAnnotation

stable

Persistent inline chart marker for agent-noted anomalies, threshold crossings, or notable observations with semantic color coding

import { ChartAnnotation } from "@nodus/design-system/patterns"

▲LCR floor

Regulatory minimum LCR — 100% hard floor, 120% internal buffer

— RegulatoryAgent

Loading demo…

Props

Prop	Type	Default	Description
`type`req	`AnnotationType`	—	anomaly \| threshold \| observation
`label`req	`string`	—	Short annotation label
`description`	`string`	—	Extended detail shown on expand
`x`	`string \| number`	—	Horizontal position (pixel or data key)
`y`	`number`	—	Vertical position in pixels from top
`lastAnalyzedAt`	`string`	—	ISO — when the agent produced this annotation. Used to derive staleness.
`stalenessThresholdMs`	`number`	3600000	Staleness threshold in ms (default 1h). Stale annotations show a gold ring.
`staleAnalysisAge`	`string`	—	Pre-formatted age override (e.g. '4h 12m') — bypasses lastAnalyzedAt calculation.

typerequired

Type AnnotationTypeDefault —

anomaly | threshold | observation

labelrequired

Type stringDefault —

Short annotation label

description

Type stringDefault —

Extended detail shown on expand

x

Type string | numberDefault —

Horizontal position (pixel or data key)

y

Type numberDefault —

Vertical position in pixels from top

lastAnalyzedAt

Type stringDefault —

ISO — when the agent produced this annotation. Used to derive staleness.

stalenessThresholdMs

Type numberDefault 3600000

Staleness threshold in ms (default 1h). Stale annotations show a gold ring.

staleAnalysisAge

Type stringDefault —

Pre-formatted age override (e.g. '4h 12m') — bypasses lastAnalyzedAt calculation.

Design Rationale

This component was designed to express:

Recharts-compatible tooltip that distinguishes user-selected vs. agent-highlighted data points with semantic color treatment

Overlay control strip for comparing two periods, entities, or scenarios with A/B labeling and delta display

Was this helpful?