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 bubble-chart
Usage
import { BubbleChart } from '@/components/charts/bubble-chart';const data = [
{ x: 10, y: 20, size: 15, label: 'A', color: '#FF6B6B' },
{ x: 25, y: 30, size: 25, label: 'B', color: '#4ECDC4' },
{ x: 40, y: 15, size: 30, label: 'C', color: '#45B7D1' },
{ x: 35, y: 45, size: 20, label: 'D', color: '#96CEB4' },
];
<BubbleChart
data={data}
config={{
height: 300,
showGrid: true,
showLabels: true,
animated: true,
}}
/>;Examples
Basic Bubble Chart
Sample Bubble Chart
Styled Bubble Chart
Minimal Bubble Chart
API Reference
BubbleChart
A customizable bubble chart component with smooth animations and interactive features.
| Prop | Type | Default | Description |
|---|---|---|---|
data | BubbleChartDataPoint[] | - | 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. |
BubbleChartDataPoint
| Property | Type | Default | Description |
|---|---|---|---|
x | number | - | The x-axis value for the data point. |
y | number | - | The y-axis value for the data point. |
size | number | - | The size value for the bubble. |
label | string | - | Optional label for the data point. |
color | string | - | Optional color for the bubble. |
ChartConfig
| Property | Type | Default | Description |
|---|---|---|---|
width | number | - | Fixed width of the chart (auto-sizes if omitted). |
height | number | 200 | Height of the chart. |
padding | number | 20 | Padding around the chart. |
showGrid | boolean | true | Whether to show grid lines. |
showLabels | boolean | true | Whether to show bubble labels. |
animated | boolean | true | Whether to animate the chart on load. |
duration | number | 800 | Animation duration in milliseconds. |
Features
- Smooth Animations: Built-in animations using React Native Reanimated
- Size Mapping: Bubble sizes automatically scaled based on data values
- Interactive Touch: Optional touch gestures for data exploration
- Responsive Design: Automatically adapts to container width
- Customizable Grid: Optional grid lines for better readability
- Color Customization: Support for custom colors or automatic color assignment
- Staggered Animation: Bubbles animate in sequence for visual appeal
- Theme Integration: Uses theme colors for consistent styling
Accessibility
The BubbleChart component is built with accessibility in mind:
- Semantic SVG structure for screen readers
- Proper contrast ratios for visual elements
- Touch targets meet minimum size requirements
- Supports dynamic text sizing
- Keyboard navigation support (when interactive)
Performance
The component is optimized for performance:
- Uses React Native Reanimated for smooth 60fps animations
- Efficient SVG rendering with minimal re-renders
- Gesture handling optimized for touch interactions
- Automatic cleanup of animation values
- Staggered animations to prevent performance bottlenecks