# AlluvialChart

> Alluvial diagram: how the same categories flow from one moment to the next (client segments month by month, services chosen by season).

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

Alluvial diagram: how the same categories flow from one moment to the next
(client segments month by month, services chosen by season). Each stage is a
column; every category keeps its color and its place from top to bottom, so
the eye follows who moved where. Built on `SankeyChart`.

## Import

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

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

## Usage

```tsx
<AlluvialChart
  title="Origen de clientes, servicio y medio de pago"
  nodes={nodes}
  links={links}
  columns={["Origen", "Servicio", "Pago"]}
  valueFormat="integer"
  height={400}
  nodePadding={14}
  align="justify"
  iterations={6}
  linkColor="gradient"
  linkOpacity={0.38}
  labelPosition="outside"
  showValues
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `stages` * | `readonly string[]` |  | Moments in time, left to right: "Jun", "Jul", ... |
| `categories` * | `readonly { id: string; name: string; color?: string; }[]` |  | The categories that flow; their order is the order top to bottom in every stage. |
| `flows` * | `readonly (readonly { from: string; to: string; value: number; }[])[]` |  | `flows[s]` moves people from stage `s` to stage `s + 1`: `{ from: categoryId, to: categoryId, value }`. |
| `title` * | `string` |  | Accessible name of the drawing and caption of the data table. |
| `animate` | `boolean` |  |  |
| `className` | `string` |  |  |
| `tooltip` | `boolean` |  |  |
| `height` | `number \| "fill"` |  |  |
| `aspectRatio` | `number` |  | Width / height ratio of the drawing; ignored with `"fill"`. |
| `valueFormat` | `ValueFormat` |  |  |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<SankeyLabels>` |  |  |
| `pathTracing` | `boolean` |  | Hover or click traces a whole path: a link lights everything upstream of its source and downstream of its target; a click pins it. |
| `particles` | `boolean` |  | Dots travel along the bands (off under `prefers-reduced-motion`). |
| `exportable` | `boolean` |  | Show SVG and PNG export buttons above the drawing. |
| `nodeWidth` | `number` |  | Thickness of the node bars (wider by default with inside labels). |
| `nodePadding` | `number` |  | Vertical gap between nodes of a column. |
| `iterations` | `number` |  | Relaxation sweeps of the layout; more untangles more, at a cost. |
| `linkColor` | `"source" \| "target" \| "neutral" \| "gradient"` |  | `gradient` blends source into target; `source`/`target` use one end; `neutral` is grey. |
| `linkOpacity` | `number` |  | Resting opacity of the links (0-1). |
| `labelPosition` | `"outside" \| "inside"` |  | Node labels beside the bars (`outside`) or on wide bars (`inside`). |
| `showValues` | `boolean` |  | Value after each node label. |
| `onNodeClick` | `((node: SankeyNode) => void)` |  |  |
| `onLinkClick` | `((link: SankeyLink) => void)` |  |  |
| `onRemovedLinks` | `((removed: SankeyGraph["removed"]) => void)` |  | Links the layout left out (cycles, self links, unknown ids, invalid values). |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-sankeychart--default)
- [Source Colored](/storybook/?path=/story/charts-sankeychart--source-colored)
- [Inside Labels](/storybook/?path=/story/charts-sankeychart--inside-labels)
- [Revenue](/storybook/?path=/story/charts-sankeychart--revenue)
- [With Cycle](/storybook/?path=/story/charts-sankeychart--with-cycle)
- [Loading](/storybook/?path=/story/charts-sankeychart--loading)
- [Empty](/storybook/?path=/story/charts-sankeychart--empty)
- [Narrow](/storybook/?path=/story/charts-sankeychart--narrow)
- [Fill Parent](/storybook/?path=/story/charts-sankeychart--fill-parent)
- [Alluvial](/storybook/?path=/story/charts-sankeychart--alluvial)
- [Diff](/storybook/?path=/story/charts-sankeychart--diff)
- [Path Tracing](/storybook/?path=/story/charts-sankeychart--path-tracing)
- [Particles](/storybook/?path=/story/charts-sankeychart--particles)
- [Export](/storybook/?path=/story/charts-sankeychart--export)
- [Chord](/storybook/?path=/story/charts-sankeychart--chord)

## Source

`packages/ui/src/charts/sankey-chart/alluvial-chart.tsx`