noteiqpiechart
Version:
A reusable Piechart component built with Recharts for React (works in Vite and supports React 16.8+)
102 lines (78 loc) • 4.45 kB
Markdown
# noteiqpiechart
A flexible React **PieChart** component built with [Recharts](https://recharts.org/).
Supports multiple pies, custom colors, tooltips, legends, labels, and full customization.
## Installation
```bash
npm install noteiqpiechart
```
or
```bash
yarn add noteiqpiechart
```
## Usage
```javascript
import React from "react";
import PieChart from "noteiqpiechart";
const data = [
{ name: "Group A", value: 400 },
{ name: "Group B", value: 300 },
{ name: "Group C", value: 300 },
{ name: "Group D", value: 200 },
];
const MyPieChart = () => (
<PieChart
data={data}
pies={[
{ dataKey: "value", nameKey: "name", outerRadius: 100, fill: "#8884d8" },
]}
colors={["#0088FE", "#00C49F", "#FFBB28", "#FF8042"]}
showTooltip={true}
showLegend={true}
/>
);
export default MyPieChart;
```
## Props
| Prop | Type | Default | Description |
| -------------- | ------------------ | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `data` | `Array` (required) | `[]` | Data array for the chart (objects with `name`/`value` fields or custom keys) |
| `width` | `string \| number` | `"100%"` | Width of the chart |
| `height` | `number` | `250` | Height of the chart |
| `pies` | `Array<Object>` | `[ { dataKey: "value", nameKey: "name", cx: "50%", cy: "50%", outerRadius: 80, fill: "#8884d8" } ]` | Array of pie configurations (props for `<Pie>` from Recharts) |
| `colors` | `Array<string>` | `[]` | Colors applied to each segment (cyclically assigned if more data points) |
| `showTooltip` | `boolean` | `true` | Show tooltip on hover |
| `tooltipProps` | `Object` | `{}` | Props passed to `<Tooltip>` |
| `showLegend` | `boolean` | `false` | Show chart legend |
| `legendProps` | `Object` | `{}` | Props passed to `<Legend>` |
| `chartProps` | `Object` | `{}` | Extra props passed to `<PieChart>` |
## Features
* Multiple `<Pie>` series (nested or separate)
* Custom segment colors via `colors` prop
* Labels with `<Label>` or `<LabelList>`
* Tooltips and legends
* Full control of Recharts `<Pie>` props (radius, angles, padding, animation, events, etc.)
* Supports interactive slices (`activeIndex`, `activeShape`)
## Example with Nested Pies
```javascript
<PieChart
data={[
{ name: "Group A", value: 400 },
{ name: "Group B", value: 300 },
{ name: "Group C", value: 300 },
{ name: "Group D", value: 200 },
]}
pies={[
{ dataKey: "value", nameKey: "name", outerRadius: 100, fill: "#8884d8" },
{ dataKey: "value", nameKey: "name", innerRadius: 110, outerRadius: 140, fill: "#82ca9d" },
]}
colors={["#0088FE", "#00C49F", "#FFBB28", "#FF8042"]}
showTooltip
showLegend
/>
```