@avaiyakapil/react-native-radar-chart

v1.0.0

Published

a month ago

React Native radar chart component built with SVG. Perfect for data visualization, skill assessments, performance metrics, and multi-dimensional data display. Highly customizable with TypeScript support.

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

Basic Example

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

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

| 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: [email protected]
🐛 Issues: GitHub Issues

License

ISC

Author

Kapil Avaiya

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

⭐ Star this repo if you find it helpful!