Ring Visualization Of Data In React Native – Activity Rings

A library that provides customizable ring visualization of data, and you can also enable legends for chart representation.

Install & Import:

# Yarn
$ yarn add react-native-activity-rings

# NPM
$ npm i react-native-activity-rings --save
import ActivityRings from "react-native-activity-rings";

Basic Usage:

const BasicExample = () => {
      const activityData = [ 
        { value: 0.8 }, 
        { value: 0.7 }, 
        { value: 0.5 }
      ];
      const activityConfig = { 
        width: 250,  
        height: 250
      };
      return (
        <View>
          <ActivityRings data={activityData} config={activityConfig} /> 
        </View>
      );
}

All possible configs:

const activityConfig = { 
      width: 250,  
      height: 250,
      radius: 32,
      ringSize: 16
};

Preview:

Ring Visualization Of Data In React Native - Activity Rings

Download Details:

Author: thecodehunter

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/thecodehunter/react-native-activity-rings

License: MIT

You Might Be Interested In:

Add Comment