Waterfall

A start, the steps up and down, subtotals and the end.

$149 once · every Pro piece

Customize

Data

bridge

quarters

Connectors

Level leader

Legend

row

none

panel

none

Pattern

Background

grid

dots

none

Status

ready

empty

Value labels

Height

Seed

Steps up are bone, steps down are hatched grey, subtotals sit quiet and the final total is the one bar in the accent. Faint dashed connectors carry each level across to the next step. On entry the bars pour left to right, each step dropping from the level the previous one left. Point at a bar or step with the arrow keys and the rest step back while a panel reads the change, the running total and the change on the start; an optional level leader runs a quiet dashed line to the axis with the running total in a pill.

Install

npx shadcn@latest add @obsyde/waterfall

Needs your licence key · Get Pro

Usage

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

import { Waterfall } from '@/components/obsyde/ember/waterfall/Waterfall';

export function Example() {
  return (
    <Waterfall />
  );
}

Files

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

ember/waterfall/Waterfall.tsxcomponent
ember/waterfall/waterfall.cssstyles
ember/waterfall/WaterfallDemo.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/marks.tsxshared
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

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`dataset`Data	`'bridge' \| 'quarters'`	`'bridge'`
`connectors`Connectors	`boolean`	`true`
`level`Level leader	`boolean`	`false`
`legend`Legend	`'row' \| 'none'`	`'row'`
`tooltip`Tooltip	`'panel' \| 'none'`	`'panel'`
`pattern`Pattern	`'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch'`	`'diagonal-up'`
`background`Background	`'grid' \| 'dots' \| 'none'`	`'grid'`
`status`Status	`'ready' \| 'loading' \| 'empty'`	`'ready'`
`valueLabels`Value labels	`boolean`	`false`
`height`Height	`number`	`280`
`seed`Seed	`number`	`2`