Charts — Waterfall Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · Full AI Reference · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/charts/waterfall-chart

WaterfallChart

charts

import { WaterfallChart } from "semiotic/xy"

Wraps: StreamXYFrame

WaterfallChart draws cumulative signed steps as floating bars. Each row is a delta. For a live window of the same geometry, use RealtimeWaterfallChart.

Quick Start

import { WaterfallChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { step: "Opening", value: 120 }, { step: "New sales", value: 45 }, { step: "Returns", value: -18 }, ], /* --- Process --- */ xAccessor: "step", yAccessor: "value", /* --- Customize --- */ xLabel: "Step", yLabel: "Change" } export default () => { return <WaterfallChart {...frameProps} /> }

Props

Prop	Type	Required	Default	Description
`data`	array	Yes	—	Step/delta rows. Each y value is a signed change, not a running total.
`xAccessor`	string \| function	—	`"x"`	Step identity or time.
`yAccessor`	string \| function	—	`"y"`	Signed delta for this step.
`positiveColor`	string	—	`theme success`	Fill for positive deltas.
`negativeColor`	string	—	`theme danger`	Fill for negative deltas.
`gap`	number	—	`1`	Pixel gap between adjacent bars.