Waterfall ​

D3PWaterfall turns changes into running sums; a total is drawn from zero. style.colorBy: 'kind' colors rises, falls and totals.

ts
import {
  D3PAutoDomain, d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PBarRenderer, D3PChart, d3pDomTooltip,
  D3PSeries, D3PTooltip, D3PWaterfall, getGlobalBus,
} from 'd3pict'

const bus = getGlobalBus()

const container = document.getElementById('app')! // any element with a size: the chart fills it

const steps: [string, number][] = [['Revenue', 420], ['Services', 180], ['Costs', -250], ['Marketing', -90], ['Tax', -60], ['Net', 0]]
const profit = new D3PSeries({ bus, name: 'profit', data: steps })
// running sums; "Net" is a total, drawn from zero
const flow = new D3PWaterfall({ bus, series: profit, totals: ['Net'] })

const dx = new D3PAxisDomain({ bus, domain: steps.map((s) => s[0]) })
const dy = new D3PAxisDomain({ bus, domain: [0, 1] })
const auto = new D3PAutoDomain({ bus })
auto.linkSeries(flow.series, [dx, dy])

const x = new D3PAxis({ bus, name: 'x', domain: dx, scaleType: 'band' })
const y = new D3PAxis({ bus, name: 'y', domain: dy, position: 'left', props: { grid: { enabled: true } } })
const bars = new D3PBarRenderer({ bus, series: flow.series, props: { style: { colorBy: 'kind', colors: { up: '#59a14f', down: '#e15759', total: '#4e79a7' } } } })

const tooltip = new D3PTooltip({ bus })
const objects = [x, y, bars, tooltip]

const chart = new D3PChart({ container, bus })
const stopArea = d3pAutoInteractionArea(chart) // before the objects: the cursor, the tooltip and the tools ask for an interaction area
objects.forEach((o) => o.addToChart(chart))
const stopTooltip = d3pDomTooltip(tooltip)

All the chart types · how each type is built