0.0.2 • Published 5 months 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-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 |