StreamGraph

Live preview

Loading example…

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

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

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

Usage

<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

Source

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