Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Chart - Tooltip - Advanced
A React chart with advanced tooltip formatter showing custom styling, units, and calculated totals using shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Default tooltips show values, but what about units, totals, or context? This React bar chart uses ChartTooltipContent's formatter prop to customize tooltip display with units (kcal), tabular number styling, and calculated totals at the bottom. Built with shadcn/ui and Recharts, the formatter function receives value, name, item, and index—letting you render custom JSX for each series. Add borders for totals, inject units, style with monospace fonts—complete control over tooltip appearance. Perfect for financial dashboards (currency symbols), fitness apps (unit labels), or analytics showing derived metrics alongside raw values.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Tooltip
Basic tooltip without customization
Tooltip with Formatter
Simpler custom formatting
Horizontal Bar Chart
Bar chart with different orientation
Label Formatter
Format tooltip labels
Line Chart with Dots
Line chart with hover points
Stacked Area Chart
Multiple series with totals