donut-chart

What problem does it solve?

DonutChart provides a clear, visual way to represent proportional data as circular segments, making it easy to compare parts of a whole at a glance.

Core Features & Use Cases

• Data format: takes a numeric array where each value corresponds to a segment.
• Categories: maps each segment to a label and color for meaningful legend and storytelling.
• Visualization options: supports full donuts and half-donut gauges, adjustable radius and arc width, and legend positioning.
• Use cases: budget breakdowns, progress indicators, and dashboard widgets where part-to-whole relationships must be shown quickly.

Quick Start

Render a DonutChart with data [35, 25, 20, 15, 5] and a categories map like { organic: { name: 'Organic', color: '#3b82f6' }, direct: { name: 'Direct', color: '#10b981' }, referral: { name: 'Referral', color: '#f59e0b' }, social: { name: 'Social', color: '#8b5cf6' }, other: { name: 'Other', color: '#6b7280' } }, and set radius to 120 and arcWidth to 40.