Waterfall Charts

BinderNotebook

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 values 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
module Defaults from Plotly.NET
<summary> Contains mutable global default values. Changing these values will apply the default values to all consecutive Chart generations. </summary>
val mutable DefaultDisplayOptions: DisplayOptions
Multiple items
type DisplayOptions = inherit DynamicObj new: unit -> DisplayOptions static member addAdditionalHeadTags: additionalHeadTags: XmlNode list -> (DisplayOptions -> DisplayOptions) static member addDescription: description: XmlNode list -> (DisplayOptions -> DisplayOptions) static member combine: first: DisplayOptions -> second: DisplayOptions -> DisplayOptions static member getAdditionalHeadTags: displayOpts: DisplayOptions -> XmlNode list static member getDescription: displayOpts: DisplayOptions -> XmlNode list static member getPlotlyReference: displayOpts: DisplayOptions -> PlotlyJSReference static member init: ?AdditionalHeadTags: XmlNode list * ?Description: XmlNode list * ?PlotlyJSReference: PlotlyJSReference -> DisplayOptions static member initCDNOnly: unit -> DisplayOptions ...

--------------------
new: unit -> DisplayOptions
static member DisplayOptions.init: ?AdditionalHeadTags: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?Description: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?PlotlyJSReference: PlotlyJSReference -> DisplayOptions
type PlotlyJSReference = | CDN of string | Full | Require of string | NoReference
<summary> Sets how plotly is referenced in the head of html docs. </summary>
union case PlotlyJSReference.NoReference: PlotlyJSReference
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<'a3> * ?MultiX: seq<seq<'a3>> * ?XGap: int * ?Y: seq<'a4> * ?MultiY: seq<seq<'a4>> * ?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 'a3 :> IConvertible and 'a4 :> 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 * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?FillColor: Color * ?FillPatternShape: PatternShape * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 1 overload static member Bar: values: seq<#IConvertible> * ?Keys: seq<'a1> * ?MultiKeys: seq<seq<'a1>> * ?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 'a1 :> IConvertible and 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot: ?X: seq<'a0> * ?MultiX: seq<seq<'a0>> * ?Y: seq<'a1> * ?MultiY: seq<seq<'a1>> * ?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 'a0 :> IConvertible and 'a1 :> IConvertible and '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 * ?AlignmentGroup: string * ?OffsetGroup: string * ?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<'a4> * ?MultiX: seq<seq<'a4>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Text: 'a5 * ?MultiText: seq<'a5> * ?Line: Line * ?IncreasingColor: Color * ?Increasing: FinanceMarker * ?DecreasingColor: Color * ?Decreasing: FinanceMarker * ?WhiskerWidth: float * ?ShowXAxisRangeSlider: bool * ?UseDefaults: bool -> GenericChart (requires 'a4 :> IConvertible and 'a5 :> IConvertible) + 2 overloads static member Column: values: seq<#IConvertible> * ?Keys: seq<'a1> * ?MultiKeys: seq<seq<'a1>> * ?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 'a1 :> IConvertible and 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour: zData: seq<#seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<'a2> * ?MultiX: seq<seq<'a2>> * ?Y: seq<'a3> * ?MultiY: seq<seq<'a3>> * ?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 'a2 :> IConvertible and 'a3 :> 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>> * ?X: seq<'a2> * ?MultiX: seq<seq<'a2>> * ?Y: seq<'a3> * ?MultiY: seq<seq<'a3>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?XGap: int * ?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 'a2 :> IConvertible and 'a3 :> 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
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