Charts
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.
The RadarChart component is used to visualize data in a radar chart format. It is a wrapper around the Recharts RadarChart component.
Usage
import { RadarChart } from "@sparrowengg/twigs-charts";
const Chart = () => {
return (
<RadarChart
data={[
{ name: "Group A", value: 400 },
{ name: "Group B", value: 300 },
{ name: "Group C", value: 300 },
{ name: "Group D", value: 200 },
]}
series={[
{
name: "name",
color: "#FEA58E",
},
]}
/>
);
};Props
| Prop | Type | Default |
|---|---|---|
radarProps? | RadarProps | (series: Series) => RadarProps | - |
chartProps? | RadarChartProps | - |
containerProps? | React.HTMLProps<HTMLDivElement> | - |
unit? | string | - |
highlightOnLegendHover? | boolean | - |
renderLegendIcon? | (data: Payload) => ReactNode | - |
valueFormatter? | (value, info) => string | null | - |
showTooltip? | boolean | - |
showLegend? | boolean | - |
dataKey? | string | - |
size? | number | - |
height? | string | number | - |
width? | string | number | - |
series | { name: string; dataKey?: string; color: string}[] | - |
data | Record<string, any>[] | - |
Examples
Multi Data
With Legend
With Polar Radius Axis
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.
Sparkline
The Sparkline React component renders compact, inline charts to show data trends at a glance. Lightweight and responsive, it's perfect for dashboards, tables, and condensed visual summaries.