A library that provides customizable ring visualization of data and legends for chart representation.

---

Installation

yarn add react-activity-rings  

Example

import ActivityRings, {ActivityRingsConfig, ActivityRingsData} from "react-activity-rings"

const BasicExample = () => {

 const activityData: ActivityRingsData = [ 
   { value: 0.8 }, 
   { value: 0.6 }, 
   { value: 0.2 }
 ]

 const activityConfig: ActivityRingsConfig = { 
   width: 150,  
   height: 150
 }

 return (
  <div>
    <ActivityRings data={activityData} config={activityConfig} /> 
  </div>
  )
}

Activity Data

Define an array of objects with the data for each ring:

const activityData: ActivityRingsData = [
  {
    value: 0.8, // ring will use color from theme
  },
  {
    label: "ACTIVITY",
    value: 0.6,
    color: "#cb5f18",
  },
  {
    label: "RINGS",
    value: 0.2,
    color: "#86040f",
    backgroundColor: "#cccccc"
  }
];

Property	Type	Description
value	Number	The value used as percentage to render for each ring. value of 1 represents 100% so this means 0.2 represents 20%. Values > 1 will not be considered.
label?	string	Label will be used when enabling legend flag alongside the percentage value.
color?	string	Hex representation of the color code for the ring. Only compatible with hex values (for now).
backgroundColor?	string	Hex representation of the background color code for the ring. Only compatible with hex values (for now). The background color will get 30% opacity.

Configuration

Config options for the ring pie:

const activityConfig = {
  width: 150,
  height: 150,
  radius: 32,
  ringSize: 14,
}

Property	Type	Description
width	Number	The width of the activity ring component.
height	Number	The height of the activity ring component.
radius?	Number	Defines the radius of the complete pie.
ringSize?	Number	Defines the size of each ring in px.

Legend

Legend is disabled by default.

Enable legend on the right side of the rings, this is ideal for chart representation. Notice that legend will use the label value you defined for every ring inside the data object.

You can optionally provide a Title for the legends

<ActivityRings legend={true} legendTitle={"Awesome"} data={activityData} config={activityConfig} />

Themes

By default this component comes with Dark theme and will work best of course with dark backgrounds. The library also provides a theme for light backgrounds and yes it's pretty obviously named Light theme.

<ActivityRings data={activityData} config={activityConfig} />

Please notice that dark is the default theme so you don't actually need to specify it.

<ActivityRings theme={"light"} data={activityData} config={activityConfig} />

Not yet supported

1. Visualize more than 100 percentage on a ring like the Apple Watch does.