Bar chart
Interactive Highlight Chart
Bar chart component with active bar highlighting and custom styling. Built for React applications requiring interactive bar emphasis with Next.js and TypeScript.
Powered by
Installation
npx shadcn@latest add https://www.shadcn.io/registry/bar-chart-09.jsonnpx shadcn@latest add https://www.shadcn.io/registry/bar-chart-09.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/bar-chart-09.jsonbunx shadcn@latest add https://www.shadcn.io/registry/bar-chart-09.jsonFeatures
- Active bar highlighting with custom Rectangle component for enhanced visibility
- Dashed stroke animation using strokeDasharray and strokeDashoffset for dynamic effects
- Reduced opacity (0.8) on active bar for subtle visual distinction
- Custom activeBar component with configurable styling and animation properties
- TypeScript support with complete type definitions for active bar interactions
- shadcn/ui integration using Chart components with active state styling
Use Cases
This free open source React component works well for:
- Interactive dashboards - Applications requiring user attention on specific data points built with Next.js
- Data exploration - Charts where highlighting specific values enhances analysis using TypeScript and Tailwind CSS
- Presentation mode - Visualizations needing emphasis on particular data segments
- Educational tools - Charts requiring focus on specific examples or outliers
API Reference
ChartBarActive
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the container |
Active Bar Configuration
Bar component with active highlighting:
<Bar
dataKey="visitors"
strokeWidth={2}
radius={8}
activeIndex={2}
activeBar={({ ...props }) => {
return (
<Rectangle
{...props}
fillOpacity={0.8}
stroke={props.payload.fill}
strokeDasharray={4}
strokeDashoffset={4}
/>
)
}}
/>Active Bar Properties
- activeIndex:
2- Third bar (Firefox) is highlighted - fillOpacity:
0.8- Slightly transparent for visual distinction - strokeDasharray:
4- Creates dashed stroke pattern - strokeDashoffset:
4- Animates the dashed stroke - stroke: Uses the bar's fill color for consistency
Data Structure
Multi-category data with individual fill colors:
const chartData = [
{ browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
{ browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
]Implementation Notes
- Active bar is defined at index 2 (Firefox bar in the example)
- Custom Rectangle component provides fine-grained control over active styling
- Stroke color matches the bar's fill color for visual consistency
- Dashed animation creates subtle movement effect
- strokeWidth of 2 provides visible but not overwhelming border
- Perfect for applications requiring user attention on specific data points with sophisticated visual feedback
Multi-Color Bar Chart
Mixed bar chart component with horizontal multi-color bars. Built for React applications requiring categorical data visualization with Next.js and TypeScript.
Positive/Negative Bar Chart
Bar chart component with negative values and conditional coloring. Built for React applications requiring positive/negative data visualization with Next.js and TypeScript.