Radial bar chart

Free

Four to seven categories as concentric arcs that fill toward the largest one. Sorting moves each arc to its new ring.

Installs components/ui/radial-bar-chart.tsxDepends on d3-shapeMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/radial-bar-chart.json

Tickets by channel this week

Tickets by channel this week
Category	Value
Email	412
Chat	688
Phone	96
Community	241
API	158

When to use #

Use it for

Usage by channel, share of tickets by team.
A compact chart beside a list of values.

Skip it when

Precise comparisons; arcs on outer rings look longer, so the bar chart is fairer.
More than seven categories.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/radial-bar-chart.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { RadialBarChart } from "@/components/ui/radial-bar-chart"

export function RadialBarChartDemo() {
  return (
    <RadialBarChart
      label="Tickets by channel this week"
      className="w-full max-w-xl"
      parts={[
        { id: "email", label: "Email", value: 412 },
        { id: "chat", label: "Chat", value: 688 },
        { id: "phone", label: "Phone", value: 96 },
        { id: "community", label: "Community", value: 241 },
        { id: "api", label: "API", value: 158 },
      ]}
    />
  );
}

API reference #

RadialBarChart

component

PropTypeDefault

label *string—

parts *readonly ChartPart[]—

maxnumber—

unitstring""

formatValue((value: number) => string)numberText

sortablebooleantrue

loadingboolean—

errorstring—

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.