Back to Components

Donut Chart

Charts

Ring-style charts with center content for hierarchical data and status displays.

Installation

$npx linspo-ui add donut-chart
Dependencies: lucide-react

Task Status

3 segments

100

Total

Completed
6363.0%
In Progress
2525.0%
Pending
1212.0%

Props

PropTypeDefaultDescription
data*DonutChartDataPoint[]Array of data points with label and value properties.
classNamestringAdditional CSS classes to apply to the container.
titlestringTitle displayed in the chart header.
metricstring"Task Status"Label for the metric being displayed.
showLegendbooleantrueWhether to show the legend alongside the chart.
innerRadiusnumber25Inner radius of the donut hole.
colorsstring[]Array of colors for each segment.