Radial Chart

Display progress and metrics with circular arc tracks.

Default

app/chart-demo.tsx

import { RadialChart } from "@/components/ui/radial-chart";

const data = [
  { value: 72, maxValue: 100, color: "#2563eb" },
];

export function MyRadialChart() {
  return <RadialChart data={data} />;
}

Installation

npx @aniui/cli add radial-chart

Multiple

Concentric radial tracks for multiple metrics.

import { RadialChart } from "@/components/ui/radial-chart";

const data = [
  { value: 72, color: "#2563eb" },
  { value: 55, color: "#f97316" },
  { value: 88, color: "#8b5cf6" },
];

export function MultipleRadialChart() {
  return <RadialChart data={data} />;
}

With Text

Center text displaying the primary metric.

72%

Progress

import { RadialChart } from "@/components/ui/radial-chart";

export function RadialChartWithText() {
  return (
    <RadialChart
      data={[{ value: 72, color: "#2563eb" }]}
      centerText="72%"
      centerSubText="Progress"
    />
  );
}

Stacked

Multiple labeled tracks stacked vertically.

import { RadialChart } from "@/components/ui/radial-chart";

const data = [
  { value: 60, color: "#2563eb", label: "Tasks" },
  { value: 40, color: "#f97316", label: "Bugs" },
  { value: 80, color: "#06b6d4", label: "Features" },
];

export function StackedRadialChart() {
  return <RadialChart data={data} showLabels />;
}

Half Circle

Semi-circular gauge using custom angle range.

import { RadialChart } from "@/components/ui/radial-chart";

// Half circle using startAngle/endAngle
export function HalfRadialChart() {
  return (
    <RadialChart
      data={[{ value: 72, color: "#2563eb" }]}
      startAngle={180}
      endAngle={360}
    />
  );
}

With Labels

Value labels next to each radial track.

import { RadialChart } from "@/components/ui/radial-chart";

export function RadialChartWithLabels() {
  return (
    <RadialChart
      data={data}
      showLabels
      strokeWidth={14}
    />
  );
}

Props

PropTypeDefault

data

{ value: number; maxValue?: number; color: string; label?: string }[]

—

height

number

200

strokeWidth

number

12

showLabels

boolean

false

startAngle

number

0

endAngle

number

360

centerText

string

—

centerSubText

string

—

className

string

—

PreviousRadar Chart

NextTooltip