react-native-stats
Installation
npm install react-native-stats --save
Usage
; <Stats stats= label: 'Sex' labelColor: '#F54EA2' value: 100 blockColor: '#F54EA2' label: 'Dating' labelColor: '#6078EA' value: 10 blockColor: '#0A83E1' label: 'Lifestyle' labelColor: '#FF7676' value: 50 blockColor: '#FF7676' label: 'Unicorn' labelColor: '#7117EA' value: 30 blockColor: '#7117EA' label: 'Religion' labelColor: '#42E695' value: 70 blockColor: '#42E695' label: 'Life' labelColor: '#F54EA2' value: 100 blockColor: '#F54EA2' label: 'Sport' labelColor: '#6078EA' value: 10 blockColor: '#0A83E1' label: 'Gaming' labelColor: '#FF7676' value: 50 blockColor: '#FF7676' label: 'Graphics' labelColor: '#7117EA' value: 30 blockColor: '#7117EA' label: 'Fart lvl' labelColor: '#42E695' value: 70 blockColor: '#42E695' />
Get started
react-native-stats
comes with a default data set for demo purposes.
<Stats
stats={Stats.DEMO_STATS}
isRtl={false}
minBlockHeight={2}
maxBlockHeight={96}
blockWidth={96}
labelColor={'#FFFF'}
blockColor={'#FFFF'}
/>
Options
React Native Stats options:
stats
an array of objects containing the data to be displayed -default: []
isRtl
(defaults: false) enables right to left language support -default: false
minBlockHeight
determines the minimum height of a block -default: 2
maxBlockHeight
determines the maximum height of a block -default: 96
blockWidth
determines the maximum width of a block -default: 96
labelColor
sets the default label color when non provided in the data set -default: '#FFFF'
blockColor
set the default block color when non provided in the data set -default: '#FFFF'