React Native Polygon Chart

Customizable and animatable polygon chart.

Getting started

Installation

React Native CLI

npm install react-native-svg @digieggs/rn-polygon-chart

or

yarn add react-native-svg @digieggs/rn-polygon-chart

Expo CLI

expo install react-native-svg
expo install @digieggs/rn-polygon-chart

Additional steps

• iOS

In your project's ios directory

pod install

• Android

No additional steps needed

Usage

Import

import {
  Hexagon,
  Pentagon,
  Tetragon,
  Triangle,
} from 'react-native-polygon-chart';

Usage

<Triangle
  poles= {[
    {
      score: 0.8,
      innerStroke: {opacity: 1, stroke: "#30d158", strokeWidth: 2},
      stroke: {opacity: 1, stroke: "#0a84ff"},
    },
    {
      score: 0.6,
      innerStroke: {opacity: 1, stroke: "#30d158", strokeWidth: 2},
      stroke: {opacity: 1, stroke: "#0a84ff"},
    },
    {
      score: 0.9,
      innerStroke: {opacity: 1, stroke: "#30d158", strokeWidth: 2},
      stroke: {opacity: 1, stroke: "#0a84ff"},
    },
  ]}
  innerColor="#30d158"
  innerOpacity={0.2}
  outerStroke={{stroke: green, opacity: 1, strokeWidth: 1}}
  animation={{delay: 0, duration: 500}}
  style={styles.triangle}
/>

...

const styles = StyleSheet.create({
  triangle: {width: 300, height: 600},
});

You can use more poles for other polygons or polygon will render as if remaining scores are zero.

Props

• animation
• innerColor
• innerOpacity
• outerStroke
• poles
• style

animation

| Type | Required | Description | | --------------------------------------- | -------- | ------------------------------------------------------------------ | | IAnimationParams | no | Object that specifies the details of the polygon render animation. |

innerColor

| Type | Required | Description | | -------- | -------- | -------------------------- | | string | no | Fill color of the polygon. |

innerOpacity

| Type | Required | Description | | -------- | -------- | ---------------------------- | | number | no | Fill opacity of the polygon. |

outerStroke

| Type | Required | Description | | --------------------------- | -------- | -------------------------------------- | | ILineProps | no | Props for outer stroke of the polygon. |

poles

| Type | Required | Description | | ------------------------ | -------- | ---------------------------------------- | | Array<IPole> | yes | An array of details to draw the polygon. |

style

| Type | Required | Description | | ----------- | -------- | --------------------------------- | | ViewStyle | no | Style of the polygon's container. |

Essential types and interfaces

ILineProps

| Props | Type | Required | | ------------- | -------- | -------- | | stroke | string | no | | strokeWidth | number | no | | opacity | number | no |

• The stroke prop is being used for line color.

IPole

| Props | Type | Required | | ------------- | ----------------- | -------- | | score | number | yes | | info | IInfo | no | | stroke | ILineProps | no | | innerStroke | ILineProps | no |

• The point prop is a multiplier between 0 and 1 determines the vertex distance from the center of the polygon.

IInfo

| Props | Type | Required | | ----------- | --------------------- | -------- | | text | string | no | | textStyle | TextStyle | no | | style | ViewStyle | no | | onPress | () => void | no | | offset | IOffset | no |

• The offset prop determines the absolute x and y offsets of info element.

IOffset

| Props | Type | Required | | ----- | -------- | -------- | | x | number | yes | | y | number | yes |

IAnimationParams

| Props | Type | Required | | ---------- | ---------------- | -------- | | delay | number | no | | duration | number | no | | easing | EasingFunction | no |