BNA

BNA UI
170

Polar Area Chart

PreviousNext

A customizable polar area chart component with smooth animations and flexible styling for displaying radial data.

Installation

pnpm dlx bna-ui add polar-area-chart

Usage

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

Examples

Basic Polar Area Chart

Sample Polar Area Chart

Styled Polar Area Chart

Large Polar Area Chart

API Reference

PolarAreaChart

A customizable polar area chart component with smooth animations and flexible styling. Perfect for displaying multivariate data in a radial format, where each segment represents a different category with varying magnitudes.

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 segment.

ChartConfig

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

Features

  • Radial Layout: Displays data segments in a circular pattern radiating from center
  • Smooth Animations: Built-in animations using React Native Reanimated
  • Responsive Design: Automatically adapts to container width
  • Custom Colors: Support for individual segment colors
  • Value Labels: Shows values directly on chart segments
  • Grid Lines: Concentric circles provide visual reference for magnitude
  • Theme Integration: Uses theme colors for consistent styling
  • Interactive Legend: Color-coded legend with labels and values

Use Cases

Polar area charts are particularly effective for:

  • Performance Metrics: Displaying multi-dimensional performance data
  • Survey Results: Showing ratings across different categories
  • Skills Assessment: Visualizing competency levels across various skills
  • Budget Allocation: Showing spending distribution across departments
  • Quality Metrics: Displaying quality scores across different criteria
  • Market Analysis: Comparing market share or performance across segments

Design Considerations

The polar area chart design makes it ideal for:

  • Comparative Analysis: Easy visual comparison of magnitudes across categories
  • Radial Data: Natural representation of data that radiates from a central point
  • Equal Categories: All categories get equal angular space regardless of value
  • Magnitude Emphasis: Radius represents value magnitude, making differences clear
  • Compact Display: Efficient use of space for multivariate data

Accessibility

The PolarAreaChart component includes several accessibility features:

  • Semantic SVG structure for screen readers
  • High contrast white text on colored segments
  • Descriptive legend with clear labels and values
  • Proper color contrast ratios
  • Text labels for both categories and values
  • Supports dynamic text sizing

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 segments

Styling

The component integrates with your theme system:

  • Uses theme colors (primary, blue, green, orange, purple, pink) for segments
  • Uses mutedForeground color for grid lines and legend text
  • Supports custom colors per data point
  • Semi-transparent segments (80% opacity) for visual appeal
  • White stroke borders for segment separation

Animation

The chart features smooth entry animations:

  • Segments animate from 0 opacity to full opacity
  • Configurable animation duration (default 1000ms)
  • Can be disabled for instant rendering
  • Uses React Native Reanimated for optimal performance
  • Smooth transitions when data changes

Mathematical Implementation

The chart uses polar coordinates for accurate segment positioning:

  • Each segment occupies equal angular space (360° / number of segments)
  • Radius is proportional to value magnitude
  • Segments are drawn as SVG paths using arc commands
  • Grid circles provide visual reference at 25%, 50%, 75%, and 100% of max radius
  • Labels are positioned at 70% of segment radius for optimal readability

Comparison with Other Chart Types

Polar Area Chart vs Pie Chart:

  • Polar area: Equal angles, varying radius (emphasizes magnitude)
  • Pie chart: Varying angles, equal radius (emphasizes proportion)

Polar Area Chart vs Radar Chart:

  • Polar area: Filled segments, individual values
  • Radar chart: Connected lines, relationship between values

Polar Area Chart vs Bar Chart:

  • Polar area: Radial layout, compact display
  • Bar chart: Linear layout, easier value comparison
Pie ChartProgress Ring Chart