NOCTA UI

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-chart

Import 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

Line Chart

Track evolving metrics and dynamic changes using clear, continuous line plots.

Table

Fully accessible data table powered by TanStack Table and Ariakit composites.

On this page

Examples
Default Pie Chart
Donut with labels
Header with actions
Data table summary
API Reference
PieChart
PieChartGraph
PieChartHeader
PieChartTitle
PieChartDescription
PieChartLegend
PieChartActions
PieChartDataTable
PieChartDataTableContent