@salmonco/react-native-radar-chart NPM

react-native-radar-chart

You can draw radar charts easily.

Screenshot

Installation

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

Usage

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

const App = () => {
  const data = [
    {label: 'data1', value: 30},
    {label: 'data2', value: 55},
    {label: 'data3', value: 70},
    {label: 'data4', value: 35},
    {label: 'data5', value: 10},
    {label: 'data6', value: 60},
    {label: 'data7', value: 38},
    {label: 'data8', value: 65},
  ];

  return (
    <SafeAreaView style={styles.container}>
      <RadarChart
        data={data}
        maxValue={100}
        gradientColor={{
          startColor: '#FF9432',
          endColor: '#FFF8F1',
          count: 5,
        }}
        stroke={['#FFE8D3', '#FFE8D3', '#FFE8D3', '#FFE8D3', '#ff9532']}
        strokeWidth={[0.5, 0.5, 0.5, 0.5, 1]}
        strokeOpacity={[1, 1, 1, 1, 0.13]}
        labelColor="#433D3A"
        dataFillColor="#FF9432"
        dataFillOpacity={0.8}
        dataStroke="salmon"
        dataStrokeWidth={2}
        isCircle
      />
    </SafeAreaView>
  );
};

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

export default App;

Props

Prop	Description	Type	Default
data	Label and value pair data to be displayed on the radar chart	RadarData[]	required
size	Size of radar chart	number	330
scale	Adjusts the size of the radar chart. Larger values make the chart larger, while smaller values make the chart smaller.	number	1
maxValue	The maximum value of data to display on the radar chart. The end point of the chart is reached when the value of the data corresponds to maxValue.	number	The maximum value among the values of data
fillColor	Color inside chart	string	salmon
fillOpacity	Opacity inside chart	number	1
gradientColor	The gradient color inside the chart	GradientColor	fillColor ?? salmon
stroke	Stroke inside chart	string[]	white
strokeWidth	Width of stroke inside chart	number[]	0.5
strokeOpacity	Opacity of stroke inside chart	number[]	1
labelSize	Size of labels in data	number	16
labelColor	Color of labels in data	string	black
labelFontFamily	Font family of labels in data	string	Inter
labelDistance	Adjusts the position of the label. Larger values move the labels farther away from the edges of the chart, while smaller values move the labels closer to the center of the chart.	number	1.15
dataFillColor	Color of data area	string	green
dataFillOpacity	Opacity of data area	number	1
dataStroke	Stroke of data area	string	undefined
dataStrokeWidth	Width of stroke of data area	number	1
dataStrokeOpacity	Opacity of stroke of data area	number	1
divisionStroke	Stroke of division line that divides each data axis	string	white
divisionStrokeWidth	Width of division line that divides each data axis	number	1
divisionStrokeOpacity	Opacity of stroke of division line that divides each data axis	number	0.5
isCircle	Whether the chart is circular	boolean	false