React Native Speedometer Chart
Speedometer Chart component for React Native
Installation
npm install --save react-native-speedometer-chart
yarn add react-native-speedometer-chart
Try it out
You can try out the Speedometer Chart Example app to get a tease of the functionalities of this lib.
Props
Prop | Default | Type | Required | Description |
---|---|---|---|---|
value | none | number | yes |
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
;; { return <Speedometer value=50 totalValue=100/> ; }
Examples
<Speedometer value=25 totalValue=100/>
<Speedometer value=50 totalValue=100/>
<Speedometer value=75 totalValue=100/>
<Speedometer value=100 totalValue=100/>
<Speedometer value=50 totalValue=150 size=250 outerColor="#d3d3d3" internalColor="#ff0000" showText text="50.00" textStyle= color: 'green' showLabels labelStyle= color: 'blue' labelFormatter= `%` showPercent percentStyle= color: 'red' />
<Speedometer value=0 totalValue=100 showIndicator /> <Speedometer value=25 totalValue=100 showIndicator /> <Speedometer value=50 totalValue=100 showIndicator /> <Speedometer value=75 totalValue=100 showIndicator /> <Speedometer value=100 totalValue=100 showIndicator />
License
MIT