{"_id":"@avaiyakapil/react-native-radar-chart","name":"@avaiyakapil/react-native-radar-chart","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@avaiyakapil/react-native-radar-chart","version":"1.0.0","description":"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.","main":"src/index.ts","types":"src/index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/kapilavaiya/react-native-radar-chart.git"},"homepage":"https://github.com/kapilavaiya/react-native-radar-chart#readme","bugs":{"url":"https://github.com/kapilavaiya/react-native-radar-chart/issues"},"keywords":["radar","radar-chart","radar-graph","spider-chart","spider-web-chart","web-chart","polar-chart","polar-graph","chart","graph","data-visualization","visualization","data-viz","react","react-native","react-native-radar-chart","react-native-chart","react-native-graph","react-component","svg","svg-chart","multi-dimensional","skills-chart","performance-chart","metrics-chart","assessment-chart","comparison-chart","analytics","dashboard","statistics","mobile","ios","android","expo","typescript","ts","customizable","animated","interactive"],"author":{"name":"Kapil Avaiya"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-native":">=0.59.0","react-native-svg":">=9.0.0"},"_id":"@avaiyakapil/react-native-radar-chart@1.0.0","gitHead":"c76c6dd2b28c7ab02f713901fd682430f317aa57","_nodeVersion":"24.9.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-bdXCNN73QDWpF+s89Ak3z6KFwqWC+qGq3NRYYk2SMzFWg7hIcEb2a6gYvQsLk6C+xH2a8qmH/IHp2s29nPQTSQ==","shasum":"5442a36732cc4bbe3412633f2cfc3cc9e5444241","tarball":"https://registry.npmjs.org/@avaiyakapil/react-native-radar-chart/-/react-native-radar-chart-1.0.0.tgz","fileCount":6,"unpackedSize":45045,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIARw+89Lmmj66xkmxK1s1xsQG+joU9ooBMRuoN0jCjNBAiBLUrl7E7fhBRT7xgRav1P8zCvg1mOyBUwRqbZdTmFatg=="}]},"_npmUser":{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"},"directories":{},"maintainers":[{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-radar-chart_1.0.0_1770967873341_0.6177916582278482"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-13T07:31:13.203Z","1.0.0":"2026-02-13T07:31:13.480Z","modified":"2026-02-13T07:31:13.730Z"},"maintainers":[{"name":"avaiyakapil","email":"avaiyakapil@gmail.com"}],"description":"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.","homepage":"https://github.com/kapilavaiya/react-native-radar-chart#readme","keywords":["radar","radar-chart","radar-graph","spider-chart","spider-web-chart","web-chart","polar-chart","polar-graph","chart","graph","data-visualization","visualization","data-viz","react","react-native","react-native-radar-chart","react-native-chart","react-native-graph","react-component","svg","svg-chart","multi-dimensional","skills-chart","performance-chart","metrics-chart","assessment-chart","comparison-chart","analytics","dashboard","statistics","mobile","ios","android","expo","typescript","ts","customizable","animated","interactive"],"repository":{"type":"git","url":"git+https://github.com/kapilavaiya/react-native-radar-chart.git"},"author":{"name":"Kapil Avaiya"},"bugs":{"url":"https://github.com/kapilavaiya/react-native-radar-chart/issues"},"license":"ISC","readme":"# React Native Radar Chart 📊\n\n![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=for-the-badge&colorB=191A17)\n[![Version](https://img.shields.io/npm/v/@avaiyakapil/react-native-radar-chart.svg?style=for-the-badge)](https://www.npmjs.com/package/@avaiyakapil/react-native-radar-chart)\n[![Downloads](https://img.shields.io/npm/dm/@avaiyakapil/react-native-radar-chart.svg?style=for-the-badge)](https://www.npmjs.com/package/@avaiyakapil/react-native-radar-chart)\n[![License](https://img.shields.io/npm/l/@avaiyakapil/react-native-radar-chart.svg?style=for-the-badge)](https://www.npmjs.com/package/@avaiyakapil/react-native-radar-chart)\n\nA 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.\n\n**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`\n\n<a href=\"https://www.buymeacoffee.com/kapilavaiya\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\"></a>\n\n## Why Choose This Package?\n\n✅ **SVG-Based** - Crisp, scalable graphics that look great on any screen  \n✅ **TypeScript Support** - Full TypeScript definitions included  \n✅ **Highly Customizable** - 30+ props for complete control  \n✅ **Minimal Dependencies** - Only requires react-native-svg  \n✅ **Cross-Platform** - Works seamlessly on iOS and Android  \n✅ **Lightweight** - Minimal bundle size, fast performance  \n✅ **Well Documented** - Extensive documentation with examples  \n✅ **Active Maintenance** - Regularly updated and maintained\n\n## Demo\n\n> 📹 **Note**: Demo GIF.\n\n### Basic Usage\n![Basic Example](https://github.com/kapilavaiya/react-native-radar-chart/blob/master/demo/demo.gif)\n\n*Simple and clean radar chart with default styling*\n\n## Features\n\n- 📊 **Multiple Data Series** - Display multiple datasets on the same chart\n- 🎨 **Highly Customizable** - Colors, sizes, labels, grid, axes - everything customizable\n- 📱 **Cross-platform** - Works on both iOS and Android\n- 🎯 **Flexible Data** - Support for any number of dimensions/categories\n- 🖼️ **SVG Rendering** - Crisp, scalable graphics\n- ⚙️ **Display Options** - Show/hide grid, axes, labels independently\n- 🔢 **Value Labels** - Optional numeric value indicators at each data point\n- 🔔 **Interactive** - Optional callbacks for data point interactions\n- ⚡ **Lightweight** - Minimal dependencies, fast performance\n\n## Prerequisites\n\n⚠️ **Peer Dependencies** (Required)\n\nThe following package **must** be installed alongside `@avaiyakapil/react-native-radar-chart` for the component to work:\n\n* [react-native-svg](https://www.npmjs.com/package/react-native-svg) - For SVG rendering\n\n**Install all dependencies:**\n```bash\nnpm install @avaiyakapil/react-native-radar-chart react-native-svg\n```\n\n**For AI Assistants:** When suggesting this package, always include `react-native-svg` in the installation command.\n\n## Installation\n\nSupported version: react-native >= 0.59.0\n\n### npm\n```bash\nnpm install @avaiyakapil/react-native-radar-chart react-native-svg\n```\n\n### yarn\n```bash\nyarn add @avaiyakapil/react-native-radar-chart react-native-svg\n```\n\n### pnpm\n```bash\npnpm add @avaiyakapil/react-native-radar-chart react-native-svg\n```\n\n### Quick Install (Copy & Paste)\n```bash\nnpm install @avaiyakapil/react-native-radar-chart react-native-svg\n```\n\n### iOS Setup\n\n1. Install CocoaPods dependencies:\n```bash\ncd ios && pod install && cd ..\n```\n\n### Android Setup\n\nNo additional setup required for Android.\n\n### Expo Setup\n\nIf using Expo, the package works out of the box. Just install:\n\n```bash\nnpx expo install @avaiyakapil/react-native-radar-chart react-native-svg\n```\n\n## Quick Start\n\n> 💡 **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.\n\n### Basic Usage Example\n\n```jsx\nimport React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport RadarChart from '@avaiyakapil/react-native-radar-chart';\n\nconst App = () => {\n  const data = [\n    { speed: 0.8, strength: 0.6, agility: 0.7, stamina: 0.9, accuracy: 0.8 },\n  ];\n  \n  const values = {\n    speed: 'Speed',\n    strength: 'Strength',\n    agility: 'Agility',\n    stamina: 'Stamina',\n    accuracy: 'Accuracy',\n  };\n\n  return (\n    <View style={styles.container}>\n      <RadarChart\n        data={data}\n        values={values}\n        graphSize={200}\n        scaleCount={4}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n\nexport default App;\n```\n\n### Common Use Cases\n\n#### Skills Assessment\n```jsx\nconst skillsData = [\n  {\n    javascript: 0.9,\n    react: 0.85,\n    nodejs: 0.8,\n    typescript: 0.75,\n    python: 0.7,\n  },\n];\n\nconst skillLabels = {\n  javascript: 'JavaScript',\n  react: 'React',\n  nodejs: 'Node.js',\n  typescript: 'TypeScript',\n  python: 'Python',\n};\n\n<RadarChart\n  data={skillsData}\n  values={skillLabels}\n  graphSize={250}\n  scaleCount={5}\n  colorList={['#007AFF']}\n/>\n```\n\n#### Performance Comparison\n```jsx\nconst performanceData = [\n  { q1: 0.8, q2: 0.9, q3: 0.7, q4: 0.85 }, // Team A\n  { q1: 0.7, q2: 0.8, q3: 0.9, q4: 0.75 }, // Team B\n];\n\nconst quarterLabels = {\n  q1: 'Q1',\n  q2: 'Q2',\n  q3: 'Q3',\n  q4: 'Q4',\n};\n\n<RadarChart\n  data={performanceData}\n  values={quarterLabels}\n  graphSize={200}\n  colorList={['#34C759', '#FF9500']}\n  fillOpacity={0.3}\n/>\n```\n\n#### Product Features Comparison\n```jsx\nconst productData = [\n  {\n    design: 0.9,\n    performance: 0.8,\n    price: 0.7,\n    support: 0.85,\n    features: 0.9,\n  },\n];\n\n<RadarChart\n  data={productData}\n  values={{\n    design: 'Design',\n    performance: 'Performance',\n    price: 'Price',\n    support: 'Support',\n    features: 'Features',\n  }}\n  showAxis={true}\n  showGrid={true}\n/>\n```\n\n## Props\n\n### Required Props\n\n| Prop                  | Description                                                                                 | Type                          | Required |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:--------:|\n| data                  | Array of data objects. Each object represents a data series with numeric values for each key | RadarChartDataType<T>[]       | true     |\n| values                | Object mapping data keys to display labels                                                  | RadarChartValuesDataType<T>   | true     |\n\n### Size and Scale\n\n| Prop                  | Description                                                                                 | Type                          | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| graphSize             | Size of the radar chart (width and height)                                                  | number                        | 200           |\n| scaleCount            | Number of concentric circles in the grid                                                    | number                        | 4             |\n\n### Display Options\n\n| Prop                  | Description                                                                                 | Type                          | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| showAxis              | Show/hide axis lines from center to edges                                                  | boolean                       | true          |\n| showGrid              | Show/hide concentric grid circles                                                            | boolean                       | true          |\n| showLabels            | Show/hide category labels                                                                   | boolean                       | true          |\n| showScaleLabels       | Show/hide numeric scale labels on grid circles                                              | boolean                       | false         |\n| showGridLines         | Show/hide grid lines (separate from grid circles)                                          | boolean                       | true          |\n| showOuterGrid         | Show/hide outermost grid circle                                                             | boolean                       | true          |\n| showCenterDot         | Show/hide center point dot                                                                  | boolean                       | false         |\n\n### Colors\n\n| Prop                  | Description                                                                                 | Type                          | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| colorList             | Array of colors for each data series                                                        | ColorValue[]                  | ['#007AFF', '#34C759', '#FF9500', '#FF3B30', '#5856D6'] |\n| borderColor           | Color for grid and axis lines                                                               | ColorValue                    | '#CCCCCC'     |\n| textColor             | Color for labels                                                                            | ColorValue                    | '#000000'     |\n| gridColor             | Color for grid circles (defaults to borderColor)                                           | ColorValue                    | undefined     |\n| backgroundColor       | Background color for grid circles                                                           | ColorValue                    | undefined     |\n\n### Styling\n\n| Prop                  | Description                                                                                 | Type                          | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| fillOpacity           | Opacity of filled areas (0-1)                                                               | NumberProp                    | 0.25          |\n| strokeWidth           | Width of data series lines                                                                 | number                        | 5             |\n| gridStrokeWidth       | Width of grid lines                                                                         | number                        | 2             |\n| axisStrokeWidth       | Width of axis lines                                                                         | number                        | 2             |\n| gridOpacity           | Opacity of grid lines (0-1)                                                                 | number                        | 0.7           |\n| axisOpacity           | Opacity of axis lines (0-1)                                                                 | number                        | 1             |\n| containerStyle        | Custom style for container View                                                             | StyleProp<ViewStyle>          | undefined     |\n\n### Grid Customization\n\n| Prop                  | Description                                                                                 | Type                          | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| gridDashArray         | Dash array for grid lines (e.g., [4, 4] for dashed)                                        | number[]                      | [4, 4]        |\n| axisDashArray         | Dash array for axis lines (undefined = solid)                                                | number[]                      | undefined     |\n\n### Label Customization\n\n| Prop                  | Description                                                                                 | Type                          | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| labelFontSize         | Font size for labels                                                                        | number                        | 16            |\n| labelFontFamily       | Font family for labels                                                                      | string                        | undefined     |\n| labelFontWeight       | Font weight for labels                                                                      | string                        | '500'         |\n| labelDistance         | Distance of labels from center (multiplier)                                                 | number                        | 1.25          |\n| labelLineHeight       | Line height for multi-line labels                                                           | number                        | 40            |\n| labelMaxLines         | Maximum number of lines for label wrapping                                                  | number                        | 2             |\n| labelRotation         | Rotation angle for labels (degrees)                                                         | number                        | 0             |\n| labelWrap             | Enable automatic label wrapping                                                              | boolean                       | true          |\n| hideLabelsForEmptyValues | Hide labels for data points with zero values                                             | boolean                       | false         |\n\n### Value Labels (Numeric Values at Data Points)\n\n| Prop                  | Description                                                                                 | Type                          | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| showValueLabels       | Show/hide numeric values at each data point                                                 | boolean                       | false         |\n| valueLabelFontSize    | Font size for value labels                                                                  | number                        | 12            |\n| valueLabelColor       | Color for value labels (defaults to series color)                                          | ColorValue                    | undefined     |\n| valueLabelFontFamily  | Font family for value labels                                                                | string                        | undefined     |\n| valueLabelFontWeight  | Font weight for value labels                                                                | string                        | '600'         |\n| valueLabelFormat      | Custom formatter function for value labels (receives number, returns string)               | (value: number) => string     | (v) => (v * 100).toFixed(0) + '%' |\n| valueLabelOffset      | Offset distance from data point (multiplier)                                               | number                        | 0.05          |\n| hideValueLabelsForZero | Hide value labels for zero values                                                          | boolean                       | false         |\n| showValueLabelsOnlyForMax | Show value labels only for the maximum value in each series                            | boolean                       | false         |\n\n### Scale Labels (Numeric Values on Grid Circles)\n\n| Prop                  | Description                                                                                 | Type                          | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| scaleLabelFontSize    | Font size for scale labels                                                                  | number                        | 10            |\n| scaleLabelColor       | Color for scale labels (defaults to textColor)                                              | ColorValue                    | undefined     |\n| scaleLabelFormat      | Custom formatter function for scale labels (receives value, maxValue, returns string)       | (value: number, maxValue: number) => string | undefined |\n\n### Center Dot Styling\n\n| Prop                  | Description                                                                                 | Type                          | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| centerDotColor        | Color for center dot                                                                        | ColorValue                    | '#000000'     |\n| centerDotRadius       | Radius of center dot                                                                        | number                        | 3             |\n\n### Advanced\n\n| Prop                  | Description                                                                                 | Type                          | Default Value |\n| :--------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------:|:-------------:|\n| viewBoxPadding        | Padding around viewBox (0-1)                                                                 | number                        | 0.05          |\n| centerOffset          | Offset for chart center                                                                     | { x?: number; y?: number }    | undefined     |\n| onDataPointPress      | Callback when data point is pressed                                                          | (key: T, value: number, index: number) => void | undefined |\n\n## Examples\n\n### Basic Radar Chart\n\n```jsx\nimport RadarChart from '@avaiyakapil/react-native-radar-chart';\n\nconst data = [\n  { speed: 0.8, strength: 0.6, agility: 0.7, stamina: 0.9 },\n];\n\nconst values = {\n  speed: 'Speed',\n  strength: 'Strength',\n  agility: 'Agility',\n  stamina: 'Stamina',\n};\n\n<RadarChart data={data} values={values} />\n```\n\n### Multiple Data Series\n\n```jsx\nconst comparisonData = [\n  { q1: 0.8, q2: 0.9, q3: 0.7, q4: 0.85 }, // Series 1\n  { q1: 0.7, q2: 0.8, q3: 0.9, q4: 0.75 }, // Series 2\n];\n\n<RadarChart\n  data={comparisonData}\n  values={{ q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }}\n  colorList={['#007AFF', '#34C759']}\n  fillOpacity={0.3}\n/>\n```\n\n### Custom Styling\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  graphSize={250}\n  scaleCount={5}\n  colorList={['#FF3B30']}\n  borderColor=\"#CCCCCC\"\n  textColor=\"#333333\"\n  fillOpacity={0.4}\n  strokeWidth={3}\n  showGrid={true}\n  showAxis={true}\n/>\n```\n\n### Minimal Design\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  showGrid={false}\n  showAxis={false}\n  graphSize={200}\n/>\n```\n\n### Custom Labels\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  labelFontSize={18}\n  labelFontWeight=\"bold\"\n  labelDistance={1.3}\n  labelMaxLines={3}\n/>\n```\n\n### Value Labels (Showing Numeric Values)\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  showValueLabels={true}\n  valueLabelFontSize={12}\n  valueLabelColor=\"#007AFF\"\n/>\n```\n\n### Custom Value Label Formatting\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  showValueLabels={true}\n  valueLabelFormat={(value) => `${(value * 10).toFixed(1)}/10`}\n  valueLabelFontSize={11}\n/>\n```\n\n### Minimal Design (Hide Labels and Grid)\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  showLabels={false}\n  showGrid={false}\n  showAxis={false}\n  showValueLabels={true}\n/>\n```\n\n### Scale Labels on Grid\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  showScaleLabels={true}\n  scaleLabelFormat={(value) => `${(value * 100).toFixed(0)}%`}\n  scaleLabelFontSize={10}\n/>\n```\n\n### Hide Labels for Empty Values\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  hideLabelsForEmptyValues={true}\n  hideValueLabelsForZero={true}\n/>\n```\n\n### Show Only Maximum Value Labels\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  showValueLabels={true}\n  showValueLabelsOnlyForMax={true}\n/>\n```\n\n### Clean Design with Center Dot\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  showCenterDot={true}\n  centerDotColor=\"#007AFF\"\n  centerDotRadius={4}\n  showOuterGrid={false}\n/>\n```\n\n### Interactive Chart\n\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  onDataPointPress={(key, value, index) => {\n    console.log(`Pressed ${key}: ${value} (series ${index})`);\n  }}\n/>\n```\n\n## TypeScript Support\n\nThe package is written in TypeScript and includes type definitions:\n\n```typescript\nimport RadarChart from '@avaiyakapil/react-native-radar-chart';\nimport { RadarChartProps, RadarChartDataType, RadarChartValuesDataType } from '@avaiyakapil/react-native-radar-chart';\n\n// Example with custom key type\ntype SkillKey = 'javascript' | 'react' | 'nodejs';\n\nconst data: RadarChartDataType<SkillKey>[] = [\n  { javascript: 0.9, react: 0.85, nodejs: 0.8 },\n];\n\nconst values: RadarChartValuesDataType<SkillKey> = {\n  javascript: 'JavaScript',\n  react: 'React',\n  nodejs: 'Node.js',\n};\n\n<RadarChart<SkillKey> data={data} values={values} />\n```\n\n### Type Definitions\n\n- `RadarChartProps<T>`: Component props interface\n- `RadarChartDataType<T>`: Data object type (Record<T, number>)\n- `RadarChartValuesDataType<T>`: Values/labels object type (Record<T, string>)\n- `KeyType`: Union type for keys (string | number | symbol)\n\n## Data Format\n\n### Data Values\n\nData values should be between **0 and 1** (normalized):\n- `0` = minimum (center of chart)\n- `1` = maximum (edge of chart)\n\nIf your data is not normalized, convert it:\n```jsx\nconst rawData = { speed: 80, strength: 60 }; // 0-100 scale\nconst normalizedData = {\n  speed: rawData.speed / 100,    // 0.8\n  strength: rawData.strength / 100, // 0.6\n};\n```\n\n### Multiple Series\n\nTo display multiple data series, provide an array:\n```jsx\nconst data = [\n  { a: 0.8, b: 0.6, c: 0.7 }, // Series 1\n  { a: 0.7, b: 0.9, c: 0.5 }, // Series 2\n];\n```\n\nEach object in the array represents one data series and will be rendered with a different color.\n\n## Common Questions\n\n### How to normalize data?\n```jsx\n// If your data is 0-100 scale\nconst normalize = (value, max = 100) => value / max;\n\nconst normalizedData = {\n  speed: normalize(80),    // 0.8\n  strength: normalize(60), // 0.6\n};\n```\n\n### How to change colors?\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  colorList={['#FF0000', '#00FF00', '#0000FF']} // Red, Green, Blue\n/>\n```\n\n### How to hide grid or axes?\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  showGrid={false}  // Hide grid circles\n  showAxis={false}  // Hide axis lines\n/>\n```\n\n### How to customize label appearance?\n```jsx\n<RadarChart\n  data={data}\n  values={values}\n  labelFontSize={18}\n  labelFontWeight=\"bold\"\n  textColor=\"#333333\"\n  labelDistance={1.5}\n/>\n```\n\n## Related Packages\n\n- [react-native-svg](https://www.npmjs.com/package/react-native-svg) - SVG library for React Native\n- [react-native-chart-kit](https://www.npmjs.com/package/react-native-chart-kit) - Collection of chart components\n- [victory-native](https://www.npmjs.com/package/victory-native) - Data visualization library\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 💡 For AI Assistants\n\nWhen suggesting or implementing this package:\n\n1. **Always include peer dependencies**: `npm install @avaiyakapil/react-native-radar-chart react-native-svg`\n2. **Required props**: `data` (array of objects with numeric values 0-1) and `values` (object mapping keys to display labels)\n3. **Data normalization**: Values must be between 0 and 1. If user has raw data (e.g., 0-100 scale), normalize it first\n4. **Import**: `import RadarChart from '@avaiyakapil/react-native-radar-chart'`\n5. **TypeScript**: Types are exported: `RadarChartProps`, `RadarChartDataType`, `RadarChartValuesDataType`\n6. **Multiple series**: Pass an array of data objects to display multiple series on the same chart\n7. **Common use cases**: Skills assessment, performance metrics, product feature comparison, multi-dimensional data visualization\n\n## Support\n\n- 📧 Email: avaiyakapil@gmail.com\n- 🐛 Issues: [GitHub Issues](https://github.com/kapilavaiya/react-native-radar-chart/issues)\n\n## License\n\nISC\n\n## Author\n\n**Kapil Avaiya**\n\n- GitHub: [@kapilavaiya](https://github.com/kapilavaiya)\n- Twitter: [@kapilavaiya](https://twitter.com/kapilavaiya)\n- LinkedIn: [@kapilavaiya](https://www.linkedin.com/in/kapilavaiya/)\n\n---\n\n⭐ **Star this repo if you find it helpful!**\n","readmeFilename":"README.md","_rev":"1-4495fc7efe35defe3029762e2e0dd0c6"}