Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React 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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React A step area chart
A React step area chart with stair-step interpolation for visualizing discrete state changes and constant values using shadcn/ui and Recharts
React A bar chart
A simple React bar chart with rounded corners for comparing discrete values across categories using shadcn/ui and Recharts