How to use react-native-chart-tnbt

Getting Started

Note: I am a newbie in React Native. Here is my frist package which I publish to npm. If it make you waste your time, please dont blame me. I hope to disscuss about any the problem with you. Thank you !!!

This package is for Android

Test

You can clone this repo to test package.

https://github.com/tiennguyen12g/react-native-chart-tnbt.git

npx react-native start

In the App.tsx, I have some data for test, you can use it if need.

Installation using npm

npm i react-native-chart-tnbt

1. PieChart

Import to your component

import {PieChart} from "react-native-chart-tnbt"

if typescript gives the error, you can try to create file name react-native-chart-tnbt.d.ts

// file react-native-chart-tnbt.d.ts
declare module "react-native-chart-tnbt"

typeNo = 1

typeNo = 2

annotations

Available props

interface PieChartProps {
   typeNo?: number; // default: 1 or option 2
   data: DataInput[]; 
   duration?: number; // default: 2000ms
   mainPie?: {
     size?: number; // default: 280
     strokeWidth?: number; // default: 15
   };
   decorPie?: {
     sizeDecorCircular: number;
     strokeWidthDecorCircular: number;
     seperateSlice: boolean;
     opacityDecorCircular: number; // Value 0-1
     annotation?: boolean;
     logoData?: CryptoLogoPNG;
     logoSize?: number;
     colorCustomList?: string[]
   };
   animations?: {
     clockwiseDirection: string; // option "clockwise" or 'counter_clockwise'
   };
}

Table list props

Name	Type	Default	Description
typyNo	number	1	Type of pie chart
data	DataInput[]	no	Data to pass to the pie chart
duration	number	2000	Time for animation to run
mainPie			Parameter to create the main circle chart
size	number	280	The size of the view box
strokeWidth	number	15	The size of the stroke for the circle
decorPie			Parameter to create a second circle for decorating the main circle
sizeDecorCircular	number	150	The size of the second circle
strokeWidthDecorCircular	number	25	The size of the stroke for the second circle
separateSlice	boolean	true	Creates clear lines to cut graph pieces
opacityDecorCircular	number	0.5	Adds opacity for the circle decor
annotation	boolean	false	Adds a note for each fund
logoSize	number	35	The size for inserting a logo in annotations or each slice
colorCustomList	string[]	see below	The size for inserting a logo in annotations or each slice
clockwiseDirection	string	clockwise or counter_clockwise	Direction of rotation of the circle

interface DataInput {
   title: string;
   value: number;
}

How to use

   Example: 
      const dataInput = [
      {
        title: 'Gold',
        value: 23900.52,
      },
      {
        title: 'USD',
        value: 11100,
      }]
      <YourComponent>
         <PieChart
          typeNo={1}
          data={dataInput}
          duration={2000}
          mainPie={
            {
               size: 280, 
               strokeWidth: 15
            }
         }
          animations={{
            clockwiseDirection: 'clockwise', // counter_clockwise or clockwise
          }}
          decorPie={{
            sizeDecorCircular: 150,
            strokeWidthDecorCircular: 25,
            seperateSlice: true,
            opacityDecorCircular: 0.5,
            annotation: true,
          }}
        />
      </YourComponent>

Declare logo like this component

interface CryptoLogos {
 [key: string]: {uri: string};
}
const BTC = require('./PNG/btc.png');
const ETH = require('./PNG/eth.png');

  const Crypto_Logo_PNG: CryptoLogos = {
   "BTC": BTC,
   "ETH": ETH,
  };

export default Crypto_Logo_PNG;

** Note: The key for the logo must to the same with the title.
Example: 
const dataInput = [{
   title: 'BTC',
   value: 23900.52,
}];
const Crypto_Logo_PNG: CryptoLogos = {
   "BTC": BTC,
};
The title "BTC" have to equal the key of object logo "BTC" in this case.

Add your favorite colors

// default color
const colorCustomList = [
   'rgb(244,62,61)',
   'rgb(254,165,61)',
   'rgb(128,22,80)',
   'rgb(131,242,58)',
   'rgb(59,95,255)',
   'rgb(252,60,222)',
   'rgb(72,220,236)',
];
If you not pass this data or your data is large, the code will auto create random color.

I will try to build more type of chart.

Congratulations! 🎉

You've successfully run and modified this package. 🥳