Radar Chart

A customizable radar chart component with smooth animations and flexible styling for displaying multi-dimensional data.

Installation


pnpm dlx bna-ui add radar-chart

Usage

import { RadarChart } from '@/components/charts/radar-chart';

const data = [
  { label: 'Speed', value: 80 },
  { label: 'Reliability', value: 92 },
  { label: 'Comfort', value: 75 },
  { label: 'Safety', value: 88 },
  { label: 'Efficiency', value: 85 },
];
 
<RadarChart
  data={data}
  config={{
    height: 300,
    showLabels: true,
    animated: true,
  }}
/>;

Examples

Basic Radar Chart

Sample Radar Chart

Styled Radar Chart

Large Radar Chart

API Reference

RadarChart

A customizable radar chart component with smooth animations and flexible styling. Perfect for displaying multi-dimensional data with emphasis on comparison across multiple metrics.

Prop	Type	Default	Description
`data`	`RadarChartDataPoint[]`	-	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.

RadarChartDataPoint

Property	Type	Default	Description
`label`	`string`	-	The label for the data point.
`value`	`number`	-	The value for the data point.

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 labels around the chart.
`animated`	`boolean`	`true`	Whether to animate the chart on load.
`duration`	`number`	`1000`	Animation duration in milliseconds.
`maxValue`	`number`	-	Maximum value for the chart scale (auto if omitted).

Features

Circular Layout: Displays data points in a circular radar pattern
Smooth Animations: Built-in animations using React Native Reanimated
Responsive Design: Automatically adapts to container width
Grid System: Circular grid lines and radial guides for easy reading
Label Display: Shows category labels around the perimeter
Theme Integration: Uses theme colors for consistent styling
Filled Area: Highlighted area showing the data profile

Use Cases

Radar charts are particularly effective for:

Performance Analysis: Comparing multiple performance metrics
Skill Assessment: Visualizing competency across different areas
Product Comparison: Comparing features across multiple products
Survey Results: Displaying multi-dimensional survey responses
Sports Analytics: Showing player statistics across different attributes
Quality Metrics: Displaying quality scores across various dimensions

Design Considerations

The circular layout of the RadarChart makes it ideal for:

Multi-dimensional Data: Perfect for displaying 3-8 different metrics
Pattern Recognition: Easy to spot strengths and weaknesses
Comparative Analysis: Overlaying multiple data sets for comparison
Balance Visualization: Showing how balanced performance is across metrics

Accessibility

The RadarChart component includes several accessibility features:

Semantic SVG structure for screen readers
Proper contrast ratios for visual elements
Text labels for all data points
Supports dynamic text sizing
Clear visual hierarchy with grid lines

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 smooth rendering

Styling

The component integrates with your theme system:

Uses primary color from theme for default area fill and stroke
Uses mutedForeground color for labels and grid lines
Supports custom styling through style prop
Consistent opacity and visual hierarchy

Animation

The chart features smooth entry animations:

Area fills from 0 opacity to final opacity
Data points animate with staggered delays
Configurable animation duration
Can be disabled for instant rendering
Uses React Native Reanimated for optimal performance

Mathematical Considerations

The radar chart uses polar coordinates:

Angles are calculated based on the number of data points
Values are normalized to fit within the chart radius
Grid circles represent percentage increments (20%, 40%, 60%, 80%, 100%)
Labels are positioned outside the chart area for clarity

Best Practices

When using radar charts:

Limit Data Points: Use 3-8 metrics for optimal readability
Similar Scales: Ensure all metrics use similar value ranges
Meaningful Order: Arrange metrics in logical order around the circle
Clear Labels: Use concise, descriptive labels
Consistent Units: Use consistent measurement units across metrics

Progress Ring Chart Radial Bar Chart