@salmonco/react-native-radar-chart
v0.0.8
Published
You can draw radar charts easily.
Downloads
36
Maintainers
Readme
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}
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 | | 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 | | 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 |
Contributing
Contributions are always welcome!
License
MIT