# PolarAreaChart

> Polar area (Nightingale rose): equal-angle sectors whose radius, or area, follows the value.

Source: https://ui.jcsoftdev.com/docs/components/polar-area-chart

Polar area (Nightingale rose): equal-angle sectors whose radius, or area,
follows the value. Reference rings, rim labels, hover and keyboard focus
with a tooltip, legend toggling.

## Import

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

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

## Usage

```tsx
<PolarAreaChart
  title="Citas por día de la semana"
  data={weekday}
  scale="radius"
  innerRadius={0.1}
  cornerRadius={4}
  gap={3}
  levels={4}
  showLabels
  startAngle={0}
  valueFormat="integer"
  height={380}
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `description` | `string` |  |  |
| `data` * | `readonly PolarAreaDatum[]` |  |  |
| `scale` | `"area" \| "radius"` | `"radius"` | `radius`: length proportional to value. `area`: sector area proportional to value (Nightingale rose). |
| `innerRadius` | `number` | `0.1` | Hole in the middle as a fraction of the outer radius. |
| `cornerRadius` | `number` | `4` |  |
| `gap` | `number` | `3` | Gap between sectors, in pixels at the outer ring. |
| `levels` | `number` | `4` | Concentric reference rings. |
| `showLabels` | `boolean` | `true` | Names around the rim (hidden automatically in narrow containers). |
| `startAngle` | `number` | `0` | Rotation of the first sector, in degrees from 12 o'clock. |
| `monochrome` | `string \| boolean` | `false` | One hue in shades, darkest on the largest value. `true` uses the accent; a string sets the base color. |
| `height` | `number \| "fill"` | `340` |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `valueFormat` | `ValueFormat` |  |  |
| `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-polarareachart--default)
- [Nightingale Area](/storybook/?path=/story/charts-polarareachart--nightingale-area)
- [With Hole](/storybook/?path=/story/charts-polarareachart--with-hole)
- [Monochrome](/storybook/?path=/story/charts-polarareachart--monochrome)
- [Loading](/storybook/?path=/story/charts-polarareachart--loading)
- [Empty](/storybook/?path=/story/charts-polarareachart--empty)
- [Narrow](/storybook/?path=/story/charts-polarareachart--narrow)

## Source

`packages/ui/src/charts/polar-area-chart/polar-area-chart.tsx`