Photonix UI - React Components, Templates & Figma Design System

RadialBarChartWidget

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

Preview

Usage

import { RadialBarChartWidget } 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 = {
  Move: { label: 'Move', color: 'var(--chart-1)' },
  Exercise: { label: 'Exercise', color: 'var(--chart-2)' },
  Stand: { label: 'Stand', color: 'var(--chart-3)' },
};

<RadialBarChartWidget
  title="Daily Activity"
  data={data}
  config={config}
  dataKey="value"
  nameKey="name"
  showLegend
/>

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.

Activity Rings

<RadialBarChartWidget
  title="Daily Activity"
  data={[
    { name: 'Move', value: 80, total: 100 },
    { name: 'Exercise', value: 45, total: 60 },
    { name: 'Stand', value: 10, total: 12 },
  ]}
  config={{
    Move: { label: 'Move', color: 'var(--chart-1)' },
    Exercise: { label: 'Exercise', color: 'var(--chart-2)' },
    Stand: { label: 'Stand', color: 'var(--chart-3)' },
  }}
  dataKey="value"
  nameKey="name"
  showLegend
  cornerRadius={10}
/>

Loading State

Displays a skeleton preview while data is being fetched.

Loading State

<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.

Multi-ring (4 rings)

<RadialBarChartWidget
  title="Fitness Goals"
  subtitle="Daily targets"
  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 },
  ]}
  config={{
    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)' },
  }}
  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.

With Legend (Right)

<RadialBarChartWidget
  title="Activity Summary"
  data={data}
  config={config}
  dataKey="value"
  nameKey="name"
  showLegend
  legendPosition="right"
  chartHeight={260}
/>

RadialBarChartWidget

Preview

Daily Activity

Component API

RadialBarChartWidget

Variants

Activity Rings

Daily Activity

Loading State

Multi-ring (4 rings)

Fitness Goals

With Legend (Right)

Activity Summary

On this page