Donut Chart
The DonutChart React component visualizes proportional data with an interactive, circular design. Perfect for showing parts of a whole, it supports labels, tooltips, and custom inner radius styling.
The DonutChart component is used to visualize data in a donut chart format. It is a wrapper around the Recharts PieChart component.
Usage
import { DonutChart } from "@sparrowengg/twigs-charts";
const Chart = () => {
return (
<DonutChart
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 | - |
showActiveValueInCenter? | boolean | - |
highlightOnLegendHover? | boolean | - |
defaultActiveIndex? | number | - |
animationDuration? | number | - |
renderLegendIcon? | (data: Payload) => ReactNode | - |
valueFormatter? | (value, info) => string | null | - |
paddingAngle? | number | 0 |
thickness? | number | 20 |
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
Gauge Chart
In the above example, showLabel is set to false to hide the labels on the chart. paddingAngle is set to 1 to control the spacing between individual sectors. showActiveValueInCenter is set to false to hide the active value in the center of the chart. pieProps is used to control the start and end angles of the chart. middleLabel is used to add a custom label at the center of the chart.
With Value Formatter
With Custom Legend Icon
Composite Chart
The CompositeChart React component combines multiple chart types—line, area, and bar—into a single, interactive visualization. Ideal for complex data comparisons, it offers full customization and responsive design.
Heatmap
The Heatmap React component displays high-density data using a color-coded grid, making patterns and correlations easy to spot. Fully customizable and responsive, it's ideal for analytics and performance monitoring.