react-pie-chart-easy/README.md

A simple and customizable React pie chart component. React pie chart component which is very easy to use and have multiple configuration options for more customization.

# React Pie Chart Easy

The `React Pie Chart` simple and customizable React pie chart component.  React pie chart component which is very easy to use and have multiple configuration options for more customization.

## Demo

[Click here for live demo](https://stackblitz.com/edit/react-pie-chart-easy-npm-package?file=src%2FApp.jsx)

## Usage

```jsx
import ReactPieChart from 'react-pie-chart-easy';

const chartData = [
  { title: 'One', value: 10, color: '#E38627', tooltip: 'I am one' },
  { title: 'Two', value: 15, color: '#C13C37', tooltip: 'I am two' },
  { title: 'Three', value: 20, color: '#6A2135', tooltip: 'I am three' },
];

const showLegend = false

const App = () => (
  <ReactPieChart
    data={chartData}
    backgroundColor={['#E38627', '#C13C37', '#6A2135']}
    borderColor={['#FFF', '#FFF', '#FFF']}
    radius={90}
    animate="yes"
    zoom={true}
    rotate={45}
    showLegend={showLegend}
  />
);

export default App;

```
## Props

- `data`: Array of data objects (`title`, `value`, `color`, `tooltip`).
- `backgroundColor`: Array of background colors for each slice (optional).
- `borderColor`: Array of border colors for each slice (optional).
- `radius`: The radius of the pie chart (default: `100`) in % of the canvas area.
- `cutout`: The inner donut circle size (default: `0`).
- `animate`: Whether to animate the chart (`"yes"` or `"no"`).
- `zoom`: Whether to enable zoom and pan functionality (boolean).
- `rotate`: Rotation angle of the chart (default: `0`). 
- `showLegend`: Whether to show the chart legend (summary) (default: `true`).