@digieggs/rn-polygon-chart v1.0.5

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

innerColor

innerOpacity

outerStroke

poles

style

Essential types and interfaces

ILineProps

• The stroke prop is being used for line color.

IPole

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

IInfo

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

IOffset

IAnimationParams