Installation

pnpmnpmyarnbun
pnpm dlx bna-ui add doughnut-chart
Copy

Usage

Copyimport { DoughnutChart } from '@/components/charts/doughnut-chart';

Copyconst data = [
  { label: 'Sales', value: 120 },
  { label: 'Marketing', value: 98 },
  { label: 'Support', value: 86 },
  { label: 'Development', value: 140 },
];
 
<DoughnutChart
  data={data}
  config={{
    height: 300,
    showLabels: true,
    animated: true,
    innerRadius: 0.6,
  }}
/>;

Examples

API Reference

DoughnutChart

A customizable doughnut chart component with smooth animations, interactive legends, and flexible styling. Perfect for displaying proportional data with emphasis on part-to-whole relationships.

ChartDataPoint

ChartConfig

Features

• Circular Layout: Displays data as slices of a circle for intuitive proportion visualization
• Smooth Animations: Built-in animations using React Native Reanimated
• Responsive Design: Automatically adapts to container width
• Interactive Legend: Built-in legend with color indicators and values
• Custom Colors: Support for individual slice colors
• Percentage Labels: Shows percentage values on chart slices
• Theme Integration: Uses theme colors for consistent styling
• Configurable Inner Radius: Adjustable doughnut thickness

Use Cases

Doughnut charts are particularly effective for:

• Part-to-Whole Relationships: Showing how individual parts contribute to a total
• Market Share Analysis: Displaying market distribution across competitors
• Budget Breakdown: Visualizing spending allocation across categories
• Survey Results: Showing response distributions with clear proportions
• Resource Allocation: Displaying time, money, or resource distribution
• Performance Metrics: Showing completion rates or achievement percentages

Design Considerations

The circular layout of the DoughnutChart makes it ideal for:

• Proportional Data: Perfect for showing percentages and ratios
• Limited Categories: Works best with 3-8 categories for clarity
• Space Efficiency: Compact design that fits well in dashboards
• Visual Impact: Immediately conveys relative sizes and proportions

Accessibility

The DoughnutChart component includes several accessibility features:

• Semantic SVG structure for screen readers
• Proper contrast ratios for visual elements
• Text labels with percentage values
• Interactive legend for detailed information
• Color-blind friendly default palette
• Keyboard navigation support

Performance

The component is optimized for performance:

• Uses React Native Reanimated for smooth 60fps animations
• Efficient SVG rendering with minimal re-renders
• Automatic cleanup of animation values
• Responsive layout calculations
• Optimized path calculations for smooth arcs

Styling

The component integrates with your theme system:

• Uses theme colors (primary, blue, green, etc.) for default slice colors
• Uses mutedForeground color for labels and legend text
• Supports custom colors per data point
• Automatic color cycling for consistent appearance
• Customizable container styling

Animation

The chart features smooth entry animations:

• Slices animate with fade-in effect
• Configurable animation duration
• Can be disabled for instant rendering
• Uses React Native Reanimated for optimal performance
• Smooth transitions maintain visual continuity

Legend

The built-in legend provides:

• Color-coded indicators for each slice
• Category labels with actual values
• Automatic layout below the chart
• Consistent styling with theme colors
• Compact design that doesn't overwhelm the chart