The React Pie Chart component is a highly customizable and interactive charting solution designed for visualizing data in a circular pie chart format. The component supports animated arcs, hover interactions, and tooltips, making it perfect for dashboards, reports, and data visualization applications.
npm install pie-chart-react.js
# or
yarn add pie-chart-react.js
- Animated Arcs: Smoothly animates the pie chart segments on load.
- Hover Tooltips: Displays additional information when hovering over chart segments.
- Customizable Appearance: Configure colors, labels, and chart size.
- Accessible: Includes ARIA roles and labels for accessibility.
- Flexible Header and Footer: Accepts both text and JSX elements to allow custom headers and footers.
The TreeProps
interface defines the properties for the Tree
component. Below is a detailed description of each property.
Property | Type | Description |
---|---|---|
chartConfig |
Array<Object> |
An array of objects defining the data for each segment of the pie chart. Each object includes value, color, and label. |
size |
number |
Defines the size of the pie chart in pixels (defaults to 200px). |
header |
string or JSX
|
(Optional) A class name to apply to each tree item. |
footer |
string or JSX
|
(Optional) A class name to apply to each sub-tree container. |
- ./App.tsx
import React from "react";
import { PieChart } from "react.js-pie-chart";
const chartConfig = [
{ value: 30, color: "#FF5733", label: "Category A" },
{ value: 20, color: "#33FF57", label: "Category B" },
{ value: 50, color: "#3357FF", label: "Category C" },
];
function App() {
return (
<div>
<PieChart
chartConfig={chartConfig}
size={300}
header={"Sales Distribution"}
footer={"Data represents sales figures for Q1 2024."}
/>
</div>
);
}
export default App;
{
value: number; // The numeric value that determines the size of the arc
color: string; // The color of the arc
label: string; // The label that appears in the tooltip when hovered
}
const chartConfig = [
{ value: 25, color: "#4CAF50", label: "Product A" },
{ value: 35, color: "#FF9800", label: "Product B" },
{ value: 40, color: "#2196F3", label: "Product C" },
];
<PieChart
chartConfig={chartConfig}
header={<h2 className="text-lg font-semibold">Product Sales</h2>}
footer={<p className="text-sm text-gray-500">Data from Q1 2024</p>}
/>
This component is designed with accessibility in mind, supporting ARIA labels and roles. The chart’s container includes role="img" and aria-label attributes for screen readers, making it accessible for all users.
The React Pie Chart component provides an easy-to-use, flexible solution for displaying data in a visually appealing pie chart. It offers interactivity, customization, and performance, making it an excellent choice for data-driven React applications.
This project is licensed under the MIT License.