Radial Bar Chart

Concentric progress rings (activity-ring style). Each ring's track is a faint step of its own color.

Import

import { RadialChart } from '@marbleui/ui'

Props

<RadialChart>

Prop	Type	Default
data *required	`RadialDatum[]`	`—`
summary *required	`string`	`—`
center	`ReactNode`	`—`
className	`string`	`—`
size	`number`	`180`
title	`ReactNode`	`—`

Usage notes

Concentric progress rings, one per goal, like daily activity rings. For a single progress value use ProgressCircle; for one KPI with warning bands use Gauge.

<RadialChart
  title="Today"
  summary="Move 420 of 600 kcal, exercise 28 of 30 minutes, stand 9 of 12 hours."
  data={[
    { label: 'Move', value: 420, max: 600 },
    { label: 'Exercise', value: 28, max: 30 },
    { label: 'Stand', value: 9, max: 12 },
  ]}
/>

Each datum has its own max; the first is the outer ring. A value past its max draws a full ring while the legend still shows the real value/max.
Values appear unformatted in the legend and table; there is no tooltip and no valueFormat. center adds content inside the rings, which are empty by default.
Rings get thinner as you add more; at the default size (180) three rings keep full thickness.
The rings and legend sit inside the chart image, so put each value and goal in summary. “Show data” lists them as a table (see ChartContainer).

Example source · show

import { RadialChart } from './radial-chart'

export const styles = {
  Activity: () => (
    <RadialChart
      title="Today"
      summary="Move 420 of 600 kcal, exercise 28 of 30 minutes, stand 9 of 12 hours."
      data={[
        { label: 'Move', value: 420, max: 600, color: 'var(--chart-5)' },
        { label: 'Exercise', value: 28, max: 30, color: 'var(--chart-3)' },
        { label: 'Stand', value: 9, max: 12, color: 'var(--chart-1)' },
      ]}
    />
  ),
  Single: () => (
    <RadialChart
      title="Storage"
      summary="72 of 100 GB used."
      size={140}
      data={[{ label: 'Used', value: 72, max: 100 }]}
      center={<span className="text-lg font-semibold text-fg">72%</span>}
    />
  ),
}

Source: packages/ui/src/radial-chart/radial-chart.tsx

Catalog