Photonix

RadialBarChartWidget

A dedicated widget for displaying concentric radial bar charts — ideal for activity rings, progress tracking, and circular KPI visualizations.

Preview

Coverage

Readiness by area

Docs

Tests

Visuals

Usage
"use client";

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

const data = [
    { name: 'Docs', value: 92 },
    { name: 'Tests', value: 78 },
    { name: 'Visuals', value: 64 },
];

const config: ChartConfig = {
    Docs: { label: 'Docs', color: 'var(--chart-1)' },
    Tests: { label: 'Tests', color: 'var(--chart-2)' },
    Visuals: { label: 'Visuals', color: 'var(--chart-2)' },
};

export default function RadialBarChartWidgetBasicExample() {
    return <RadialBarChartWidget title="Coverage" subtitle="Readiness by area" data={data} config={config} dataKey="value" showLegend chartHeight={320} />;
}

Component API

RadialBarChartWidget

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 radial values
nameKey
string
'name'
The key to use for the category/ring names
innerRadius
string | number
'30%'
Inner radius of the chart. Defaults to "30%"
outerRadius
string | number
'100%'
Outer radius of the chart. Defaults to "100%"
barSize
number
15
Size of each radial bar. Defaults to 15.
cornerRadius
number
10
Corner radius of the bar caps. Defaults to 10.
endAngle
number
-270
Start angle of the chart in degrees. Defaults to 90 (top).
startAngle
number
90
Start angle of the chart in degrees. Defaults to -270 (full circle).
showLegend
boolean
false
Whether to show a legend. Defaults to false.
legendPosition
"right" | "bottom"
'bottom'
Position of the legend. Defaults to 'bottom'.
radialBarChartProps
any
-
Any additional props to pass to the Recharts RadialBarChart component
radialBarProps
any
-
Any additional props to pass to the Recharts RadialBar 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

Activity Rings

Classic activity ring style — each ring represents a separate metric with its own color and progress.

Daily Activity

Move

Exercise

Stand

Activity Rings
"use client";

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

const data = [
    { name: 'Move', value: 80, total: 100 },
    { name: 'Exercise', value: 45, total: 60 },
    { name: 'Stand', value: 10, total: 12 },
];

const config: ChartConfig = {
    Move: { label: 'Move', color: 'var(--chart-1)' },
    Exercise: { label: 'Exercise', color: 'var(--chart-2)' },
    Stand: { label: 'Stand', color: 'var(--chart-3)' },
};

export default function RadialBarChartWidgetActivityRingsExample() {
    return <RadialBarChartWidget title="Daily Activity" data={data} config={config} dataKey="value" nameKey="name" showLegend cornerRadius={10} />;
}

Loading State

Displays a skeleton preview while data is being fetched.

Loading State
"use client";

import { RadialBarChartWidget } from '@photonix/ultimate';

export default function RadialBarChartWidgetLoadingExample() {
    return <RadialBarChartWidget title="Daily Activity" data={[]} config={{}} dataKey="value" loading />;
}

Multi-ring (4 rings)

Support for any number of concentric rings. Each ring auto-sizes to fit within the chart area.

Fitness Goals

Daily targets
Multi-ring (4 rings)
"use client";

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

const data = [
    { name: 'Calories', value: 1800, total: 2500 },
    { name: 'Steps', value: 7200, total: 10000 },
    { name: 'Distance', value: 5.4, total: 8 },
    { name: 'Sleep', value: 7, total: 9 },
];

const config: ChartConfig = {
    Calories: { label: 'Calories', color: 'var(--chart-1)' },
    Steps: { label: 'Steps', color: 'var(--chart-2)' },
    Distance: { label: 'Distance', color: 'var(--chart-3)' },
    Sleep: { label: 'Sleep', color: 'var(--chart-4)' },
};

export default function RadialBarChartWidgetMultiRingExample() {
    return <RadialBarChartWidget title="Fitness Goals" subtitle="Daily targets" data={data} config={config} dataKey="value" nameKey="name" chartHeight={320} />;
}

With Legend (Right)

Place the legend to the right of the chart for a compact side-by-side layout.

Activity Summary

Move

Exercise

Stand

With Legend (Right)
"use client";

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

const data = [
    { name: 'Move', value: 80, total: 100 },
    { name: 'Exercise', value: 45, total: 60 },
    { name: 'Stand', value: 10, total: 12 },
];

const config: ChartConfig = {
    Move: { label: 'Move', color: 'var(--chart-1)' },
    Exercise: { label: 'Exercise', color: 'var(--chart-2)' },
    Stand: { label: 'Stand', color: 'var(--chart-3)' },
};

export default function RadialBarChartWidgetWithLegendExample() {
    return <RadialBarChartWidget title="Activity Summary" data={data} config={config} dataKey="value" nameKey="name" showLegend legendPosition="right" chartHeight={260} />;
}

On this page

Preview
Component API
Variants
Activity Rings
Loading State
Multi-ring (4 rings)
With Legend
Photonix UI - React Components, Templates & Figma Design System