Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Chart - Tooltip - Custom Label
A React chart tooltip with custom label using labelKey prop to override default label text with shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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