Tooltips
Compose visx tooltip helpers with theme-colored indicators, labels, formatters, and icons.
Tooltips are not a separate @viraui/charts component — you compose useTooltip / TooltipWithBounds with your own body. Each example uses a different Health / Fitness host chart so the tooltip pattern stays clear without repeating the same bars.
Common examples
Line indicator
Weekly Activity stacks (Move + Exercise). Tall color swatches beside each series row.
No indicator
Heart Rate line — date title and bpm value, no swatch column.
Custom title
Sleep indigo area with a fixed Sleep title row.
Long date title
Steps cyan line — long-form date in the title row.
No title
Active Energy yellow area — body row only, no title.
Formatter
Walk distance magenta line — append a km unit beside the value.
Icons
Workout mix pie — series icons instead of color swatches.
Advanced
Macro stacked area (protein / carbs / fat) painted with literal --color-*-30 fills, gram formatter, and a total row.
Ask your agent
Add a hover tooltip to this stacked activity chart that shows Move and Exercise with tall color swatches.Last updated on