Skip to content

LucasMonteiro1/react-native-speedometer-chart

Repository files navigation

React Native Speedometer Chart

npm version npm downloads Publish Package
NPM

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

import React, { Component } from 'react';
import Speedometer from 'react-native-speedometer-chart';

export default class Main extends Component {
  render() {
    return (
      <Speedometer value={50} totalValue={100}/>
    );
  }
}

Examples

  <Speedometer value={25} totalValue={100}/>

25%

  <Speedometer value={50} totalValue={100}/>

50%

  <Speedometer value={75} totalValue={100}/>

75%

  <Speedometer value={100} totalValue={100}/>

100%

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

  <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