Photonix

PieChartWidget

A specialized widget for displaying Pie and Donut Charts with built-in legend and unified layout.

Preview

Team allocation

Current sprint

Design

Engineering

Growth

Usage
"use client";

import { PieChartWidget, 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 PieChartWidgetBasicExample() {
    return <PieChartWidget title="Team allocation" subtitle="Current sprint" data={data} config={config} dataKey="value" chartHeight={320} />;
}

Component API

PieChartWidget

Prop
Type
Default
Description
data
any[]
-
Data for the chart
config
ChartConfig
-
Chart configuration for colors and labels
dataKey
string
-
The key to use for the pie values
nameKey
string
'name'
The key to use for the category names
innerRadius
number
60
Inner radius of the pie (for donut charts). Defaults to 60.
outerRadius
number
90
Outer radius of the pie. Defaults to 90.
cornerRadius
number
6
Corner radius of the pie segments. Defaults to 6.
paddingAngle
number
4
Padding angle between segments. Defaults to 4.
showLegend
boolean
true
Whether to show a legend. Defaults to true.
legendPosition
"right" | "bottom"
'bottom'
Position of the legend. Defaults to 'bottom'.
pieChartProps
any
-
Any additional props to pass to the Recharts PieChart component
className
string
-
Custom class name
style
React.CSSProperties
-
Custom style
title
React.ReactNode
-
The title of the widget
actions
React.ReactNode
-
Actions to display in the header (e.g. IconButton)
footer
React.ReactNode
-
Content to display below the chart
subtitle
string
-
Optional subtitle or description
loading
boolean
false
Loading state
appearance
WidgetAppearance
'outlined'
Widget appearance
padding
string | number
-
Widget padding (default: 16px)
chartHeight
string | number
300
Height of the chart container

Variants

Donut Chart

Standard donut style with innerRadius.

Device Breakdown

Desktop

Mobile

Tablet

Donut Chart
"use client";

import { PieChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Desktop', value: 400 },
    { name: 'Mobile', value: 300 },
    { name: 'Tablet', value: 200 },
];

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 PieChartWidgetDonutExample() {
    return <PieChartWidget title="Device Breakdown" data={data} dataKey="value" config={config} innerRadius={60} />;
}

Solid Pie Chart

Set innerRadius to 0 for a traditional pie chart.

Platform Mix

Desktop

Mobile

Tablet

Solid Pie Chart
"use client";

import { PieChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Desktop', value: 400 },
    { name: 'Mobile', value: 300 },
    { name: 'Tablet', value: 200 },
];

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 PieChartWidgetPieExample() {
    return <PieChartWidget title="Platform Mix" data={data} dataKey="value" config={config} innerRadius={0} cornerRadius={0} paddingAngle={0} />;
}

Without Legend

Hide the built-in legend if not needed.

Compact View

Without Legend
"use client";

import { PieChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Desktop', value: 400 },
    { name: 'Mobile', value: 300 },
    { name: 'Tablet', value: 200 },
];

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 PieChartWidgetNoLegendExample() {
    return <PieChartWidget title="Compact View" data={data} dataKey="value" config={config} showLegend={false} chartHeight={200} />;
}

Right Legend

Position the legend on the right side.

Horizontal Layout

Desktop

Mobile

Tablet

Right Legend
"use client";

import { PieChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Desktop', value: 400 },
    { name: 'Mobile', value: 300 },
    { name: 'Tablet', value: 200 },
];

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 PieChartWidgetRightLegendExample() {
    return <PieChartWidget title="Horizontal Layout" data={data} dataKey="value" config={config} legendPosition="right" />;
}

Tooltip Breakdown

When a data point is an aggregate of sub-values, add a breakdown array to show details in the tooltip on hover.

Browser Breakdown

Hover to see sub-details

Desktop

Mobile

Tablet

Tooltip Breakdown
"use client";

import { PieChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    {
        name: 'Desktop',
        value: 400,
        breakdown: [
            { name: 'Chrome', value: 220, color: 'var(--chart-1)' },
            { name: 'Firefox', value: 120, color: 'var(--chart-3)' },
            { name: 'Safari', value: 60, color: 'var(--chart-4)' },
        ],
    },
    {
        name: 'Mobile',
        value: 300,
        breakdown: [
            { name: 'Safari iOS', value: 170, color: 'var(--chart-2)' },
            { name: 'Chrome Android', value: 130, color: 'var(--chart-1)' },
        ],
    },
    { name: 'Tablet', value: 200 },
];

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 PieChartWidgetBreakdownExample() {
    return <PieChartWidget title="Browser Breakdown" subtitle="Hover to see sub-details" data={data} dataKey="value" config={config} />;
}

Loading State

Displays a skeleton preview while data is being fetched.

Loading State
"use client";

import { PieChartWidget, type ChartConfig } from '@photonix/ultimate';

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 PieChartWidgetLoadingExample() {
    return <PieChartWidget title="Browser Usage" data={[]} dataKey="value" config={config} loading />;
}

On this page

Preview
Component API
Variants
Donut Chart
Pie Chart
Without Legend
Right Legend
Tooltip Breakdown
Loading State
Photonix UI - React Components, Templates & Figma Design System