Photonix

Pie Chart

Proportional data distribution using PieChart.

Preview

Usage
"use client";

import { Cell, ChartContainer, ChartTooltip, Pie, PieChart, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Design', value: 34 },
    { name: 'Engineering', value: 46 },
    { name: 'Growth', value: 20 },
];

const config: ChartConfig = {
    Design: { label: 'Design', color: 'var(--chart-1)' },
    Engineering: { label: 'Engineering', color: 'var(--chart-2)' },
    Growth: { label: 'Growth', color: 'var(--chart-3)' },
};

export default function PieChartBasicExample() {
    return (
        <ChartContainer config={config} minHeight={260}>
            <PieChart>
                <Pie data={data} dataKey="value" nameKey="name" innerRadius={56} outerRadius={92} paddingAngle={4} cornerRadius={6}>
                    {data.map((entry) => (
                        <Cell key={entry.name} fill={config[entry.name]?.color} />
                    ))}
                </Pie>
                <ChartTooltip />
            </PieChart>
        </ChartContainer>
    );
}

Component API

PieChart

Prop
Type
Default
Description
children
ReactElement
-
Chart components (Pie, Tooltip, Legend, etc).

Pie

Prop
Type
Default
Description
data
any[]
-
The source data array.
dataKey
string
-
The key of data to be displayed.
cx
string | number
50%
The x-coordinate of center.
cy
string | number
50%
The y-coordinate of center.
innerRadius
number
0
The inner radius of pie.
outerRadius
number
80%
The outer radius of pie.
paddingAngle
number
0
The angle between segments.
cornerRadius
number
0
Rounds segment ends. Use 6 to match the standard Photonix donut style.

Variants

Donut chart

Add innerRadius to create a compact donut chart.

Donut chart
"use client";

import { Cell, ChartContainer, ChartLegend, ChartTooltip, Pie, PieChart, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Desktop', value: 420, fill: 'var(--chart-1)' },
    { name: 'Mobile', value: 360, fill: 'var(--chart-2)' },
    { name: 'Tablet', value: 180, fill: 'var(--chart-3)' },
];

const config: ChartConfig = {
    Desktop: { label: 'Desktop', color: 'var(--chart-1)' },
    Mobile: { label: 'Mobile', color: 'var(--chart-2)' },
    Tablet: { label: 'Tablet', color: 'var(--chart-3)' },
};

export default function PieChartDonutExample() {
    return (
        <ChartContainer config={config} minHeight={260}>
            <PieChart>
                <ChartTooltip />
                <Pie data={data} dataKey="value" nameKey="name" innerRadius={64} outerRadius={96} paddingAngle={4} cornerRadius={6}>
                    {data.map((item) => <Cell key={item.name} fill={item.fill} />)}
                </Pie>
                <ChartLegend />
            </PieChart>
        </ChartContainer>
    );
}

Visible labels

Render segment labels directly on the pie for quick scanning.

Visible labels
"use client";

import { Cell, ChartContainer, ChartTooltip, Pie, PieChart, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Free', value: 45, fill: 'var(--chart-1)' },
    { name: 'Pro', value: 35, fill: 'var(--chart-2)' },
    { name: 'Team', value: 20, fill: 'var(--chart-3)' },
];

const config: ChartConfig = {
    Free: { label: 'Free', color: 'var(--chart-1)' },
    Pro: { label: 'Pro', color: 'var(--chart-2)' },
    Team: { label: 'Team', color: 'var(--chart-3)' },
};

const RADIAN = Math.PI / 180;

const renderLabel = ({ cx, cy, midAngle, outerRadius, name, value, fill }: any) => {
    const radius = outerRadius + 4;
    const x = cx + radius * Math.cos(-midAngle * RADIAN);
    const y = cy + radius * Math.sin(-midAngle * RADIAN);
    const side = x >= cx ? 1 : -1;
    const vertical = y >= cy ? 1 : -1;
    const diagonalLength = 18;
    const horizontalLength = 30;
    const elbowX = x + side * diagonalLength;
    const elbowY = y + vertical * diagonalLength;
    const endX = elbowX + side * horizontalLength;
    const textX = endX + side * 6;

    return (
        <g>
            <polyline
                points={`${x},${y} ${elbowX},${elbowY} ${endX},${elbowY}`}
                fill="none"
                stroke={fill}
                strokeWidth={1.5}
            />
            <text
                x={textX}
                y={elbowY}
                fill={fill}
                dominantBaseline="central"
                textAnchor={side === 1 ? 'start' : 'end'}
                style={{
                    fontFamily: 'var(--body-md-family)',
                    fontSize: 'var(--body-md-size)',
                    fontWeight: 'var(--body-md-weight)',
                }}
            >
                {name}: {value}%
            </text>
        </g>
    );
};

export default function PieChartLabelsExample() {
    return (
        <ChartContainer config={config} minHeight={300}>
            <PieChart>
                <ChartTooltip />
                <Pie
                    data={data}
                    dataKey="value"
                    nameKey="name"
                    outerRadius={96}
                    paddingAngle={4}
                    cornerRadius={6}
                    label={renderLabel}
                    labelLine={false}
                >
                    {data.map((item) => <Cell key={item.name} fill={item.fill} />)}
                </Pie>
            </PieChart>
        </ChartContainer>
    );
}

On this page

Preview
Component API
Variants
Donut chart
Visible labels
Photonix UI - React Components, Templates & Figma Design System