Nuptial Predicament Mediation
    Have ideas to improve npm?Join in the discussion! »

    react-native-speedometer-chart

    0.7.5 • Public • Published

    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

    Install

    npm i react-native-speedometer-chart

    DownloadsWeekly Downloads

    137

    Version

    0.7.5

    License

    MIT

    Unpacked Size

    87.6 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar