Waterfall Charts

BinderScriptNotebook

Summary: This example shows how to create waterfall charts in F#.

Waterfall charts are special bar charts that help visualizing the cumulative effect of sequentially introduced positive or negative values.

In addition to the x and y values, a WaterfallMeasure can be passed corresponding to each xy pair (there is also a constructor overload using a tripel of x,y,measure). 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.

open Plotly.NET 
open Plotly.NET.TraceObjects
open Plotly.NET.LayoutObjects

let waterfall1 =
    Chart.Waterfall(
        x = ["Sales"; "Consulting"; "Net revenue"; "Purchases"; "Other expenses"; "Profit before tax"],
        y = [60; 80; 0; -40; -20; 0],
        Measure = [
            StyleParam.WaterfallMeasure.Relative
            StyleParam.WaterfallMeasure.Relative
            StyleParam.WaterfallMeasure.Total
            StyleParam.WaterfallMeasure.Relative
            StyleParam.WaterfallMeasure.Relative
            StyleParam.WaterfallMeasure.Total
        ]
    )

Horizontal waterfall charts

Set the orientation argument to Horizontal to create a horizontal waterfall. Keep in mind to correctly assign x and y values (the vallues are switched on the axes in comparison to the chart example above) To keep better track of which measure belongs to which datum, use

let waterfall2 =
    Chart.Waterfall(
        xymeasures = [
             60 , "Sales"             , StyleParam.WaterfallMeasure.Relative
             80 , "Consulting"        , StyleParam.WaterfallMeasure.Relative
             0  , "Net revenue"       , StyleParam.WaterfallMeasure.Total
             -40, "Purchases"         , StyleParam.WaterfallMeasure.Relative
             -20, "Other expenses"    , StyleParam.WaterfallMeasure.Relative
             0  , "Profit before tax" , StyleParam.WaterfallMeasure.Total
        ],
        Orientation = StyleParam.Orientation.Horizontal
    )
namespace Plotly
namespace Plotly.NET
namespace Plotly.NET.TraceObjects
namespace Plotly.NET.LayoutObjects
val waterfall1: GenericChart.GenericChart
type Chart = static member AnnotatedHeatmap: zData: seq<#seq<'a1>> * annotationText: seq<#seq<string>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?XGap: int * ?Y: seq<#IConvertible> * ?YGap: int * ?Text: 'a5 * ?MultiText: seq<'a5> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a5 :> IConvertible) + 1 overload static member Area: x: seq<#IConvertible> * y: seq<#IConvertible> * ?ShowMarkers: bool * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: seq<MarkerSymbol> * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?FillColor: Color * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 1 overload static member Bar: values: seq<#IConvertible> * ?Keys: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: PatternShape * ?MultiMarkerPatternShape: seq<PatternShape> * ?MarkerPattern: Pattern * ?Marker: Marker * ?Base: #IConvertible * ?Width: 'a4 * ?MultiWidth: seq<'a4> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot: ?X: seq<#IConvertible> * ?Y: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Text: 'a2 * ?MultiText: seq<'a2> * ?FillColor: Color * ?MarkerColor: Color * ?Marker: Marker * ?Opacity: float * ?WhiskerWidth: float * ?BoxPoints: BoxPoints * ?BoxMean: BoxMean * ?Jitter: float * ?PointPos: float * ?Orientation: Orientation * ?OutlineColor: Color * ?OutlineWidth: float * ?Outline: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?Notched: bool * ?NotchWidth: float * ?QuartileMethod: QuartileMethod * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 2 overloads static member Bubble: x: seq<#IConvertible> * y: seq<#IConvertible> * sizes: seq<int> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: seq<MarkerSymbol> * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 1 overload static member Candlestick: ``open`` : seq<#IConvertible> * high: seq<#IConvertible> * low: seq<#IConvertible> * close: seq<#IConvertible> * x: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Text: 'a5 * ?MultiText: seq<'a5> * ?Line: Line * ?IncreasingColor: Color * ?Increasing: FinanceMarker * ?DecreasingColor: Color * ?Decreasing: FinanceMarker * ?WhiskerWidth: float * ?UseDefaults: bool -> GenericChart (requires 'a5 :> IConvertible) + 1 overload static member Column: values: seq<#IConvertible> * ?Keys: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: PatternShape * ?MultiMarkerPatternShape: seq<PatternShape> * ?MarkerPattern: Pattern * ?Marker: Marker * ?Base: #IConvertible * ?Width: 'a4 * ?MultiWidth: seq<'a4> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour: zData: seq<#seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?Y: seq<#IConvertible> * ?Text: 'a4 * ?MultiText: seq<'a4> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?Transpose: bool * ?ContourLineColor: Color * ?ContourLineDash: DrawingStyle * ?ContourLineSmoothing: float * ?ContourLine: Line * ?ContoursColoring: ContourColoring * ?ContoursOperation: ConstraintOperation * ?ContoursType: ContourType * ?ShowContourLabels: bool * ?ContourLabelFont: Font * ?Contours: Contours * ?FillColor: Color * ?NContours: int * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a4 :> IConvertible) static member Funnel: x: seq<#IConvertible> * y: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Width: float * ?Offset: float * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?Orientation: Orientation * ?AlignmentGroup: string * ?OffsetGroup: string * ?MarkerColor: Color * ?MarkerOutline: Line * ?Marker: Marker * ?TextInfo: TextInfo * ?ConnectorLineColor: Color * ?ConnectorLineStyle: DrawingStyle * ?ConnectorFillColor: Color * ?ConnectorLine: Line * ?Connector: FunnelConnector * ?InsideTextFont: Font * ?OutsideTextFont: Font * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) static member Heatmap: zData: seq<#seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?XGap: int * ?Y: seq<#IConvertible> * ?YGap: int * ?Text: 'a4 * ?MultiText: seq<'a4> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a4 :> IConvertible) + 1 overload ...
static member Chart.Waterfall: xymeasures: seq<#System.IConvertible * #System.IConvertible * StyleParam.WaterfallMeasure> * ?Name: string * ?ShowLegend: bool * ?IncreasingColor: Color * ?Increasing: FinanceMarker * ?DecreasingColor: Color * ?Decreasing: FinanceMarker * ?TotalsColor: Color * ?Totals: FinanceMarker * ?Base: float * ?Width: float * ?MultiWidth: seq<float> * ?Opacity: float * ?Text: 'c * ?MultiText: seq<'c> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?TextFont: Font * ?Connector: WaterfallConnector * ?AlignmentGroup: string * ?OffsetGroup: string * ?Orientation: StyleParam.Orientation * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'c :> System.IConvertible)
static member Chart.Waterfall: xy: seq<#System.IConvertible * #System.IConvertible> * ?Name: string * ?ShowLegend: bool * ?IncreasingColor: Color * ?Increasing: FinanceMarker * ?DecreasingColor: Color * ?Decreasing: FinanceMarker * ?TotalsColor: Color * ?Totals: FinanceMarker * ?Base: float * ?Width: float * ?MultiWidth: seq<float> * ?Opacity: float * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?TextFont: Font * ?Connector: WaterfallConnector * ?Measure: seq<StyleParam.WaterfallMeasure> * ?AlignmentGroup: string * ?OffsetGroup: string * ?Orientation: StyleParam.Orientation * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'a2 :> System.IConvertible)
static member Chart.Waterfall: x: seq<#System.IConvertible> * y: seq<#System.IConvertible> * ?Name: string * ?ShowLegend: bool * ?IncreasingColor: Color * ?Increasing: FinanceMarker * ?DecreasingColor: Color * ?Decreasing: FinanceMarker * ?TotalsColor: Color * ?Totals: FinanceMarker * ?Base: float * ?Width: float * ?MultiWidth: seq<float> * ?Opacity: float * ?Text: 'c * ?MultiText: seq<'c> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?TextFont: Font * ?Connector: WaterfallConnector * ?Measure: seq<StyleParam.WaterfallMeasure> * ?AlignmentGroup: string * ?OffsetGroup: string * ?Orientation: StyleParam.Orientation * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'c :> System.IConvertible)
argument x: seq<string>
<summary> Creates a waterfall chart. Waterfall charts are special bar charts that help visualizing the cumulative effect of sequentially introduced positive or negative values </summary>
<param name="x">Sets the x coordinates of the plotted data.</param>
<param name="y">Sets the y coordinates of the plotted data.</param>
<param name="Name">Sets the trace name. The trace name appear as the legend item and on hover</param>
<param name="ShowLegend">Determines whether or not an item corresponding to this trace is shown in the legend.</param>
<param name="IncreasingColor">Sets the color of increasing values</param>
<param name="Increasing">Sets the style options of increasing values (use this for more finegrained control than the other increasing-associated arguments).</param>
<param name="DecreasingColor">Sets the color of decreasing values</param>
<param name="Decreasing">Sets the style options of decreasing values (use this for more finegrained control than the other increasing-associated arguments).</param>
<param name="TotalsColor">Sets the color of total values</param>
<param name="Totals">Sets the style options of total values (use this for more finegrained control than the other increasing-associated arguments).</param>
<param name="Base">Sets where the bar base is drawn (in position axis units).</param>
<param name="Width">Sets the bar width (in position axis units).</param>
<param name="MultiWidth">Sets the individual bar width of each datum (in position axis units).</param>
<param name="Opacity">Sets the opacity of the trace.</param>
<param name="Text">Sets a text associated with each datum</param>
<param name="MultiText">Sets individual text for each datum</param>
<param name="TextPosition">Sets the position of text associated with each datum</param>
<param name="MultiTextPosition">Sets the position of text associated with individual datum</param>
<param name="TextFont">Sets the font used for `text`.</param>
<param name="Connector">Sets the waterfall connector of this trace</param>
<param name="Measure">An array containing types of measures. 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.</param>
<param name="AlignmentGroup">Set several traces linked to the same position axis or matching axes to the same alignmentgroup. This controls whether bars compute their positional range dependently or independently.</param>
<param name="OffsetGroup">Set several traces linked to the same position axis or matching axes to the same offsetgroup where bars of the same position coordinate will line up.</param>
<param name="Orientation">Only relevant when `stackgroup` is used, and only the first `orientation` found in the `stackgroup` will be used - including if `visible` is "legendonly" but not if it is `false`. Sets the stacking direction. With "v" ("h"), the y (x) values of subsequent traces are added. Also affects the default value of `fill`.</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>
argument y: seq<int>
<summary> Creates a waterfall chart. Waterfall charts are special bar charts that help visualizing the cumulative effect of sequentially introduced positive or negative values </summary>
<param name="x">Sets the x coordinates of the plotted data.</param>
<param name="y">Sets the y coordinates of the plotted data.</param>
<param name="Name">Sets the trace name. The trace name appear as the legend item and on hover</param>
<param name="ShowLegend">Determines whether or not an item corresponding to this trace is shown in the legend.</param>
<param name="IncreasingColor">Sets the color of increasing values</param>
<param name="Increasing">Sets the style options of increasing values (use this for more finegrained control than the other increasing-associated arguments).</param>
<param name="DecreasingColor">Sets the color of decreasing values</param>
<param name="Decreasing">Sets the style options of decreasing values (use this for more finegrained control than the other increasing-associated arguments).</param>
<param name="TotalsColor">Sets the color of total values</param>
<param name="Totals">Sets the style options of total values (use this for more finegrained control than the other increasing-associated arguments).</param>
<param name="Base">Sets where the bar base is drawn (in position axis units).</param>
<param name="Width">Sets the bar width (in position axis units).</param>
<param name="MultiWidth">Sets the individual bar width of each datum (in position axis units).</param>
<param name="Opacity">Sets the opacity of the trace.</param>
<param name="Text">Sets a text associated with each datum</param>
<param name="MultiText">Sets individual text for each datum</param>
<param name="TextPosition">Sets the position of text associated with each datum</param>
<param name="MultiTextPosition">Sets the position of text associated with individual datum</param>
<param name="TextFont">Sets the font used for `text`.</param>
<param name="Connector">Sets the waterfall connector of this trace</param>
<param name="Measure">An array containing types of measures. 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.</param>
<param name="AlignmentGroup">Set several traces linked to the same position axis or matching axes to the same alignmentgroup. This controls whether bars compute their positional range dependently or independently.</param>
<param name="OffsetGroup">Set several traces linked to the same position axis or matching axes to the same offsetgroup where bars of the same position coordinate will line up.</param>
<param name="Orientation">Only relevant when `stackgroup` is used, and only the first `orientation` found in the `stackgroup` will be used - including if `visible` is "legendonly" but not if it is `false`. Sets the stacking direction. With "v" ("h"), the y (x) values of subsequent traces are added. Also affects the default value of `fill`.</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>
Multiple items
type MeasureAttribute = inherit Attribute new: unit -> MeasureAttribute
<summary>Adding this attribute to a type causes it to be interpreted as a unit of measure. This may only be used under very limited conditions.</summary>
<category>Attributes</category>


--------------------
new: unit -> MeasureAttribute
module StyleParam from Plotly.NET
type WaterfallMeasure = | Relative | Total | Absolute member Convert: unit -> obj override ToString: unit -> string static member convert: (WaterfallMeasure -> obj) static member toString: (WaterfallMeasure -> string)
<summary> How to compute differences between bars in Waterfall Charts </summary>
union case StyleParam.WaterfallMeasure.Relative: StyleParam.WaterfallMeasure
union case StyleParam.WaterfallMeasure.Total: StyleParam.WaterfallMeasure
module GenericChart from Plotly.NET
<summary> Module to represent a GenericChart </summary>
val toChartHTML: gChart: GenericChart.GenericChart -> string
<summary> Converts a GenericChart to it HTML representation. The div layer has a default size of 600 if not specified otherwise. </summary>
val waterfall2: GenericChart.GenericChart
type Orientation = | Horizontal | Vertical member Convert: unit -> obj override ToString: unit -> string static member convert: (Orientation -> obj) static member toString: (Orientation -> string)
union case StyleParam.Orientation.Horizontal: StyleParam.Orientation