pie-chart-react.js

React Pie Chart Component

Description:

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.

Installation:

npm install pie-chart-react.js
# or
yarn add pie-chart-react.js

Key Features:

• 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.

Usage:

Props

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.

Example

• ./App.tsx

import React from "react";
import { PieChart } from "pie-chart-react.js";

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;

chartConfig Object Structure:

{
  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
}

Props Example:

const chartConfig = [
  { value: 25, color: "#4CAF50", label: "Product A" },
  { value: 35, color: "#FF9800", label: "Product B" },
  { value: 40, color: "#2196F3", label: "Product C" },
];

Customizing Header and Footer:

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

Accessibility:

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.

Conclusion:

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.

License:

This project is licensed under the MIT License.