Shadcn.io is not affiliated with official shadcn/ui
Tooltip - Custom Label
A React chart tooltip with custom label using labelKey prop to override default label text with shadcn/ui and Recharts
Default tooltips show the dataKey label, but what if you need different header text? This React bar chart uses labelKey prop on ChartTooltipContent to display a custom label (Activities) instead of the default data point label. Built with shadcn/ui and Recharts, labelKey references a key in chartConfig to pull label text—perfect for grouping series under a category header or showing contextual labels different from X-axis values. The custom label appears at the top of tooltip above series entries. Perfect for categorical groupings (Total Activities instead of Monday), semantic headers (Your Performance vs date), or multilingual labels stored in config.
Tooltip - Custom Label preview
Installation
Related Components
Default Tooltip
Basic tooltip with default label
Label Formatter
Format label with function
Tooltip No Label
Tooltip without label header
Advanced Tooltip
Custom formatted tooltip
Default Bar Chart
Basic bar chart pattern
Formatted Tooltip
Custom value formatting
FAQ
Was this page helpful?
Sign in to leave feedback.