# StreamGraph

> Flowing stacked areas around a moving baseline.

Source: https://ui.jcsoftdev.com/docs/components/stream-graph

Flowing stacked areas around a moving baseline. Hover a stream to isolate it
(the others fade, the tooltip shows its value); with the keyboard, Left and
Right move through time and Up and Down switch stream.

## Import

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

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

## Usage

```tsx
<StreamGraph
  title="Servicios realizados por semana"
  categories={weeks}
  series={services}
  valueFormat="integer"
  height={340}
  offset="wiggle"
  order="inside-out"
  curve="smooth"
  streamLabels
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `categories` * | `readonly XValue[]` |  |  |
| `series` * | `readonly ChartSeries[]` |  |  |
| `title` * | `string` |  | Accessible name of the chart. |
| `description` | `string` |  |  |
| `height` | `number \| "fill"` | `340` |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `offset` | `"zero" \| "wiggle" \| "silhouette" \| "expand"` | `"wiggle"` | Baseline: "wiggle" (default), "silhouette", "zero" (plain stack) or "expand" (100%). |
| `order` | `"none" \| "ascending" \| "inside-out"` | `"inside-out"` | Stacking order; "inside-out" keeps the biggest streams in the middle. |
| `curve` | `"linear" \| "smooth" \| "step" \| "step-before" \| "step-after"` | `"smooth"` |  |
| `streamLabels` | `boolean` | `true` | Names written on the thickest part of each stream (default true). |
| `valueFormat` | `ValueFormat` |  |  |
| `xFormat` | `((value: XValue) => string)` |  |  |
| `xScale` | `"time" \| "auto" \| "point"` | `"auto"` |  |
| `grid` | `boolean` | `true` |  |
| `legend` | `boolean \| "top" \| "bottom"` |  |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `animate` | `boolean` | `true` |  |
| `initialHidden` | `readonly string[]` |  |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-streamgraph--default)
- [Silhouette](/storybook/?path=/story/charts-streamgraph--silhouette)
- [Stacked From Zero](/storybook/?path=/story/charts-streamgraph--stacked-from-zero)
- [Share](/storybook/?path=/story/charts-streamgraph--share)
- [Few Streams](/storybook/?path=/story/charts-streamgraph--few-streams)
- [Loading](/storybook/?path=/story/charts-streamgraph--loading)
- [Empty](/storybook/?path=/story/charts-streamgraph--empty)
- [Narrow](/storybook/?path=/story/charts-streamgraph--narrow)

## Source

`packages/ui/src/charts/stream-graph/stream-graph.tsx`