WaterfallChart

Defined in: charts/extra.ts:792

Canvas 2D waterfall chart - visualises incremental positive/negative changes around a running total.

Each item’s value adds (positive) or subtracts (negative) from the running total. The final running total is highlighted with the theme’s positive colour by default.

Example

import { WaterfallChart } from '@arshad-shah/swift-chart';

const chart = new WaterfallChart('#chart', { theme: 'midnight' });
chart.setData([
  { label: 'Q1',    value: 120 },
  { label: 'Q2 d',  value: 45 },
  { label: 'Q3 d',  value: -22 },
  { label: 'Q4 d',  value: 67 },
]);

Extends

• BaseChart

Constructors

Constructor

new WaterfallChart(container, config?): WaterfallChart

Defined in: core/base.ts:50

Parameters

container

string | HTMLElement

config?

BaseChartConfig = {}

Returns

WaterfallChart

Inherited from

BaseChart.constructor

Properties

animator

animator: Animator

Defined in: core/base.ts:34

Inherited from

BaseChart.animator

---

animProgress

animProgress: number = 1

Defined in: core/base.ts:37

Inherited from

BaseChart.animProgress

---

canvas

canvas: HTMLCanvasElement

Defined in: core/base.ts:31

Inherited from

BaseChart.canvas

---

config

config: Required<Pick<BaseChartConfig, "title" | "animate" | "animDuration" | "animEasing" | "responsive" | "showGrid" | "showTooltip" | "showLegend" | "legendPosition" | "subtitle">> & BaseChartConfig

Defined in: core/base.ts:23

Inherited from

BaseChart.config

---

container

container: HTMLElement

Defined in: core/base.ts:22

Inherited from

BaseChart.container

---

ctx

ctx: CanvasRenderingContext2D

Defined in: core/base.ts:32

Inherited from

BaseChart.ctx

---

height

height: number = 0

Defined in: core/base.ts:40

Inherited from

BaseChart.height

---

hoverIndex

hoverIndex: number = -1

Defined in: core/base.ts:36

Inherited from

BaseChart.hoverIndex

---

padding

padding: Padding

Defined in: core/base.ts:41

Inherited from

BaseChart.padding

---

resolved

resolved: ResolvedData

Defined in: core/base.ts:38

Inherited from

BaseChart.resolved

---

theme

theme: Theme

Defined in: core/base.ts:33

Inherited from

BaseChart.theme

---

tooltip

tooltip: Tooltip | null

Defined in: core/base.ts:35

Inherited from

BaseChart.tooltip

---

width

width: number = 0

Defined in: core/base.ts:39

Inherited from

BaseChart.width

Accessors

plotArea

Get Signature

get plotArea(): PlotArea

Defined in: core/base.ts:154

Returns

PlotArea

Inherited from

BaseChart.plotArea

Methods

_draw()

_draw(): void

Defined in: charts/extra.ts:828

Returns

void

Overrides

BaseChart._draw

---

_onMouse()

_onMouse(e): void

Defined in: charts/extra.ts:802

Parameters

e

MouseEvent

Returns

void

Overrides

BaseChart._onMouse

---

destroy()

destroy(): void

Defined in: core/base.ts:222

Returns

void

Inherited from

BaseChart.destroy

---

resize()

resize(): void

Defined in: core/base.ts:212

Returns

void

Inherited from

BaseChart.resize

---

setData()

setData(data, mapping?): void

Defined in: charts/extra.ts:795

Parameters

data

Record<string, any>[] | null | undefined

mapping?

DataMapping

Returns

void

Overrides

BaseChart.setData

---

setTheme()

setTheme(name): void

Defined in: core/base.ts:181

Parameters

name

string

Returns

void

Inherited from

BaseChart.setTheme

---

toDataURL()

toDataURL(type?, quality?): string

Defined in: core/base.ts:218

Export the current chart as a PNG data URL.

Parameters

type?

string = 'image/png'

quality?

number = 0.92

Returns

string

Inherited from

BaseChart.toDataURL

---

update()

update(arg, mapping?): void

Defined in: core/base.ts:191

Polymorphic update:

• update(dataArray, mapping?) — replaces data (alias of setData).
• update(configPatch) — patches non-data config (theme, title, padding, etc.).

Parameters

arg

Record<string, any>[] | Partial<BaseChartConfig>

mapping?

DataMapping

Returns

void

Inherited from

BaseChart.update