react-native-customize-donut-chart

The simple customizable donut chart component for the React Native app supports both iOS and Android.

Screenshots

Demo

https://github.com/dasuntn/react-native-customize-donut-chart/assets/15120571/31ad57cd-64ee-4573-81a9-45a2153d4cb5

Features

• Cross platform
• Donut slice is clickable
• Custom colors can be passed
• Add any component to center of the donut

Installation

Required dependencies

• react
• react-native
• react-native-svg (https://www.npmjs.com/package/react-native-svg)

Install react-native-customize-donut-chart with npm

  npm install react-native-customize-donut-chart

Usage/Examples

import React from "react";
import DonutChart from "react-native-customize-donut-chart";

const exampleData = [{ value: 10 }, { value: 20 }, { value: 40 }];

const ChartComponent = () => {
  return <DonutChart data={exampleData} />;
};

export default ChartComponent;

Props

| Property | Type | Required | |-----------|------|----------| | data | {value: number}[] | yes | | size | number | no | | sliceColors | string[] | no | | centerCircle | { isEnable: boolean; color: string } | no | | percentage | { visible: boolean; textStyle?: { color: string } } | no | | onSlicePress | function | no |