Pie Chart
The PieChart React component presents data as proportional slices of a circle, ideal for showing percentage breakdowns. It includes label support, tooltips, and interactive hover effects.
The PieChart component is used to visualize data in a pie chart format. It is a wrapper around the Recharts PieChart component.
Usage
import { PieChart } from "@sparrowengg/twigs-charts";
const Chart = () => {
return (
<PieChart
data={[
{
name: "Jan",
value: 4000,
color: "$list.0",
},
{
name: "Feb",
value: 3000,
color: "$list.1",
},
{
name: "Mar",
value: 2000,
color: "$list.2",
},
{
name: "Apr",
value: 2780,
color: "$list.3",
}
]}
size={200}
/>
);
};Props
| Prop | Type | Default |
|---|---|---|
cellProps? | CellProps | (cellData: DonutChartData) => ComponentProps<typeof Cell> | - |
pieProps? | PieProps | - |
chartProps? | PieChartProps | - |
containerProps? | React.HTMLProps<HTMLDivElement> | - |
unit? | string | - |
highlightOnLegendHover? | boolean | - |
defaultActiveIndex? | number | - |
animationDuration? | number | - |
renderLegendIcon? | (data: Payload) => ReactNode | - |
valueFormatter? | (value, info) => string | null | - |
paddingAngle? | number | 0 |
showTooltip? | boolean | true |
showLegend? | boolean | true |
showLabelLine? | boolean | false |
showLabel? | boolean | false |
size? | number | 200 |
height? | string | number | 300 |
width? | string | number | 100% |
data | Array<{ name: string, value: number, color: string }> | [] |
Examples
Default Active Value
A value can be set as default active value by setting the defaultActiveIndex prop.
With Unit
A unit can be set by setting the unit prop.
With Value Formatter
With Custom Legend Icon
Line Chart
The LineChart React component renders smooth, responsive line charts to track trends over time. It supports multiple data series, tooltips, and interactive features for clear and dynamic data visualization.
Radar Chart
The RadarChart React component visualizes multi-dimensional data on a circular grid, making it great for performance comparisons or skill assessments. Supports customizable axes, labels, and tooltips.