0.0.2 • Published 2 years ago
react-native-customize-donut-chart v0.0.2
react-native-customize-donut-chart
The simple customizable donut chart component for the React Native app supports both iOS and Android.
Screenshots
Demo
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-chartUsage/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 |