Donut ChartPro
Pro
A circular chart similar to a pie chart, with a central cut-out, used to show proportional data.
Donut Chart Playground
Donut Chart Playground
Preview
Code
Google Ads
Direct Traffic
Organic Search
Referral Links
Social Media
Email Campaigns
Controls
Segments:
2
3
4
5
6
Track:
Legend:
Center Content:
Semi Donut Chart Playground
Semi Donut Chart Playground
Preview
Code
Mobile
Desktop
Tablet
Smart TV
Wearable
Other
Controls
Segments:
1
2
3
4
5
6
Track:
Legend:
Center Content:
Installation
You can add the donut chart component to your project manually:
1
Install the following dependencies:
npm
pnpm
yarn
bun
npm install class-variance-authority clsx tailwind-merge recharts2
Copy and paste the following code into your project.
Loading...
3
Update the import paths to match your project setup.
Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.
Basic Usage
A simple donut chart with auto-generated legend:
import { VersaDonutChart } from '@versaui/ui/components/Charts';
const data = [
{ name: 'Revenue', value: 375 },
{ name: 'Expenses', value: 208 },
{ name: 'Profit', value: 167 },
];
<VersaDonutChart data={data} />Multi-Segment
Supports up to 6 segments using brand and state color tokens:
<VersaDonutChart
data={[
{ name: 'Segment 1', value: 375 },
{ name: 'Segment 2', value: 208 },
{ name: 'Segment 3', value: 167 },
{ name: 'Segment 4', value: 125 },
{ name: 'Segment 5', value: 83 },
{ name: 'Segment 6', value: 42 },
]}
/>Explicit Colors
Assign specific color tokens to segments:
<VersaDonutChart
data={[
{ name: 'Active', value: 800, color: 'primary' },
{ name: 'Errors', value: 120, color: 'error' },
{ name: 'Warnings', value: 80, color: 'warning' },
]}
/>Center Content
Render custom content in the donut center using the centerContent render prop:
<VersaDonutChart
data={data}
centerContent={(total) => (
<div className="text-center">
<div className="text-h5">{total.toLocaleString()}</div>
<div className="text-b5 text-subtle">Total</div>
</div>
)}
/>Semi Donut Chart
A half-circle donut for gauges and compact distribution views:
import { VersaSemiDonutChart } from '@versaui/ui/components/Charts';
<VersaSemiDonutChart
data={[
{ name: 'Completed', value: 416 },
{ name: 'Remaining', value: 250 },
]}
/>Track Mode
Show a gray background track for gauge-style "out of 100" displays:
<VersaSemiDonutChart
data={[
{ name: 'Progress', value: 667 },
]}
showTrack
/>Legend Configuration
{/* Hide legend */}
<VersaDonutChart data={data} legend={false} />
{/* Legend auto-switches to stacked for ≤3 segments, wrapped grid for 4+ */}Loading & Empty States
{/* Loading state */}
<ChartContainer size="large" loading>
<VersaDonutChart data={[]} />
</ChartContainer>
{/* Empty state — shows "No data available" message */}
<VersaDonutChart data={[]} />Accessibility
- Screen readers: Chart uses proper ARIA roles and labels
- Keyboard navigation: Legend items are focusable and toggleable with
Enter/Space - Reduced motion: Animations disabled when
prefers-reduced-motion: reduceis set - Tooltips: Announced via
role="tooltip"with proper semantics
VersaDonutChart Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | DonutSegmentData[] | — | Required. Array of segment objects with name and value. |
size | 'large' | 'medium' | 'large' | Chart size variant. |
legend | boolean | true | Show auto-generated card-style legend. |
showTrack | boolean | false | Show a gray background track arc (full 360°). |
total | number | — | Explicit total for 100% of the track. When provided and greater than the data sum, segments fill proportionally. Used with showTrack. |
centerContent | (total: number) => ReactNode | — | Render prop for custom center content. |
className | string | '' | Additional CSS classes. |
VersaSemiDonutChart Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | DonutSegmentData[] | — | Required. Array of segment objects with name and value. |
size | 'large' | 'medium' | 'large' | Chart size variant. |
legend | boolean | true | Show auto-generated card-style legend. |
showTrack | boolean | false | Show gray background track (gauge mode). |
total | number | — | Explicit total for 100% of the track. When provided and greater than the data sum, segments fill proportionally. Used with showTrack. |
centerContent | (total: number) => ReactNode | — | Render prop for custom center content. |
className | string | '' | Additional CSS classes. |
DonutSegmentData
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Required. Segment label shown in legend and tooltip. |
value | number | — | Required. Numeric value for this segment. |
color | 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'error' | 'warning' | auto | Color token. Auto-assigned from palette if omitted. |