Back to Components

Pie Chart

Charts

Circular charts showing proportional data and percentage breakdowns with smooth hover interactions.

Installation

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

Traffic Sources

4 segments

100

Total

Desktop
4545.0%
Mobile
3030.0%
Tablet
1515.0%
Other
1010.0%

Props

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