Pie Chart

A customizable pie chart component with smooth animations and flexible styling.

Installation

pnpm dlx bna-ui add pie-chart

Usage

import { PieChart } from '@/components/charts/pie-chart';
const data = [
  { label: 'Sales', value: 120 },
  { label: 'Marketing', value: 98 },
  { label: 'Support', value: 86 },
  { label: 'Development', value: 140 },
];
 
<PieChart
  data={data}
  config={{
    height: 200,
    showLabels: true,
    animated: true,
  }}
/>;

Examples

Basic Pie Chart

Sample Pie Chart

Styled Pie Chart

Large Pie Chart

API Reference

PieChart

A customizable pie chart component with smooth animations and flexible styling. Perfect for displaying proportional data with emphasis on parts of a whole.

PropTypeDefaultDescription
dataChartDataPoint[]-Array of data points to display on the chart.
configChartConfig{}Configuration object for chart appearance.
styleViewStyle-Additional styles to apply to the chart.

ChartDataPoint

PropertyTypeDefaultDescription
labelstring-The label for the data point.
valuenumber-The value for the data point.
colorstring-Optional custom color for the slice.

ChartConfig

PropertyTypeDefaultDescription
widthnumber-Fixed width of the chart (auto-sizes if omitted).
heightnumber200Height of the chart.
showLabelsbooleantrueWhether to show percentage labels on slices.
animatedbooleantrueWhether to animate the chart on load.
durationnumber1000Animation duration in milliseconds.

Features

  • Circular Layout: Displays data as slices of a circle for proportional visualization
  • Smooth Animations: Built-in animations using React Native Reanimated
  • Responsive Design: Automatically adapts to container width
  • Custom Colors: Support for individual slice colors
  • Percentage Labels: Shows percentage values on each slice
  • Legend Display: Displays legend with colors and values below the chart
  • Theme Integration: Uses theme colors for consistent styling
  • Auto-sizing: Automatically calculates optimal size based on container

Use Cases

Pie charts are particularly effective for:

  • Market Share: Displaying market share distribution
  • Budget Breakdown: Showing expense categories as percentages
  • Survey Results: Visualizing response distributions
  • Demographics: Displaying population segments
  • Resource Allocation: Showing how resources are distributed
  • Progress Tracking: Displaying completion vs remaining work

Design Considerations

The circular layout of the PieChart makes it ideal for:

  • Proportional Data: Best for showing parts of a whole
  • Limited Categories: Works best with 2-8 categories
  • Percentage Focus: Emphasizes relative proportions over absolute values
  • Quick Comparison: Easy to see largest and smallest segments

Accessibility

The PieChart component includes several accessibility features:

  • Semantic SVG structure for screen readers
  • Proper contrast ratios for visual elements
  • Text labels for both percentages and categories
  • Legend with colors and values
  • 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

Styling

The component integrates with your theme system:

  • Uses theme colors (primary, blue, green, orange, purple, pink) for default slice colors
  • Uses white text for percentage labels on slices
  • Supports custom colors per data point
  • Consistent legend styling with theme colors

Animation

The chart features smooth entry animations:

  • Slices animate with opacity fade-in effect
  • Configurable animation duration
  • Can be disabled for instant rendering
  • Uses React Native Reanimated for optimal performance

Mathematical Calculations

The component automatically handles:

  • Percentage Calculations: Converts values to percentages
  • Angle Calculations: Converts percentages to slice angles
  • Arc Path Generation: Creates proper SVG arc paths
  • Label Positioning: Calculates optimal label positions within slices
  • Legend Generation: Creates legend items with colors and values

Best Practices

When using pie charts:

  • Limit Categories: Keep to 2-8 categories for clarity
  • Order by Size: Consider ordering slices by size for better readability
  • Use Contrasting Colors: Ensure sufficient contrast between adjacent slices
  • Provide Legend: Always include a legend for color identification
  • Consider Alternatives: For many categories, consider using a bar chart instead