Variable: waterfallAttributes
ts
const waterfallAttributes: ObjectNode<{
alignmentgroup: Attr<string, {
description: "Traces on the same position axis with the same alignment group split each position between their offset groups; different alignment groups lay out independently.";
dflt: "";
editType: "calc";
}>;
base: Attr<number, {
description: "Where the waterfall starts on the value axis (default 0): every bar is drawn relative to it.";
editType: "calc";
}>;
cliponaxis: Attr<boolean, {
description: "Clip labels to the plot area. `false` is not drawn yet: labels are always clipped to the subplot.";
dflt: true;
editType: "plot";
}>;
connector: ObjectNode<{
line: ObjectNode<{
color: Attr<string, {
description: `Color of the ${string}.`;
dflt: "#444";
editType: "style";
}>;
dash: Attr<string, {
description: "Dash style: `'solid'`, `'dot'`, `'dash'`, `'longdash'`, `'dashdot'`, `'longdashdot'`, or a dash list such as `'5px,10px,2px'`.";
dflt: "solid";
editType: "style";
}>;
width: Attr<number, {
description: | `Width in CSS px of the ${string}.`
| `Width in CSS px of the ${string} (0: not drawn).`;
dflt: number;
editType: "plot";
min: 0;
}>;
}>;
mode: Attr<"spanning" | "between", {
description: "`'between'`: a line from each bar's end to the next bar; `'spanning'`: also across the bars' ends, so the line runs through the whole waterfall.";
dflt: "between";
editType: "plot";
values: readonly ["spanning", "between"];
}>;
visible: Attr<boolean, {
description: "Draw the connector lines.";
dflt: true;
editType: "plot";
}>;
}>;
constraintext: Attr<"none" | "inside" | "outside" | "both", {
description: "Shrink labels (inside, outside, or both) so they are no larger than their bar.";
dflt: "both";
editType: "calc";
values: readonly ["inside", "outside", "both", "none"];
}>;
decreasing: ObjectNode<{
marker: ObjectNode<{
color: Attr<string, {
description: | `Fill color of ${string}. Default `'#3D9970'`.`
| `Fill color of ${string}. Default `'#FF4136'`.`
| `Fill color of ${string}. Default `'#4499FF'`.`;
editType: "style";
}>;
line: ObjectNode<{
color: Attr<string, {
description: `Outline color of ${(...)}.`;
dflt: "#444";
editType: "style";
}>;
width: Attr<number, {
description: `Outline width in CSS px of ${(...)} (centered on the edge).`;
dflt: 0;
editType: "style";
min: 0;
}>;
}>;
}>;
}>;
dx: Attr<number, {
description: | "Step between implicit x coordinates (see `x0`)."
| "Step between implicit x coordinates (see `y0`)."
| "Step between implicit y coordinates (see `x0`)."
| "Step between implicit y coordinates (see `y0`).";
dflt: 1;
editType: "calc";
}>;
dy: Attr<number, {
description: | "Step between implicit x coordinates (see `x0`)."
| "Step between implicit x coordinates (see `y0`)."
| "Step between implicit y coordinates (see `x0`)."
| "Step between implicit y coordinates (see `y0`).";
dflt: 1;
editType: "calc";
}>;
hoverinfo: Attr<
| "name"
| "x"
| "y"
| "text"
| `name+${string}`
| `x+${string}`
| `y+${string}`
| `text+${string}`
| "all"
| "none"
| "skip"
| "delta"
| "initial"
| "final"
| `delta+${string}`
| `initial+${string}`
| `final+${string}`
| readonly (
| "name"
| "x"
| "y"
| "text"
| `name+${string}`
| `x+${string}`
| `y+${string}`
| `text+${string}`
| "all"
| "none"
| "skip"
| "delta"
| "initial"
| "final"
| `delta+${string}`
| `initial+${string}`
| `final+${string}`)[], {
arrayOk: true;
description: `Which fields hover labels show: the position and value (`x`, `y`), `text`, ${string} and the trace `name`; `'skip'` also turns hover events off for this trace. Default `'all'`.`;
editType: "none";
extras: readonly ["all", "none", "skip"];
flags: readonly ["name", "x", "y", "text", "initial", "delta", "final"];
}>;
increasing: ObjectNode<{
marker: ObjectNode<{
color: Attr<string, {
description: | `Fill color of ${string}. Default `'#3D9970'`.`
| `Fill color of ${string}. Default `'#FF4136'`.`
| `Fill color of ${string}. Default `'#4499FF'`.`;
editType: "style";
}>;
line: ObjectNode<{
color: Attr<string, {
description: `Outline color of ${(...)}.`;
dflt: "#444";
editType: "style";
}>;
width: Attr<number, {
description: `Outline width in CSS px of ${(...)} (centered on the edge).`;
dflt: 0;
editType: "style";
min: 0;
}>;
}>;
}>;
}>;
insidetextanchor: Attr<"start" | "middle" | "end", {
description: "Where inside labels sit along the bar.";
dflt: "end";
editType: "plot";
values: readonly ["end", "middle", "start"];
}>;
insidetextfont: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Text color, or one per bar.";
editType: "style";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "calc";
noBlank: true;
strict: true;
}>;
size: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Font size in CSS px, or one per bar.";
editType: "calc";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
editType: "calc";
values: readonly ["normal", "italic"];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
editType: "calc";
extras: readonly ["normal", "bold"];
max: 1000;
min: 1;
}>;
}>;
measure: AttrSpec<DataArray, DataArray | undefined>;
offset: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Shift of the bar's leading edge from its position, in position-axis units, one value or one per bar. Default: centered in its (group) slot.";
editType: "calc";
}>;
offsetgroup: Attr<string, {
description: "Traces with the same offset group share one slot in `group` mode (and stack together in `stack`/`relative` modes); bars at the same position line up, also across subplots on the same position axis.";
dflt: "";
editType: "calc";
}>;
orientation: Attr<"v" | "h", {
description: "`'v'`: vertical bars at `x` positions with `y` values; `'h'`: horizontal bars at `y` positions with `x` values. Defaults to `'h'` when only `x` is given.";
editType: "calc";
values: readonly ["v", "h"];
}>;
outsidetextfont: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Text color, or one per bar.";
editType: "style";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "calc";
noBlank: true;
strict: true;
}>;
size: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Font size in CSS px, or one per bar.";
editType: "calc";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
editType: "calc";
values: readonly ["normal", "italic"];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
editType: "calc";
extras: readonly ["normal", "bold"];
max: 1000;
min: 1;
}>;
}>;
text: Attr<string | readonly string[], {
arrayOk: true;
description: "Text per bar, drawn per `textposition` and shown in hover labels.";
dflt: "";
editType: "calc";
}>;
textangle: Attr<number | "auto", {
description: "Label rotation in degrees, clockwise. `'auto'` turns inside labels 90° when that fits the bar better.";
dflt: "auto";
editType: "plot";
extras: readonly ["auto"];
}>;
textfont: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Text color, or one per bar.";
editType: "style";
}>;
family: Attr<string, {
description: "CSS font-family list.";
editType: "calc";
noBlank: true;
strict: true;
}>;
size: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Font size in CSS px, or one per bar.";
editType: "calc";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
editType: "calc";
values: readonly ["normal", "italic"];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
editType: "calc";
extras: readonly ["normal", "bold"];
max: 1000;
min: 1;
}>;
}>;
textinfo: Attr<
| "text"
| `text+${string}`
| "none"
| "label"
| `label+${string}`
| "delta"
| "initial"
| "final"
| `delta+${string}`
| `initial+${string}`
| `final+${string}`, {
description: "What bar labels show, in a fixed order (label, text, initial, delta, final), one per line, formatted like the axes. Unset: `text`. Totals are computed per trace.";
editType: "plot";
extras: readonly ["none"];
flags: readonly ["label", "text", "initial", "delta", "final"];
}>;
textposition: Attr<
| "auto"
| "none"
| "inside"
| "outside"
| readonly ("auto" | "none" | "inside" | "outside")[], {
arrayOk: true;
description: "Where bar labels go: `inside` (against the bar end, see `insidetextanchor`), `outside` (past the bar end; inner bars of a stack stay inside), `auto` (inside when it fits, else outside), `none`.";
dflt: "auto";
editType: "calc";
values: readonly ["inside", "outside", "auto", "none"];
}>;
texttemplate: Attr<string | readonly string[], {
arrayOk: true;
description: "Template for bar labels, overriding `textinfo` and `text`: `%{initial}`, `%{delta}` and `%{final}` (the running total before and after the bar, and its change), `%{label}` (position), `%{value}`, `%{x}`, `%{y}`, `%{text}`, `%{customdata}`, `%{meta}`, with optional d3 formats (`%{delta:+.1f}`).";
dflt: "";
editType: "plot";
}>;
totals: ObjectNode<{
marker: ObjectNode<{
color: Attr<string, {
description: | `Fill color of ${string}. Default `'#3D9970'`.`
| `Fill color of ${string}. Default `'#FF4136'`.`
| `Fill color of ${string}. Default `'#4499FF'`.`;
editType: "style";
}>;
line: ObjectNode<{
color: Attr<string, {
description: `Outline color of ${(...)}.`;
dflt: "#444";
editType: "style";
}>;
width: Attr<number, {
description: `Outline width in CSS px of ${(...)} (centered on the edge).`;
dflt: 0;
editType: "style";
min: 0;
}>;
}>;
}>;
}>;
width: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Bar width in position-axis units (category slots, or ms on date axes: `86400000` is one day), one value or one per bar. Default: the slot left by `layout.bargap` and the bar mode.";
editType: "calc";
min: 0;
}>;
x: AttrSpec<DataArray, DataArray | undefined>;
x0: AttrSpec<unknown, unknown>;
xperiod: AttrSpec<unknown, unknown>;
xperiod0: AttrSpec<unknown, unknown>;
xperiodalignment: Attr<"start" | "middle" | "end", {
description: | "Where points sit within their `xperiod`."
| "Where points sit within their `yperiod`.";
dflt: "middle";
editType: "calc";
values: readonly ["start", "middle", "end"];
}>;
y: AttrSpec<DataArray, DataArray | undefined>;
y0: AttrSpec<unknown, unknown>;
yperiod: AttrSpec<unknown, unknown>;
yperiod0: AttrSpec<unknown, unknown>;
yperiodalignment: Attr<"start" | "middle" | "end", {
description: | "Where points sit within their `xperiod`."
| "Where points sit within their `yperiod`.";
dflt: "middle";
editType: "calc";
values: readonly ["start", "middle", "end"];
}>;
zorder: Attr<number, {
description: "Stacking order among the traces of a subplot: higher is drawn on top. At equal `zorder`, bars draw below scatter traces (Plotly’s layer order), then in trace order.";
dflt: 0;
editType: "plot";
}>;
}>;Experimental
The waterfall schema. Common trace attributes (name, opacity, xaxis, …) come from core.