Pie Chart
Compare parts-to-whole relationships with classic and donut layouts.
Install the Popover component using the nocta-ui CLI:
npx @nocta-ui/cli add pie-chartImport the component:
import {
PieChart,
PieChartHeader,
PieChartTitle,
PieChartDescription,
PieChartActions,
PieChartDataTable,
PieChartDataTableContent,
PieChartGraph,
PieChartLegend,
} from '@/components/ui/pie-chart';Examples
Default Pie Chart
Traffic by Channel
Quickly compare inbound traffic sources for the current quarter.
Organic
Direct
Paid
Referral
Social
Donut with labels
Active Accounts by Plan
Donut layout highlights relative share of subscriptions.
Total users
6,730
Starter
Growth
Scale
Enterprise
Header with actions
Campaign Conversions
Compare how each acquisition channel performed this quarter.
Email
Paid Ads
Webinar
Social
Data table summary
Quarterly Revenue by Region
Break down revenue contribution and drill into each market below.
North America
48,80039.3%Europe
31,20025.2%Asia Pacific
27,60022.2%Latin America
16,45013.3%Total revenue$124,050100%
API Reference
PieChart
Prop
Type
PieChartGraph
Prop
Type
PieChartHeader
Prop
Type
PieChartTitle
Prop
Type
PieChartDescription
Prop
Type
PieChartLegend
Prop
Type
PieChartActions
Prop
Type
PieChartDataTable
Prop
Type
PieChartDataTableContent
Prop
Type