ChartTooltip

stable

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

datavizInteractive/Storybook ↗

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

Loading demo…

Props

Prop	Type	Default	Description
`fields`req	`TooltipField[]`	—	Data fields to display in tooltip
`source`	`TooltipSource`	"user"	user \| agent — drives header color and label
`title`	`string`	—	Tooltip header line
`timestamp`	`string`	—	Timestamp label for the hovered point
`staleAnalysisAge`	`string`	—	When source=agent, shows a gold stale warning row (e.g. '4h 12m'). Does not affect data display.

fieldsrequired

Type TooltipField[]Default —

Data fields to display in tooltip

source

Type TooltipSourceDefault "user"

user | agent — drives header color and label

title

Type stringDefault —

Tooltip header line

timestamp

Type stringDefault —

Timestamp label for the hovered point

staleAnalysisAge

Type stringDefault —

When source=agent, shows a gold stale warning row (e.g. '4h 12m'). Does not affect data display.

Metadatasemantic type border motion viz

Design Rationale

This component was designed to express:

View all principles →

Explore Related

ChartAnnotation→

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

ChartComparisonBar→

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

Was this helpful?