Skip to content

Add Donut/Ring Progress Chart component #47

Description

@yuribodo

Description

While PieChart supports `variant: 'donut'`, a dedicated ring progress indicator (single value 0-100%) is a distinct use case for KPI dashboards — think fitness trackers, completion metrics, goal progress displays.

Features

  • Single value 0-100% with smooth animation
  • Customizable ring thickness
  • Color gradient along the ring
  • Center content (custom React node — value, icon, label)
  • Multiple concentric rings for multi-metric display
  • Configurable start angle

Proposed API

```tsx
<RingProgress
value={73}
max={100}
thickness={12}
color="#3b82f6"
centerContent={73%}
/>
```

Tasks

  • Create `src/components/charts/ring-progress/index.tsx`
  • Implement animated SVG arc with configurable thickness
  • Support center content slot
  • Support multiple concentric rings
  • Add documentation page
  • Register in CLI
  • Add tests and Storybook story

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2: nice-to-haveNice to have - polish and advanced featuresnew-chartNew chart type component

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions