Speedometer Chart component for React Native
npm install react-native-speedometer-chart```
npm install --save react-native-speedometer-chart``
yarn add react-native-speedometer-chart
| Value to be painted |
| totalValue | none | number | yes | Total value |
| size | 200 | number | no | Chart size |
| innerColor | #ffffff | string | no | value color |
| outerColor | #e6e6e6 | string | no | value color |
| internalColor | #2eb82e | string | no | totalValue color |
| style | {} | object | no | Additional style |
| showText | false | bool | no | Show center text |
| text | '' | string/number | no | Center text |
| textStyle | {} | object | no | Center text style |
| showLabels | false | bool | no | Show labels |
| labelStyle | {} | object | no | Label style |
| labelFormatter | number => number | func | no | Label formatter |
| showPercent | false | bool | no | Show center percent |
| percentStyle | {} | object | no | Percent style |
| innerCircleStyle | null | object | no | |
| outerCircleStyle | null | object | no | |
| halfCircleStyle | null | object | no | |
| percentSize | 0.5 | number | no | |
| showIndicator | false | bool | no | Show a needle |
| indicatorColor | #808080 | string | no | value color |Basic Usage
`javascript
import React, { Component } from 'react';
import Speedometer from 'react-native-speedometer-chart';export default class Main extends Component {
render() {
return (
);
}
}
`Examples
`javascript
`
!25%
`javascript
`
!50%
`javascript
`
!75%
`javascript
`
!100%
`javascript
value={50}
totalValue={150}
size={250}
outerColor="#d3d3d3"
internalColor="#ff0000"
showText
text="50.00"
textStyle={{ color: 'green' }}
showLabels
labelStyle={{ color: 'blue' }}
labelFormatter={number => ${number}%}
showPercent
percentStyle={{ color: 'red' }}
/>
`
!Total usage`javascript
``