Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Chart - Tooltip - No Indicator
A React chart tooltip without color indicators using hideIndicator prop with shadcn/ui and Recharts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Color indicators help, but sometimes they're redundant clutter. This React bar chart uses hideIndicator prop on ChartTooltipContent to remove the colored dots or lines next to series names, creating a cleaner minimal tooltip focused purely on labels and values. Built with shadcn/ui and Recharts, removing indicators works when chart elements are already clearly color-coded, when tooltip space is extremely limited, or when minimalist aesthetics matter more than redundant color cues. Perfect for single-series charts, extremely compact mobile views, print-friendly charts, or design-forward dashboards prioritizing clean aesthetics.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Tooltip
Tooltip with dot indicators
Line Indicator Tooltip
Tooltip with line indicators
Tooltip No Label
Tooltip without date label
Default Bar Chart
Basic bar chart pattern
Formatted Tooltip
Custom value formatting
Line Chart
Line chart with tooltip