Bubble Chart

A customizable bubble chart component with animations and size mapping.

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.

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

Prop	Type	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

Prop	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
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:

The chart's outer container exposes accessibilityRole="image" with a synthesized summary label (bubble count and x/y ranges)

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

Bar Chart Candlestick Chart