Shadcn.io is not affiliated with official shadcn/ui
A bar chart with an active bar
A React bar chart with highlighted active bar using custom Rectangle styling and dashed stroke for emphasis using shadcn/ui and Recharts
Need to draw attention to a specific data point? This React bar chart uses activeBar and activeIndex props to highlight Firefox with a dashed stroke border and custom opacity. Built with shadcn/ui and Recharts, it renders each browser's visitors with unique colors from chartConfig while emphasizing the active bar. The Rectangle component provides full control over the highlighted bar's appearance—stroke, fill opacity, dash patterns. Perfect for presentation mode, walkthrough tutorials, or focusing user attention on key metrics in dashboards.
A bar chart with an active bar preview
Installation
Related Components
Simple Bar Chart
Basic bar chart without active state
Mixed Color Bar Chart
Each bar with different color
Multiple Bar Chart
Grouped bars for comparison
Interactive Bar Chart
Large dataset with hover interactions
Bar Chart with Negatives
Bars with conditional coloring
Line Chart with Dots
Highlighting specific data points
FAQ
Was this page helpful?
Sign in to leave feedback.