# ChordChart

> Chord diagram: groups share a circle, ribbons between them are the flows (who switches to whom, which service goes with which).

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

Chord diagram: groups share a circle, ribbons between them are the flows
(who switches to whom, which service goes with which). Hover a group to
light its ribbons, a ribbon to isolate it; arrows walk the groups.

## Import

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

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

## Usage

```tsx
<ChordChart
  title="Clientes que cambian de barbero"
  description="Octubre frente a septiembre"
  groups={barberos}
  matrix={cambios}
  padAngle={3}
  startAngle={0}
  ringWidth={0.09}
  sortGroups="input"
  sortSubgroups="descending"
  showLabels
  valueFormat="integer"
  height={440}
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the drawing and caption of the data table. |
| `description` | `string` |  |  |
| `groups` * | `readonly ChordGroupInput[]` |  |  |
| `matrix` * | `readonly (readonly number[])[]` |  | `matrix[i][j]`: flow from group `i` to group `j`. A group's arc spans its row sum. |
| `padAngle` | `number` | `3` | Gap between groups, in degrees. |
| `startAngle` | `number` | `0` | Where the first group starts, degrees from twelve o'clock. |
| `ringWidth` | `number` | `0.09` | Thickness of the group ring as a fraction of the radius. |
| `sortGroups` | `"input" \| "ascending" \| "descending"` | `"input"` |  |
| `sortSubgroups` | `"input" \| "ascending" \| "descending"` | `"descending"` | Order of the ribbon ends inside a group. |
| `showLabels` | `boolean` | `true` | Group names around the ring (hidden automatically in narrow containers). |
| `valueFormat` | `ValueFormat` |  |  |
| `height` | `number \| "fill"` | `420` |  |
| `aspectRatio` | `number` |  | Width / height ratio of the drawing; ignored with `"fill"`. |
| `legend` | `boolean` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `exportable` | `boolean` | `false` | SVG and PNG export buttons. |
| `animate` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<ChordLabels>` |  |  |
| `onGroupClick` | `((group: ChordGroupInput, index: number) => void)` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-chordchart--default)
- [Sorted](/storybook/?path=/story/charts-chordchart--sorted)
- [Services](/storybook/?path=/story/charts-chordchart--services)
- [Loading](/storybook/?path=/story/charts-chordchart--loading)
- [Empty](/storybook/?path=/story/charts-chordchart--empty)
- [Export](/storybook/?path=/story/charts-chordchart--export)
- [Dark](/storybook/?path=/story/charts-chordchart--dark)
- [Narrow](/storybook/?path=/story/charts-chordchart--narrow)
- [Fill Parent](/storybook/?path=/story/charts-chordchart--fill-parent)

## Source

`packages/ui/src/charts/chord-chart/chord-chart.tsx`