Photonix

PieChartWidget

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

Preview

Browser Usage

Global market share

Desktop

Mobile

Tablet

Usage
import { PieChartWidget } from '@photonix/ultimate';

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

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

<PieChartWidget 
  title="Browser Usage" 
  data={data}
  dataKey="value"
  config={config}
/>

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
<PieChartWidget 
  title="Device Breakdown" 
  data={PIE_DATA}
  dataKey="value"
  config={PIE_CONFIG}
  innerRadius={60}
/>

Solid Pie Chart

Set innerRadius to 0 for a traditional pie chart.

Platform Mix

Desktop

Mobile

Tablet

Solid Pie Chart
<PieChartWidget 
  title="Platform Mix" 
  data={PIE_DATA}
  dataKey="value"
  config={PIE_CONFIG}
  innerRadius={0}
  cornerRadius={0}
  paddingAngle={0}
/>

Without Legend

Hide the built-in legend if not needed.

Compact View

Without Legend
<PieChartWidget 
  title="Compact View" 
  data={PIE_DATA}
  dataKey="value"
  config={PIE_CONFIG}
  showLegend={false}
  chartHeight={200}
/>

Right Legend

Position the legend on the right side.

Horizontal Layout

Desktop

Mobile

Tablet

Right Legend
<PieChartWidget 
  title="Horizontal Layout" 
  data={PIE_DATA}
  dataKey="value"
  config={PIE_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
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 }, // no breakdown
];

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

On this page

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