Pie Chart

A composable pie chart built with SVG and D3 shapes.

innerRadius

0.2

0.4

0.6

paddingAngle

showTooltip

#Installation

bunx --bun bun add @barefootjs/chart

#Usage

Task Status

Current Sprint

1"use client"23import type { ChartConfig } from "@barefootjs/chart"4import {5  ChartContainer,6  PieChart,7  Pie,8  PieTooltip,9} from "@/components/ui/chart"1011const chartConfig: ChartConfig = {12  done: { label: "Done", color: "hsl(220 14% 30%)" },13  inProgress: { label: "In Progress", color: "hsl(220 14% 50%)" },14  todo: { label: "To Do", color: "hsl(220 14% 70%)" },15  backlog: { label: "Backlog", color: "hsl(220 14% 85%)" },16}1718const chartData = [19  { status: "done", tasks: 42 },20  { status: "inProgress", tasks: 18 },21  { status: "todo", tasks: 25 },22  { status: "backlog", tasks: 15 },23]2425export function MyPieChart() {26  return (27    <ChartContainer config={chartConfig} className="w-full">28      <PieChart data={chartData}>29        <PieTooltip />30        <Pie dataKey="tasks" nameKey="status" />31      </PieChart>32    </ChartContainer>33  )34}

#Examples

#Basic

1"use client"23import type { ChartConfig } from "@barefootjs/chart"45const chartConfig: ChartConfig = {6  done: { label: "Done", color: "hsl(220 14% 30%)" },7  inProgress: { label: "In Progress", color: "hsl(220 14% 50%)" },8  todo: { label: "To Do", color: "hsl(220 14% 70%)" },9  backlog: { label: "Backlog", color: "hsl(220 14% 85%)" },10}1112const chartData = [13  { status: "done", tasks: 42 },14  { status: "inProgress", tasks: 18 },15  { status: "todo", tasks: 25 },16  { status: "backlog", tasks: 15 },17]1819export function PieChartBasicDemo() {20  return (21    <ChartContainer config={chartConfig} className="w-full">22      <PieChart data={chartData}>23        <Pie dataKey="tasks" nameKey="status" />24      </PieChart>25    </ChartContainer>26  )27}

#Donut

Done

In Progress

To Do

Backlog

1"use client"23import type { ChartConfig } from "@barefootjs/chart"45const chartConfig: ChartConfig = {6  done: { label: "Done", color: "hsl(220 14% 30%)" },7  inProgress: { label: "In Progress", color: "hsl(220 14% 50%)" },8  // ...9}1011export function PieChartDonutDemo() {12  return (13    <ChartContainer config={chartConfig} className="w-full">14      <PieChart data={chartData}>15        <PieTooltip />16        <Pie17          dataKey="tasks"18          nameKey="status"19          innerRadius={0.4}20        />21      </PieChart>22    </ChartContainer>23  )24}

#Interactive

Metric:

1"use client"23import { createSignal } from "@barefootjs/dom"4import type { ChartConfig } from "@barefootjs/chart"56const chartConfig: ChartConfig = {7  done: { label: "Done", color: "hsl(220 14% 30%)" },8  inProgress: { label: "In Progress", color: "hsl(220 14% 50%)" },9  // ...10}1112const interactiveData = [13  { status: "done", tasks: 42, points: 68 },14  { status: "inProgress", tasks: 18, points: 32 },15  // ...16]1718export function PieChartInteractiveDemo() {19  const [metric, setMetric] =20    createSignal<"tasks" | "points">("tasks")2122  return (23    <div>24      <div className="flex gap-2 mb-4">25        <button onClick={() => setMetric("tasks")}>26          Tasks27        </button>28        <button onClick={() => setMetric("points")}>29          Points30        </button>31      </div>32      <ChartContainer config={chartConfig} className="w-full">33        <PieChart data={interactiveData}>34          <PieTooltip />35          <Pie36            dataKey={metric()}37            nameKey="status"38            innerRadius={0.3}39            paddingAngle={2}40          />41        </PieChart>42      </ChartContainer>43    </div>44  )45}

#API Reference

PieChart

Prop	Type	Default	Description
data	Record<string, unknown>[]	-	Array of data objects. Each object represents one slice of the pie.

ChartContainer

Prop	Type	Default	Description
config	ChartConfig	-	Maps each data key to a label and color. Sets CSS variables for theming.
className	string	-	Additional CSS class names for the container element.

Pie

Prop	Type	Default	Description
dataKey	string	-	The key in the data objects to use for slice values.
nameKey	string	name	The key in the data objects to use for slice names (matches config keys).
innerRadius	number	0	Inner radius ratio (0-1). Set > 0 for a donut chart.
outerRadius	number	0.8	Outer radius ratio (0-1).
paddingAngle	number	0	Padding angle between slices in degrees.

PieTooltip

Prop	Type	Default	Description
labelFormatter	(label: string) => string	-	Custom formatter for the tooltip label.