noteiqpiechart

A flexible React PieChart component built with Recharts. Supports multiple pies, custom colors, tooltips, legends, labels, and full customization.

Installation

npm install noteiqpiechart

or

yarn add noteiqpiechart

Usage

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

<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
/>