Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- Badge
- BottomSheet
- Button
- Camera
- Camera Preview
- Card
- Carousel
- Checkbox
- Collapsible
- Color Picker
- Combobox
- Date Picker
- File Picker
- Gallery
- Hello Wave
- Icon
- Image
- Input
- Input OTP
- Link
- MediaPicker
- Mode Toggle
- Onboarding
- ParallaxScrollView
- Picker
- Popover
- Progress
- Radio
- ScrollView
- SearchBar
- Separator
- Share
- Sheet
- Skeleton
- Spinner
- Switch
- Table
- Tabs
- Text
- Toast
- Toggle
- Video
- View
Charts
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.
Prop | Type | Default | Description |
---|---|---|---|
data | ChartDataPoint[] | - | Array of data points to display on the chart. |
config | ChartConfig | {} | Configuration object for chart appearance. |
style | ViewStyle | - | Additional styles to apply to the chart. |
ChartDataPoint
Property | Type | Default | Description |
---|---|---|---|
label | string | - | The label for the data point. |
value | number | - | The value for the data point. |
color | string | - | Optional custom color for the slice. |
ChartConfig
Property | Type | Default | Description |
---|---|---|---|
width | number | - | Fixed width of the chart (auto-sizes if omitted). |
height | number | 200 | Height of the chart. |
showLabels | boolean | true | Whether to show percentage labels on slices. |
animated | boolean | true | Whether to animate the chart on load. |
duration | number | 1000 | Animation 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