Logo Plotly.NET

Bar and column charts

Binder  Notebook

Summary: This example shows how to create bar and a column charts in F#.

Let's first create some data for the purpose of creating example charts:

open Plotly.NET

let values = [ 20; 14; 23 ]
let keys = [ "Product A"; "Product B"; "Product C" ]

A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally. A vertical bar chart is called a column bar chart.

Column Charts

let column = Chart.Column(values = values, Keys = keys)

Bar Charts

let bar = Chart.Bar(values = values, Keys = keys)

Stacked bar chart or column charts

The following example shows how to create a stacked bar chart by combining bar charts created by combining multiple Chart.StackedBar charts:

Basically, those charts are just normal bar/column charts with the Layout property BarMode set to Stack. You can do this yourself by changing the Chart layout.

Stacked bar Charts

let stackedBar =
    [ Chart.StackedBar(values = values, Keys = keys, Name = "old")
      Chart.StackedBar(values = [ 8; 21; 13 ], Keys = keys, Name = "new") ]
    |> Chart.combine

(*
### Stacked bar Charts
*)

let stackedColumn =
    [ Chart.StackedColumn(values = values, Keys = keys, Name = "old")
      Chart.StackedColumn(values = [ 8; 21; 13 ], Keys = keys, Name = "new") ]
    |> Chart.combine
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: Plotly.NET.DisplayOptions
Multiple items
type DisplayOptions = inherit DynamicObj new: unit -> DisplayOptions static member addAdditionalHeadTags: additionalHeadTags: XmlNode list -> (DisplayOptions -> DisplayOptions) static member addChartDescription: description: XmlNode list -> (DisplayOptions -> DisplayOptions) static member combine: first: DisplayOptions -> second: DisplayOptions -> DisplayOptions static member getAdditionalHeadTags: displayOpts: DisplayOptions -> XmlNode list static member getChartDescription: displayOpts: DisplayOptions -> XmlNode list static member getDocumentCharset: displayOpts: DisplayOptions -> string static member getDocumentDescription: displayOpts: DisplayOptions -> string static member getDocumentFavicon: displayOpts: DisplayOptions -> XmlNode ...

--------------------
new: unit -> Plotly.NET.DisplayOptions
static member Plotly.NET.DisplayOptions.init: ?DocumentTitle: string * ?DocumentCharset: string * ?DocumentDescription: string * ?DocumentFavicon: Giraffe.ViewEngine.HtmlElements.XmlNode * ?AdditionalHeadTags: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?ChartDescription: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?PlotlyJSReference: Plotly.NET.PlotlyJSReference -> Plotly.NET.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 Plotly.NET.PlotlyJSReference.NoReference: Plotly.NET.PlotlyJSReference
val values: int list
val keys: string list
val column: GenericChart
type Chart = static member Bubble: x: #IConvertible seq * y: #IConvertible seq * sizes: int seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?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 'c :> IConvertible) + 2 overloads static member Line: x: #IConvertible seq * y: #IConvertible seq * ?ShowMarkers: bool * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Point: x: #IConvertible seq * y: #IConvertible seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Range: x: #IConvertible seq * y: #IConvertible seq * upper: #IConvertible seq * lower: #IConvertible seq * mode: Mode * ?Name: string * ?GroupName: string * ?ShowMarkers: bool * ?ShowLegend: bool * ?Text: 'e * ?MultiText: 'e seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?UpperMarker: Marker * ?LowerMarker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?UpperLine: Line * ?LowerLine: Line * ?RangeColor: Color * ?RangePattern: Pattern * ?UpperText: 'f * ?MultiUpperText: 'f seq * ?LowerText: 'g * ?MultiLowerText: 'g seq * ?TextFont: Font * ?LowerName: string * ?UpperName: string * ?UseDefaults: bool -> GenericChart (requires 'e :> IConvertible and 'f :> IConvertible and 'g :> IConvertible) + 2 overloads static member Scatter: ?X: 'a seq * ?XEncoded: EncodedTypedArray * ?MultiX: 'a seq seq * ?Y: 'b seq * ?YEncoded: EncodedTypedArray * ?MultiY: 'b seq seq * ?Mode: Mode * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a :> IConvertible and 'b :> IConvertible and 'c :> IConvertible) + 3 overloads static member Spline: x: #IConvertible seq * y: #IConvertible seq * ?ShowMarkers: bool * ?Smoothing: float * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads
static member Chart.Column: keysValues: (#System.IConvertible * #System.IConvertible) seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: 'e * ?MultiWidth: 'e seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'c :> System.IConvertible and 'e :> System.IConvertible)
static member Chart.Column: valuesEncoded: EncodedTypedArray * ?KeysEncoded: EncodedTypedArray * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'a * ?MultiText: 'a seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: #System.IConvertible * ?MultiWidthEncoded: EncodedTypedArray * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible)
static member Chart.Column: values: #System.IConvertible seq * ?Keys: 'b seq * ?MultiKeys: 'b seq seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: 'e * ?MultiWidth: 'e seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'b :> System.IConvertible and 'c :> System.IConvertible and 'e :> System.IConvertible)
type GenericChart = | Chart of data: Trace * layout: Layout * config: Config * displayOpts: DisplayOptions | MultiChart of data: Trace list * layout: Layout * config: Config * displayOpts: DisplayOptions static member addConfig: config: Config -> gChart: GenericChart -> GenericChart static member addDisplayOptions: displayOpts: DisplayOptions -> gChart: GenericChart -> GenericChart static member addLayout: layout: Layout -> gChart: GenericChart -> GenericChart static member combine: gCharts: GenericChart seq -> GenericChart static member countTrace: gChart: GenericChart -> int static member existsTrace: predicate: (Trace -> bool) -> gChart: GenericChart -> bool static member fromChartDTO: dto: ChartDTO -> GenericChart static member fromFigure: fig: Figure -> GenericChart static member getConfig: gChart: GenericChart -> Config static member getDisplayOptions: gChart: GenericChart -> DisplayOptions ...
<summary> The central type that gets created by all Chart constructors is GenericChart, which itself represents either a single chart or a multi chart (as a Discriminate Union type). A GenericChart consists of four top level objects: Trace (multiple of those in the case of a MultiChart), Layout, Config, and DisplayOptions. - `Trace` is in principle the representation of a dataset on a chart, including for example the data itself, color and shape of the visualization, etc. - `Layout` is everything of the chart that is not dataset specific - e.g. the shape and style of axes, the chart title, etc. - `Config` is an object that configures high level properties of the chart like making all chart elements editable or the tool bar on top - `DisplayOptions` is an object that contains meta information about how the html document that contains the chart. </summary>
static member GenericChart.toChartHTML: gChart: GenericChart -> string
val bar: GenericChart
static member Chart.Bar: keysValues: (#System.IConvertible * #System.IConvertible) seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: 'e * ?MultiWidth: 'e seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'c :> System.IConvertible and 'e :> System.IConvertible)
static member Chart.Bar: valuesEncoded: EncodedTypedArray * ?KeysEncoded: EncodedTypedArray * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'a * ?MultiText: 'a seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: #System.IConvertible * ?MultiWidthEncoded: EncodedTypedArray * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible)
static member Chart.Bar: values: #System.IConvertible seq * ?Keys: 'b seq * ?MultiKeys: 'b seq seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: 'e * ?MultiWidth: 'e seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'b :> System.IConvertible and 'c :> System.IConvertible and 'e :> System.IConvertible)
val stackedBar: GenericChart
static member Chart.StackedBar: keysValues: (#System.IConvertible * #System.IConvertible) seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: 'e * ?MultiWidth: 'e seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'c :> System.IConvertible and 'e :> System.IConvertible)
static member Chart.StackedBar: valuesEncoded: EncodedTypedArray * ?KeysEncoded: EncodedTypedArray * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'a * ?MultiText: 'a seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: #System.IConvertible * ?MultiWidthEncoded: EncodedTypedArray * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible)
static member Chart.StackedBar: values: #System.IConvertible seq * ?Keys: 'b seq * ?MultiKeys: 'b seq seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: 'e * ?MultiWidth: 'e seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'b :> System.IConvertible and 'c :> System.IConvertible and 'e :> System.IConvertible)
static member Chart.combine: gCharts: GenericChart seq -> GenericChart
val stackedColumn: GenericChart
static member Chart.StackedColumn: keysValues: (#System.IConvertible * #System.IConvertible) seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: 'e * ?MultiWidth: 'e seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'c :> System.IConvertible and 'e :> System.IConvertible)
static member Chart.StackedColumn: valuesEncoded: EncodedTypedArray * ?KeysEncoded: EncodedTypedArray * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'a * ?MultiText: 'a seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: #System.IConvertible * ?MultiWidthEncoded: EncodedTypedArray * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible)
static member Chart.StackedColumn: values: #System.IConvertible seq * ?Keys: 'b seq * ?MultiKeys: 'b seq seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: TraceObjects.Pattern * ?Marker: TraceObjects.Marker * ?Base: #System.IConvertible * ?Width: 'e * ?MultiWidth: 'e seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?UseDefaults: bool -> GenericChart (requires 'b :> System.IConvertible and 'c :> System.IConvertible and 'e :> System.IConvertible)

Type something to start searching.