Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Chart - Tooltip - Formatter
A React chart with custom tooltip formatter for value and label formatting using shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Need to add units or custom styling to tooltip values without building complex layouts? This React bar chart uses ChartTooltipContent's formatter prop with a simpler approach than advanced patterns—just format each value's display with units (kcal), custom styling, and layout control. Built with shadcn/ui and Recharts, the formatter receives value and name, returns custom JSX for each series. Add currency symbols, percentage signs, or unit labels while keeping the default tooltip structure. Perfect for dashboards needing formatted numbers (currency, percentages), metrics with units (km, hrs, GB), or custom text styling without rebuilding entire tooltip layouts.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Tooltip
Basic tooltip without formatting
Advanced Tooltip
Complex formatting with totals
Label Formatter
Format tooltip label text
Bar Chart with Labels
Labels directly on bars
Tooltip with Icons
Category icons in tooltip
Line Chart Labels
Value labels on line points