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