Pie Chart

<PieChart />TailwindCSS Modules

Visualize category shares and composition in dashboards with responsive pie and donut charts.

InstallationColoxo CLI
npx coloxo add pie-chart --style coloxo-css
ES Module ImportPlayground / npm package
import { PieChart } from '@coloxo/ui';

Understand the mix. Compare shares. See the whole picture.

1. Pie chart examples

Explore pie and donut views of the same traffic sources. All figures are sample data.

June · 1,440 visitors · Sample data

Pie Chart - Default

Visitors by acquisition source

Category shares of the total. Focus a slice to read its value. Values are also provided in the accompanying data table.
  • Direct
  • Search
  • Social
  • Referral
Pie Chart - Default — data
CategoryValueShare
Direct42029.2%
Search58040.3%
Social26018.1%
Referral18012.5%

Pie Chart - Labels

Show each source's percentage share

Category shares of the total. Focus a slice to read its value. Values are also provided in the accompanying data table.
  • Direct
  • Search
  • Social
  • Referral
Pie Chart - Labels — data
CategoryValueShare
Direct42029.2%
Search58040.3%
Social26018.1%
Referral18012.5%

Pie Chart - Donut

A compact view of category composition

Category shares of the total. Focus a slice to read its value. Values are also provided in the accompanying data table.
  • Direct
  • Search
  • Social
  • Referral
Pie Chart - Donut — data
CategoryValueShare
Direct42029.2%
Search58040.3%
Social26018.1%
Referral18012.5%

Pie Chart - Donut with total

Keep the total visible alongside the mix

Category shares of the total. Focus a slice to read its value. Values are also provided in the accompanying data table.
  • Direct
  • Search
  • Social
  • Referral
Pie Chart - Donut with total — data
CategoryValueShare
Direct42029.2%
Search58040.3%
Social26018.1%
Referral18012.5%

2. Interactive configurator

Width100%
Height280px

Width is relative to the preview. Height sets the plot area in pixels; the circle scales to fit.

Visual Render Canvas
Category shares of the total. Focus a slice to read its value. Values are also provided in the accompanying data table.
  • Direct
  • Search
  • Social
  • Referral
Traffic sources — data
CategoryValueShare
Direct42029.2%
Search58040.3%
Social26018.1%
Referral18012.5%
tsx
<PieChart  label="Traffic sources"  data={data}  innerRadius={0}  height={280}  style={{ width: "100%" }}  showLegend={true}  showLabels={false}/>

3. Enterprise layout compositions

Combine category shares with summary metrics for revenue reviews and budget planning. All figures below are sample data.

Revenue by plan

Subscription revenue mix · June

Monthly revenue
$210k
Enterprise share
60%
Subscription plans
3
Category shares of the total. Focus a slice to read its value. Values are also provided in the accompanying data table.
  • Enterprise
  • Business
  • Starter
Monthly revenue by subscription plan — data
CategoryValueShare
Enterprise$126k60.0%
Business$54k25.7%
Starter$30k14.3%

Department budget allocation

Quarterly operating budget · Sample allocation

Total budget
$100k
Engineering allocation
45%
Category shares of the total. Focus a slice to read its value. Values are also provided in the accompanying data table.
  • Engineering
  • Sales
  • Operations
  • Support
Quarterly budget by department — data
CategoryValueShare
Engineering$45k45.0%
Sales$25k25.0%
Operations$20k20.0%
Support$10k10.0%
Revenue composition
import { Card, PieChart, Statistic } from "@coloxo/ui";const data = [  {    "label": "Enterprise",    "value": 126  },  {    "label": "Business",    "value": 54  },  {    "label": "Starter",    "value": 30  }];<Card variant="default" className="p-6">  <Statistic label="Monthly revenue" value="210" prefix="$" suffix="k" />  <PieChart    label="Monthly revenue by subscription plan"    data={data}    innerRadius={60}    centerLabel="Revenue"    valueFormatter={(value) => `$${value}k`}  /></Card>

4. Actions & composition

Pair the chart with reporting period filters, a visible data table, and CSV export. Each action uses the selected period.

Traffic source analytics

Acquisition mix · Sample data

Total visitors in selected period
1,440
Category shares of the total. Focus a slice to read its value. Values are also provided in the accompanying data table.
  • Direct
  • Search
  • Social
  • Referral
Traffic sources for selected reporting period — data
CategoryValueShare
Direct42029.2%
Search58040.3%
Social26018.1%
Referral18012.5%

5. Dark theme

Category shares of the total. Focus a slice to read its value. Values are also provided in the accompanying data table.
  • Direct
  • Search
  • Social
  • Referral
Traffic sources in dark theme — data
CategoryValueShare
Direct42029.2%
Search58040.3%
Social26018.1%
Referral18012.5%

Accessibility

Each chart has an accessible name, keyboard-focusable slices, descriptive values and percentages, and a screen-reader data table.

Hover or focus a slice to see its category, formatted value, and percentage in the shared ChartTooltip. Press Escape to dismiss it. Use descriptive category labels and retain the legend or data table so color is not the only way to identify a slice. Use a small number of categories. Empty datasets and datasets without positive values display a clear empty state.

Props

NameTypeDefaultDescription
dataPieChartDatum[]—Category label, numeric value, and optional CSS color. Negative, non-finite, and zero values do not create slices.
labelstring—Required accessible chart name.
innerRadiusnumber0Hole radius as a percentage of the outer radius, clamped to 0–80. Use 60 for a donut.
heightnumber280Chart height in pixels, minimum 160. The circular plot scales to fit the available width.
showLegendbooleantrueDisplay category labels with color markers.
showLabelsbooleanfalseDisplay rounded percentages on slices of at least 6%. Exact shares remain in descriptions and the data table.
centerLabelstring—Show the formatted total and a caption inside a donut.
valueFormatter(value: number) => string—Format slice values, the donut total, and accessible data.
className / stylestring / CSSProperties—Customize the chart container, including width.