Skip to content
Get Pro
Trends

Streamgraph

Smooth stacked streams around a moving centre (wiggle), a symmetric silhouette, a zero baseline or shares of 100%.

$149 once · every Pro piece

Customize

Streams are told apart by the grey ladder with a hairline gap between them and, optionally, a texture each, never by hue. Point at a stream and it holds while the rest step back to a fifth. Along the vertical guide every stream carries a value pill at its own centre, pushed apart so none collide, and the hovered stream's pill turns bone. Hide a stream in the legend and the others flow into its place over half a second.

Install

npx shadcn@latest add @obsyde/streamgraph

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Streamgraph } from '@/components/obsyde/ember/streamgraph/Streamgraph';

export function Example() {
  return (
    <Streamgraph
      offset="wiggle"
      pills
      legend="row"
      tooltip="none"
      pattern="none"
    />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/streamgraph/Streamgraph.tsxcomponent
  • ember/streamgraph/streamgraph.cssstyles
  • ember/streamgraph/StreamgraphDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
offsetOffset'wiggle' | 'silhouette' | 'zero' | 'expand''wiggle'
streamsStreamsnumber5
pillsValue pillsbooleantrue
legendLegend'row' | 'list' | 'none''row'
tooltipTooltip'none' | 'panel' | 'corner''none'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
patternPattern'none' | 'series' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
backgroundBackground'none' | 'grid' | 'dots' | 'hatch''none'
curveCurve'catmull' | 'monotone' | 'linear''catmull'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
heightHeightnumber280
pointsPointsnumber36
seedSeednumber7