# Radial Bars
URL: https://remocn.dev/docs/numbers/radial-bars

Bars around a dial sweep up to a peak while the center figure counts up with a label.

- Install: `npx shadcn@latest add @remocn/radial-bars`
- Vibe: data
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/radial-bars
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RadialBars } from "@/components/remocn/radial-bars";

const RadialBarsScene = () => (
  <RadialBars values={[8, 14, 22, 40, 90, 64, 30, 18]} value="2.4M" label="renders in the peak hour" />
);

export const RemotionRoot = () => (
  <Composition
    id="RadialBars"
    component={RadialBarsScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Bars grow around the dial in a sweep, the peak group is picked out with a bracket and a soft glow, and the center figure counts up under its label. Pass `values` (one bar each), `highlight`, `value`, `label` and `ticks`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `values` | `number[]` | `DEFAULT_VALUES` | Bar heights around the dial, one entry per bar. |
| `highlight` | `number` | — | Index of the bar at the center of the focused group. Defaults to the peak. |
| `value` | `string` | `"2.4M"` | Center figure, as text. |
| `label` | `string` | `"renders in the peak hour"` | Caption under the center figure. |
| `ticks` | `string[]` | `["00:00", "06:00", "12:00", "18:00"]` | Labels spaced evenly around the dial. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- Usage by hour or by day where the peak is the headline.
- A rhythmic metric that deserves a circular shape rather than a bar chart.
- A scale claim such as 2.4M renders per hour with a clear busiest moment.

## Don't use when
- You show progress toward goals — use `activity-rings`.
- You show a share of a whole — use `share-donut`.
- You show a trend over time as a line — use `sparkline-thread`.