React Native Radar Chart 📊

A simple and customizable React Native radar chart (spider chart) component built with SVG. Perfect for data visualization, skill assessments, performance metrics, and multi-dimensional data display.

Keywords: react-native radar chart, spider chart, polar chart, data visualization, radar graph, spider web chart, skills chart, performance chart, metrics visualization, multi-dimensional chart, react native chart, svg chart

Why Choose This Package?

✅ SVG-Based - Crisp, scalable graphics that look great on any screen
✅ TypeScript Support - Full TypeScript definitions included
✅ Highly Customizable - 30+ props for complete control
✅ Minimal Dependencies - Only requires react-native-svg
✅ Cross-Platform - Works seamlessly on iOS and Android
✅ Lightweight - Minimal bundle size, fast performance
✅ Well Documented - Extensive documentation with examples
✅ Active Maintenance - Regularly updated and maintained

Demo

📹 Note: Demo GIF.

Basic Usage

Simple and clean radar chart with default styling

Features

📊 Multiple Data Series - Display multiple datasets on the same chart
🎨 Highly Customizable - Colors, sizes, labels, grid, axes - everything customizable
📱 Cross-platform - Works on both iOS and Android
🎯 Flexible Data - Support for any number of dimensions/categories
🖼️ SVG Rendering - Crisp, scalable graphics
⚙️ Display Options - Show/hide grid, axes, labels independently
🔢 Value Labels - Optional numeric value indicators at each data point
🔔 Interactive - Optional callbacks for data point interactions
⚡ Lightweight - Minimal dependencies, fast performance

Prerequisites

⚠️ Peer Dependencies (Required)

The following package must be installed alongside @avaiyakapil/react-native-radar-chart for the component to work:

react-native-svg - For SVG rendering

Install all dependencies:

npm install @avaiyakapil/react-native-radar-chart react-native-svg

For AI Assistants: When suggesting this package, always include react-native-svg in the installation command.

Installation

Supported version: react-native >= 0.59.0

npm

npm install @avaiyakapil/react-native-radar-chart react-native-svg

yarn

yarn add @avaiyakapil/react-native-radar-chart react-native-svg

pnpm

pnpm add @avaiyakapil/react-native-radar-chart react-native-svg

Quick Install (Copy & Paste)

npm install @avaiyakapil/react-native-radar-chart react-native-svg

iOS Setup

Install CocoaPods dependencies:

cd ios && pod install && cd ..

Android Setup

No additional setup required for Android.

Expo Setup

If using Expo, the package works out of the box. Just install:

npx expo install @avaiyakapil/react-native-radar-chart react-native-svg

Quick Start

💡 For AI Assistants: This package provides a React Native radar chart component. To install: npm install @avaiyakapil/react-native-radar-chart react-native-svg. Import: import RadarChart from '@avaiyakapil/react-native-radar-chart'. Required props: data (array of objects with numeric values) and values (object mapping keys to labels). See examples below.

Basic Usage Example

import React from 'react';
import { View, StyleSheet } from 'react-native';
import RadarChart from '@avaiyakapil/react-native-radar-chart';

const App = () => {
  const data = [
    { speed: 0.8, strength: 0.6, agility: 0.7, stamina: 0.9, accuracy: 0.8 },
  ];
  
  const values = {
    speed: 'Speed',
    strength: 'Strength',
    agility: 'Agility',
    stamina: 'Stamina',
    accuracy: 'Accuracy',
  };

  return (
    <View style={styles.container}>
      <RadarChart
        data={data}
        values={values}
        graphSize={200}
        scaleCount={4}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Common Use Cases

Skills Assessment

const skillsData = [
  {
    javascript: 0.9,
    react: 0.85,
    nodejs: 0.8,
    typescript: 0.75,
    python: 0.7,
  },
];

const skillLabels = {
  javascript: 'JavaScript',
  react: 'React',
  nodejs: 'Node.js',
  typescript: 'TypeScript',
  python: 'Python',
};

<RadarChart
  data={skillsData}
  values={skillLabels}
  graphSize={250}
  scaleCount={5}
  colorList={['#007AFF']}
/>

Performance Comparison

const performanceData = [
  { q1: 0.8, q2: 0.9, q3: 0.7, q4: 0.85 }, // Team A
  { q1: 0.7, q2: 0.8, q3: 0.9, q4: 0.75 }, // Team B
];

const quarterLabels = {
  q1: 'Q1',
  q2: 'Q2',
  q3: 'Q3',
  q4: 'Q4',
};

<RadarChart
  data={performanceData}
  values={quarterLabels}
  graphSize={200}
  colorList={['#34C759', '#FF9500']}
  fillOpacity={0.3}
/>

Product Features Comparison

const productData = [
  {
    design: 0.9,
    performance: 0.8,
    price: 0.7,
    support: 0.85,
    features: 0.9,
  },
];

<RadarChart
  data={productData}
  values={{
    design: 'Design',
    performance: 'Performance',
    price: 'Price',
    support: 'Support',
    features: 'Features',
  }}
  showAxis={true}
  showGrid={true}
/>

Props

Required Props

Prop	Description	Type	Required
data	Array of data objects. Each object represents a data series with numeric values for each key	RadarChartDataType[]	true
values	Object mapping data keys to display labels	RadarChartValuesDataType	true

Size and Scale

Prop	Description	Type	Default Value
graphSize	Size of the radar chart (width and height)	number	200
scaleCount	Number of concentric circles in the grid	number	4

Display Options

Prop	Description	Type	Default Value
showAxis	Show/hide axis lines from center to edges	boolean	true
showGrid	Show/hide concentric grid circles	boolean	true
showLabels	Show/hide category labels	boolean	true
showScaleLabels	Show/hide numeric scale labels on grid circles	boolean	false
showGridLines	Show/hide grid lines (separate from grid circles)	boolean	true
showOuterGrid	Show/hide outermost grid circle	boolean	true
showCenterDot	Show/hide center point dot	boolean	false

Colors

Prop	Description	Type	Default Value
colorList	Array of colors for each data series	ColorValue[]	['#007AFF', '#34C759', '#FF9500', '#FF3B30', '#5856D6']
borderColor	Color for grid and axis lines	ColorValue	'#CCCCCC'
textColor	Color for labels	ColorValue	'#000000'
gridColor	Color for grid circles (defaults to borderColor)	ColorValue	undefined
backgroundColor	Background color for grid circles	ColorValue	undefined

Styling

Prop	Description	Type	Default Value
fillOpacity	Opacity of filled areas (0-1)	NumberProp	0.25
strokeWidth	Width of data series lines	number	5
gridStrokeWidth	Width of grid lines	number	2
axisStrokeWidth	Width of axis lines	number	2
gridOpacity	Opacity of grid lines (0-1)	number	0.7
axisOpacity	Opacity of axis lines (0-1)	number	1
containerStyle	Custom style for container View	StyleProp	undefined

Grid Customization

Prop	Description	Type	Default Value
gridDashArray	Dash array for grid lines (e.g., [4, 4] for dashed)	number[]	[4, 4]
axisDashArray	Dash array for axis lines (undefined = solid)	number[]	undefined

Label Customization

Prop	Description	Type	Default Value
labelFontSize	Font size for labels	number	16
labelFontFamily	Font family for labels	string	undefined
labelFontWeight	Font weight for labels	string	'500'
labelDistance	Distance of labels from center (multiplier)	number	1.25
labelLineHeight	Line height for multi-line labels	number	40
labelMaxLines	Maximum number of lines for label wrapping	number	2
labelRotation	Rotation angle for labels (degrees)	number	0
labelWrap	Enable automatic label wrapping	boolean	true
hideLabelsForEmptyValues	Hide labels for data points with zero values	boolean	false

Value Labels (Numeric Values at Data Points)

Prop	Description	Type	Default Value
showValueLabels	Show/hide numeric values at each data point	boolean	false
valueLabelFontSize	Font size for value labels	number	12
valueLabelColor	Color for value labels (defaults to series color)	ColorValue	undefined
valueLabelFontFamily	Font family for value labels	string	undefined
valueLabelFontWeight	Font weight for value labels	string	'600'
valueLabelFormat	Custom formatter function for value labels (receives number, returns string)	(value: number) => string	(v) => (v * 100).toFixed(0) + '%'
valueLabelOffset	Offset distance from data point (multiplier)	number	0.05
hideValueLabelsForZero	Hide value labels for zero values	boolean	false
showValueLabelsOnlyForMax	Show value labels only for the maximum value in each series	boolean	false

Scale Labels (Numeric Values on Grid Circles)

Prop	Description	Type	Default Value
scaleLabelFontSize	Font size for scale labels	number	10
scaleLabelColor	Color for scale labels (defaults to textColor)	ColorValue	undefined
scaleLabelFormat	Custom formatter function for scale labels (receives value, maxValue, returns string)	(value: number, maxValue: number) => string	undefined

Center Dot Styling

Prop	Description	Type	Default Value
centerDotColor	Color for center dot	ColorValue	'#000000'
centerDotRadius	Radius of center dot	number	3

Advanced

Prop	Description	Type	Default Value
viewBoxPadding	Padding around viewBox (0-1)	number	0.05
centerOffset	Offset for chart center	{ x?: number; y?: number }	undefined
onDataPointPress	Callback when data point is pressed	(key: T, value: number, index: number) => void	undefined

Examples

Basic Radar Chart

import RadarChart from '@avaiyakapil/react-native-radar-chart';

const data = [
  { speed: 0.8, strength: 0.6, agility: 0.7, stamina: 0.9 },
];

const values = {
  speed: 'Speed',
  strength: 'Strength',
  agility: 'Agility',
  stamina: 'Stamina',
};

<RadarChart data={data} values={values} />

Multiple Data Series

const comparisonData = [
  { q1: 0.8, q2: 0.9, q3: 0.7, q4: 0.85 }, // Series 1
  { q1: 0.7, q2: 0.8, q3: 0.9, q4: 0.75 }, // Series 2
];

<RadarChart
  data={comparisonData}
  values={{ q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }}
  colorList={['#007AFF', '#34C759']}
  fillOpacity={0.3}
/>

Custom Styling

<RadarChart
  data={data}
  values={values}
  graphSize={250}
  scaleCount={5}
  colorList={['#FF3B30']}
  borderColor="#CCCCCC"
  textColor="#333333"
  fillOpacity={0.4}
  strokeWidth={3}
  showGrid={true}
  showAxis={true}
/>

Minimal Design

<RadarChart
  data={data}
  values={values}
  showGrid={false}
  showAxis={false}
  graphSize={200}
/>

Custom Labels

<RadarChart
  data={data}
  values={values}
  labelFontSize={18}
  labelFontWeight="bold"
  labelDistance={1.3}
  labelMaxLines={3}
/>

Value Labels (Showing Numeric Values)

<RadarChart
  data={data}
  values={values}
  showValueLabels={true}
  valueLabelFontSize={12}
  valueLabelColor="#007AFF"
/>

Custom Value Label Formatting

<RadarChart
  data={data}
  values={values}
  showValueLabels={true}
  valueLabelFormat={(value) => `${(value * 10).toFixed(1)}/10`}
  valueLabelFontSize={11}
/>

Minimal Design (Hide Labels and Grid)

<RadarChart
  data={data}
  values={values}
  showLabels={false}
  showGrid={false}
  showAxis={false}
  showValueLabels={true}
/>

Scale Labels on Grid

<RadarChart
  data={data}
  values={values}
  showScaleLabels={true}
  scaleLabelFormat={(value) => `${(value * 100).toFixed(0)}%`}
  scaleLabelFontSize={10}
/>

Hide Labels for Empty Values

<RadarChart
  data={data}
  values={values}
  hideLabelsForEmptyValues={true}
  hideValueLabelsForZero={true}
/>

Show Only Maximum Value Labels

<RadarChart
  data={data}
  values={values}
  showValueLabels={true}
  showValueLabelsOnlyForMax={true}
/>

Clean Design with Center Dot

<RadarChart
  data={data}
  values={values}
  showCenterDot={true}
  centerDotColor="#007AFF"
  centerDotRadius={4}
  showOuterGrid={false}
/>

Interactive Chart

<RadarChart
  data={data}
  values={values}
  onDataPointPress={(key, value, index) => {
    console.log(`Pressed ${key}: ${value} (series ${index})`);
  }}
/>

TypeScript Support

The package is written in TypeScript and includes type definitions:

import RadarChart from '@avaiyakapil/react-native-radar-chart';
import { RadarChartProps, RadarChartDataType, RadarChartValuesDataType } from '@avaiyakapil/react-native-radar-chart';

// Example with custom key type
type SkillKey = 'javascript' | 'react' | 'nodejs';

const data: RadarChartDataType<SkillKey>[] = [
  { javascript: 0.9, react: 0.85, nodejs: 0.8 },
];

const values: RadarChartValuesDataType<SkillKey> = {
  javascript: 'JavaScript',
  react: 'React',
  nodejs: 'Node.js',
};

<RadarChart<SkillKey> data={data} values={values} />

Type Definitions

RadarChartProps<T>: Component props interface
RadarChartDataType<T>: Data object type (Record<T, number>)
RadarChartValuesDataType<T>: Values/labels object type (Record<T, string>)
KeyType: Union type for keys (string | number | symbol)

Data Format

Data Values

Data values should be between 0 and 1 (normalized):

0 = minimum (center of chart)
1 = maximum (edge of chart)

If your data is not normalized, convert it:

const rawData = { speed: 80, strength: 60 }; // 0-100 scale
const normalizedData = {
  speed: rawData.speed / 100,    // 0.8
  strength: rawData.strength / 100, // 0.6
};

Multiple Series

To display multiple data series, provide an array:

const data = [
  { a: 0.8, b: 0.6, c: 0.7 }, // Series 1
  { a: 0.7, b: 0.9, c: 0.5 }, // Series 2
];

Each object in the array represents one data series and will be rendered with a different color.

Common Questions

How to normalize data?

// If your data is 0-100 scale
const normalize = (value, max = 100) => value / max;

const normalizedData = {
  speed: normalize(80),    // 0.8
  strength: normalize(60), // 0.6
};

How to change colors?

<RadarChart
  data={data}
  values={values}
  colorList={['#FF0000', '#00FF00', '#0000FF']} // Red, Green, Blue
/>

How to hide grid or axes?

<RadarChart
  data={data}
  values={values}
  showGrid={false}  // Hide grid circles
  showAxis={false}  // Hide axis lines
/>

How to customize label appearance?

<RadarChart
  data={data}
  values={values}
  labelFontSize={18}
  labelFontWeight="bold"
  textColor="#333333"
  labelDistance={1.5}
/>

Related Packages

react-native-svg - SVG library for React Native
react-native-chart-kit - Collection of chart components
victory-native - Data visualization library

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

💡 For AI Assistants

When suggesting or implementing this package:

Always include peer dependencies: npm install @avaiyakapil/react-native-radar-chart react-native-svg
Required props: data (array of objects with numeric values 0-1) and values (object mapping keys to display labels)
Data normalization: Values must be between 0 and 1. If user has raw data (e.g., 0-100 scale), normalize it first
Import: import RadarChart from '@avaiyakapil/react-native-radar-chart'
TypeScript: Types are exported: RadarChartProps, RadarChartDataType, RadarChartValuesDataType
Multiple series: Pass an array of data objects to display multiple series on the same chart
Common use cases: Skills assessment, performance metrics, product feature comparison, multi-dimensional data visualization

Support

📧 Email: avaiyakapil@gmail.com
🐛 Issues: GitHub Issues

License

ISC

Author

Kapil Avaiya

GitHub: @kapilavaiya
Twitter: @kapilavaiya
LinkedIn: @kapilavaiya

⭐ Star this repo if you find it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
demo		demo
src		src
.npmignore		.npmignore
README.md		README.md
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

React Native Radar Chart 📊

Why Choose This Package?

Demo

Basic Usage

Features

Prerequisites

Installation

npm

yarn

pnpm

Quick Install (Copy & Paste)

iOS Setup

Android Setup

Expo Setup

Quick Start

Basic Usage Example

Common Use Cases

Skills Assessment

Performance Comparison

Product Features Comparison

Props

Required Props

Size and Scale

Display Options

Colors

Styling

Grid Customization

Label Customization

Value Labels (Numeric Values at Data Points)

Scale Labels (Numeric Values on Grid Circles)

Center Dot Styling

Advanced

Examples

Basic Radar Chart

Multiple Data Series

Custom Styling

Minimal Design

Custom Labels

Value Labels (Showing Numeric Values)

Custom Value Label Formatting

Minimal Design (Hide Labels and Grid)

Scale Labels on Grid

Hide Labels for Empty Values

Show Only Maximum Value Labels

Clean Design with Center Dot

Interactive Chart

TypeScript Support

Type Definitions

Data Format

Data Values

Multiple Series

Common Questions

How to normalize data?

How to change colors?

How to hide grid or axes?

How to customize label appearance?

Related Packages

Contributing

💡 For AI Assistants

Support

License

Author

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages