# RadialBarChart

> Concentric progress rings ("actividad del día"): one ring per series with a track, rounded caps, optional gradient, labels at the start of each ring and a centre readout that foll…

Source: https://ui.jcsoftdev.com/docs/components/radial-bar-chart

Concentric progress rings ("actividad del día"): one ring per series with
a track, rounded caps, optional gradient, labels at the start of each ring
and a centre readout that follows the hovered or focused ring.

## Import

```ts
import { RadialBarChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/radial-bar-chart`.

## Usage

```tsx
<RadialBarChart
  title="Actividad del día"
  data={activity}
  max={100}
  startAngle={0}
  endAngle={270}
  gap={6}
  track
  roundedCaps
  gradient
  height={340}
  centerValue="80%"
  centerLabel="de la meta diaria"
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `description` | `string` |  |  |
| `data` * | `readonly RadialBarDatum[]` |  | Rings from the outside in. |
| `max` | `number` | `100` | Default full-ring value, 100 unless set (a datum can bring its own). |
| `height` | `number \| "fill"` | `320` |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `startAngle` | `number` | `0` | Where the rings start and stop, in degrees from 12 o'clock. 0 -> 270 leaves room for ring labels. |
| `endAngle` | `number` | `270` |  |
| `thickness` | `number` |  | Ring thickness in pixels; derived from the size and ring count by default. |
| `gap` | `number` | `6` | Space between rings, in pixels. |
| `track` | `boolean` | `true` | Faint full ring behind each progress ring. |
| `roundedCaps` | `boolean` | `true` |  |
| `gradient` | `boolean` | `true` | Soft light-to-full gradient along each ring. |
| `ringLabels` | `boolean` |  | Name and value at the start of each ring (needs the 12-to-9 o'clock quadrant free). |
| `valueFormat` | `ValueFormat` |  |  |
| `centerValue` | `string` |  | Text in the centre while nothing is hovered. |
| `centerLabel` | `string` |  |  |
| `legend` | `boolean \| "top" \| "bottom"` |  |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` | `false` |  |
| `animate` | `boolean` | `true` |  |
| `initialHidden` | `readonly string[]` |  |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-radialbarchart--default)
- [Full Circle](/storybook/?path=/story/charts-radialbarchart--full-circle)
- [Solid Sharp](/storybook/?path=/story/charts-radialbarchart--solid-sharp)
- [Single Ring](/storybook/?path=/story/charts-radialbarchart--single-ring)
- [Loading](/storybook/?path=/story/charts-radialbarchart--loading)
- [Empty](/storybook/?path=/story/charts-radialbarchart--empty)
- [Narrow](/storybook/?path=/story/charts-radialbarchart--narrow)

## Source

`packages/ui/src/charts/radial-bar-chart/radial-bar-chart.tsx`