react-native-stats v1.0.0

react-native-stats

Installation

npm install react-native-stats --save

Usage

import Stats from 'react-native-stats';

<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'