Ring Visualization Of Data In React Native – Activity Rings

Author:thecodehunter
Views Total:18 views
Official Page:Go to website
Publish Date:August 12, 2020
License:MIT

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

You Might Be Interested In:

Leave a Reply