# Waterfall

### Data Source

<details>

<summary>Base</summary>

**Type**: number

**Accept List**: false

**Documentation**: Sets where the bar base is drawn (in position axis units).

**Path**: data.index.base

</details>

<details>

<summary>Measure</summary>

**Default Value**: \[List]

**Type**: any

**Accept List**: true

**Documentation**: An array containing types of values. By default the values are considered as 'relative'. However; it is possible to use 'total' to compute the sums. Also 'absolute' could be applied to reset the computed total or to declare an initial value where needed.

**Path**: data.index.measure

</details>

<details>

<summary>Text</summary>

**Default Value**:

**Type**: string

**Accept List**: true

**Documentation**: Sets text elements associated with each (x,y) pair. If a single string, the same string appears over all the data points. If an array of string, the items are mapped in order to the this trace's (x,y) coordinates. If trace `hoverinfo` contains a *text* flag and *hovertext* is not set, these elements will be seen in the hover labels.

**Path**: data.index.text

</details>

<details>

<summary>X</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the x coordinates.

**Path**: data.index.x

</details>

<details>

<summary>Y</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the y coordinates.

**Path**: data.index.y

</details>

***

### Connector Options

<details>

<summary>Line Color</summary>

**Default Value**: #444

**Type**: color

**Documentation**: Sets the line color.

**Path**: data.index.connector.line.color

</details>

<details>

<summary>Line Dash</summary>

**Default Value**: solid

**Type**: string

**Enum Options**: solid,dot,dash,longdash,dashdot,longdashdot

**Documentation**: Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).

**Path**: data.index.connector.line.dash

</details>

<details>

<summary>Line Width</summary>

**Default Value**: 2

**Type**: number

**Min**: 0

**Documentation**: Sets the line width (in px).

**Path**: data.index.connector.line.width

</details>

<details>

<summary>Mode</summary>

**Default Value**: between

**Type**: enumerated

**Enum Options**: spanning,between

**Documentation**: Sets the shape of connector lines.

**Path**: data.index.connector.mode

</details>

<details>

<summary>Visible</summary>

**Default Value**: true

**Type**: boolean

**Documentation**: Determines if connector lines are drawn.

**Path**: data.index.connector.visible

</details>

***

### Decreasing Items Styling

<details>

<summary>Marker Color</summary>

**Type**: color

**Accept List**: false

**Documentation**: Sets the marker color of all decreasing values.

**Path**: data.index.decreasing.marker.color

</details>

<details>

<summary>Line Color</summary>

**Type**: color

**Accept List**: false

**Documentation**: Sets the line color of all decreasing values.

**Path**: data.index.decreasing.marker.line.color

</details>

<details>

<summary>Line Width</summary>

**Default Value**: 0

**Type**: number

**Accept List**: false

**Min**: 0

**Documentation**: Sets the line width of all decreasing values.

**Path**: data.index.decreasing.marker.line.width

</details>

***

### Hover Formatting

<details>

<summary>Hover Info</summary>

**Default Value**: all

**Type**: flaglist

**Accept List**: true

**Flag Options**: name,x,y,text,initial,delta,final

**Flag Single**: all,none,skip

**Documentation**: Determines which trace information appear on hover. If `none` or `skip` are set, no information is displayed upon hovering. But, if `none` is set, click and hover events are still fired.

**Path**: data.index.hoverinfo

</details>

<details>

<summary>Hover Template</summary>

**Default Value**:

**Type**: string

**Accept List**: true

**Documentation**: Template string used for rendering the information that appear on hover box. Note that this will override `hoverinfo`. Variables are inserted using %{variable}, for example "y: %{y}" as well as %{xother}, {%*xother}, {%xother}, {%xother*}. When showing info for several points, *xother* will be added to those with different x positions from the first point. An underscore before or after *(x|y)other* will add a space on that side, only when this field is shown. Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". <https://github.com/d3/d3-format/tree/v1.4.5#d3-format> for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". <https://github.com/d3/d3-time-format/tree/v2.2.3#locale\\_format> for details on the date formatting syntax. The variables available in `hovertemplate` are the ones emitted as event data described at this link <https://plotly.com/javascript/plotlyjs-events/#event-data>. Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. Finally, the template string has access to variables `initial`, `delta` and `final`. Anything contained in tag `<extra>` is displayed in the secondary box, for example "{fullData.name}". To hide the secondary box completely, use an empty tag `<extra></extra>`.

**Path**: data.index.hovertemplate

</details>

***

### Increasing Items Styling

<details>

<summary>Marker Color</summary>

**Type**: color

**Accept List**: false

**Documentation**: Sets the marker color of all increasing values.

**Path**: data.index.increasing.marker.color

</details>

<details>

<summary>Line Color</summary>

**Type**: color

**Accept List**: false

**Documentation**: Sets the line color of all increasing values.

**Path**: data.index.increasing.marker.line.color

</details>

<details>

<summary>Line Width</summary>

**Default Value**: 0

**Type**: number

**Accept List**: false

**Min**: 0

**Documentation**: Sets the line width of all increasing values.

**Path**: data.index.increasing.marker.line.width

</details>

***

### Text and Hover Formatting

<details>

<summary>Inside Text Anchor</summary>

**Default Value**: end

**Type**: enumerated

**Enum Options**: end,middle,start

**Documentation**: Determines if texts are kept at center or start/end points in `textposition` *inside* mode.

**Path**: data.index.insidetextanchor

</details>

***

### Basic Options

<details>

<summary>Name</summary>

**Type**: string

**Documentation**: Sets the trace name. The trace name appears as the legend item and on hover.

**Path**: data.index.name

</details>

<details>

<summary>Offset</summary>

**Type**: number

**Accept List**: true

**Documentation**: Shifts the position where the bar is drawn (in position axis units). In *group* barmode, traces that set *offset* will be excluded and drawn in *overlay* mode instead.

**Path**: data.index.offset

</details>

<details>

<summary>Opacity</summary>

**Default Value**: 1

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the opacity of the trace.

**Path**: data.index.opacity

</details>

<details>

<summary>Orientation</summary>

**Type**: enumerated

**Enum Options**: v,h

**Documentation**: Sets the orientation of the bars. With *v* (*h*), the value of the each bar spans along the vertical (horizontal).

**Path**: data.index.orientation

</details>

***

### Text Formatting

<details>

<summary>Text Angle</summary>

**Default Value**: auto

**Type**: angle

**Documentation**: Sets the angle of the tick labels with respect to the bar. For example, a `tickangle` of -90 draws the tick labels vertically. With *auto* the texts may automatically be rotated to fit with the maximum size in bars.

**Path**: data.index.textangle

</details>

<details>

<summary>Color</summary>

**Type**: color

**Accept List**: true

**Path**: data.index.textfont.color

</details>

<details>

<summary>Size</summary>

**Type**: number

**Accept List**: true

**Min**: 1

**Path**: data.index.textfont.size

</details>

<details>

<summary>Text Info</summary>

**Type**: flaglist

**Accept List**: false

**Flag Options**: label,text,initial,delta,final

**Flag Single**: none

**Documentation**: Determines which trace information appear on the graph. In the case of having multiple waterfalls, totals are computed separately (per trace).

**Path**: data.index.textinfo

</details>

<details>

<summary>Text Position</summary>

**Default Value**: auto

**Type**: enumerated

**Accept List**: true

**Enum Options**: inside,outside,auto,none

**Documentation**: Specifies the location of the `text`. *inside* positions `text` inside, next to the bar end (rotated and scaled if needed). *outside* positions `text` outside, next to the bar end (scaled if needed), unless there is another bar stacked on this one, then the text gets pushed inside. *auto* tries to position `text` inside the bar, but if the bar is too small and no bar is stacked on this one the text is moved outside. If *none*, no text appears.

**Path**: data.index.textposition

</details>

<details>

<summary>Text Template</summary>

**Default Value**:

**Type**: string

**Accept List**: true

**Documentation**: Template string used for rendering the information text that appear on points. Note that this will override `textinfo`. Variables are inserted using %{variable}, for example "y: %{y}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". <https://github.com/d3/d3-format/tree/v1.4.5#d3-format> for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". <https://github.com/d3/d3-time-format/tree/v2.2.3#locale\\_format> for details on the date formatting syntax. Every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. Finally, the template string has access to variables `initial`, `delta`, `final` and `label`.

**Path**: data.index.texttemplate

</details>

***

### Totals Items Options

<details>

<summary>Marker Color</summary>

**Type**: color

**Accept List**: false

**Documentation**: Sets the marker color of all intermediate sums and total values.

**Path**: data.index.totals.marker.color

</details>

<details>

<summary>Line Color</summary>

**Type**: color

**Accept List**: false

**Documentation**: Sets the line color of all intermediate sums and total values.

**Path**: data.index.totals.marker.line.color

</details>

<details>

<summary>Line Width</summary>

**Default Value**: 0

**Type**: number

**Accept List**: false

**Min**: 0

**Documentation**: Sets the line width of all intermediate sums and total values.

**Path**: data.index.totals.marker.line.width

</details>

***

### Items Styling

<details>

<summary>Width</summary>

**Type**: number

**Accept List**: true

**Min**: 0

**Documentation**: Sets the bar width (in position axis units).

**Path**: data.index.width

</details>

***

### Calendar Options

<details>

<summary>X Period</summary>

**Default Value**: 0

**Type**: any

**Documentation**: Only relevant when the axis `type` is *date*. Sets the period positioning in milliseconds or *M* on the x axis. Special values in the form of *M* could be used to declare the number of months. In this case `n` must be a positive integer.

**Path**: data.index.xperiod

</details>

<details>

<summary>X Period Alignment</summary>

**Default Value**: middle

**Type**: enumerated

**Enum Options**: start,middle,end

**Documentation**: Only relevant when the axis `type` is *date*. Sets the alignment of data points on the x axis.

**Path**: data.index.xperiodalignment

</details>

***

### Multi Trace Options

<details>

<summary>Waterfall Gap</summary>

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the gap (in plot fraction) between bars of adjacent location coordinates.

**Path**: layout.waterfallgap

</details>

<details>

<summary>Waterfall Group Gap</summary>

**Default Value**: 0

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the gap (in plot fraction) between bars of the same location coordinate.

**Path**: layout.waterfallgroupgap

</details>

<details>

<summary>Waterfall Mode</summary>

**Default Value**: group

**Type**: enumerated

**Enum Options**: group,overlay

**Documentation**: Determines how bars at the same location coordinate are displayed on the graph. With *group*, the bars are plotted next to one another centered around the shared location. With *overlay*, the bars are plotted over one another, you might need to reduce *opacity* to see multiple bars.

**Path**: layout.waterfallmode

</details>