Pie Chart

A pie chart for proportions with donut, label, and legend display modes.

Traffic Sources

Visitors by acquisition channel

Usage in Gaia

Used for proportional breakdowns — share of voice, traffic by source, allocation by category — wherever the parts-of-a-whole story matters more than absolute values.

Features

Three Modes - donut (centered total), legend (slice list), label (inline labels)
Centered Total - Donut mode shows the summed value in the middle
Theme-Aware Labels - Inline pie labels inherit the foreground color
Custom Palette - Built-in PIE_COLORS palette, customizable per slice via the chart config
Tooltip - Hover tooltip with slice name and value
Auto-Width - Card width scales to data point count

Installation

npx shadcn@latest add https://ui.heygaia.io/r/pie-chart.json

Usage

import { PieChart } from "@/components/ui/pie-chart";
 
const data = [
  { source: "Direct", visitors: 1240 },
  { source: "Search", visitors: 980 },
  { source: "Social", visitors: 620 },
];
 
export default function Example() {
  return (
    <PieChart
      data={data}
      nameKey="source"
      valueKey="visitors"
      title="Traffic Sources"
    />
  );
}

Props

PieChart

Prop	Type	Default	Description
data	Array<Record<string, string \| number>>	-	Chart data rows
nameKey	string	-	Key for slice name
valueKey	string	-	Key for numeric slice value
title	string	-	Card title
description	string	-	Card description
footer	string	-	Optional footer text
mode	"donut" \| "legend" \| "label"	"donut"	Display mode

Notification Card Pricing Card

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.