XPlot


Plotly Bar Charts

Full source

Basic Bar Chart

1: 
2: 
3: 
4: 
5: 
6: 
7: 
let layout = Layout(title = "Basic Bar Chart")

["giraffes", 20; "orangutans", 14; "monkeys", 23]
|> Chart.Bar
|> Chart.WithLayout layout
|> Chart.WithHeight 500
|> Chart.WithWidth 700

Grouped Bar Chart

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
let groupedTrace1 =
    Bar(
        x = ["giraffes"; "orangutans"; "monkeys"],
        y = [20; 14; 23],
        name= "SF Zoo"            
    )

let groupedTrace2 =
    Bar(
        x = ["giraffes"; "orangutans"; "monkeys"],
        y = [12; 18; 29],
        name = "LA Zoo"
    )

let groupedLayout = Layout(barmode = "group")

[groupedTrace1; groupedTrace2]
|> Chart.Plot
|> Chart.WithLayout groupedLayout
|> Chart.WithHeight 500
|> Chart.WithWidth 700

Stacked Bar Chart

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
let stackedTrace1 =
    Bar(
        x = ["giraffes"; "orangutans"; "monkeys"],
        y = [20; 14; 23],
        name = "SF Zoo"
    )

let stackedTrace2 =
    Bar(
        x= ["giraffes"; "orangutans"; "monkeys"],
        y= [12; 18; 29],
        name = "LA Zoo"
    )

let stackedLayout = Layout(barmode = "stack")

[stackedTrace1; stackedTrace2]
|> Chart.Plot
|> Chart.WithLayout stackedLayout
|> Chart.WithHeight 500
|> Chart.WithWidth 700

Colored and Styled Bar Chart

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
let styledTrace1 =
    Bar(
        x =
            [1995; 1996; 1997; 1998; 1999; 2000; 2001; 2002; 2003; 2004; 2005; 2006;
             2007; 2008; 2009; 2010; 2011; 2012],
        y =
            [219; 146; 112; 127; 124; 180; 236; 207; 236; 263; 350; 430; 474; 526; 488;
            537; 500; 439],
        name = "Rest of world",
        marker = Marker(color = "rgb(55, 83, 109)")
    )

let styledTrace2 =
    Bar(
        x =
            [1995; 1996; 1997; 1998; 1999; 2000; 2001; 2002; 2003; 2004; 2005; 2006;
            2007; 2008; 2009; 2010; 2011; 2012],
        y =
            [16; 13; 10; 11; 28; 37; 43; 55; 56; 88; 105; 156; 270; 299; 340; 403; 549;
            499],        
        name = "China",
        marker = Marker(color = "rgb(26, 118, 255)")
    )

let styledLayout =
    Layout(
        title = "US Export of Plastic Scrap",
        xaxis =
            Xaxis(
                tickfont =
                    Font(
                        size = 14.,
                        color = "rgb(107, 107, 107)"
                    )
            ),
        yaxis =
            Yaxis(
                title = "USD (millions)",
                titlefont =
                    Font(
                        size = 16.,
                        color = "rgb(107, 107, 107)"
                    ),
                tickfont =
                    Font(
                        size = 14.,
                        color = "rgb(107, 107, 107)"
                    )
            ),
        legend =
            Legend(
                x = 0.,
                y = 1.0,
                bgcolor = "rgba(255, 255, 255, 0)",
                bordercolor = "rgba(255, 255, 255, 0)"
            ),
        barmode = "group",
        bargap = 0.15,
        bargroupgap = 0.1
    )

[styledTrace1; styledTrace2]
|> Chart.Plot
|> Chart.WithLayout styledLayout
|> Chart.WithHeight 500
|> Chart.WithWidth 700

Bar Chart with Hover Text

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
let hoverTrace =
    Bar(
        x = ["Liam"; "Sophie"; "Jacob"; "Mia"; "William"; "Olivia"],
        y = [8.0; 8.0; 12.0; 12.0; 13.0; 20.0],
        text =
            ["4.17 below the mean"; "4.17 below the mean"; "0.17 below the mean";
            "0.17 below the mean"; "0.83 above the mean"; "7.83 above the mean"],
        marker = Marker(color = "rgb(142, 124, 195)")
    )

let hoverLayout =
    Layout(
        title = "Number of graphs made this week",
        font = Font(family = "Raleway, sans-serif"),
        showlegend = false,
        xaxis= Xaxis(tickangle = -45.),
        yaxis=
            Yaxis(
                zeroline = false,
                gridwidth = 2.
            ),
        bargap = 0.05
    )

hoverTrace
|> Chart.Plot
|> Chart.WithLayout hoverLayout
|> Chart.WithHeight 500
|> Chart.WithWidth 700

Customizing Individual Bar Colors

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
Bar(
    x = [1; 2; 3; 4],
    y = [5; 4; -3; 2],
    marker = Marker(color = ["#447adb"; "#447adb"; "#db5a44"; "#447adb"])
)
|> Chart.Plot
|> Chart.WithLayout hoverLayout
|> Chart.WithHeight 500
|> Chart.WithWidth 700
namespace XPlot
namespace XPlot.Plotly
val layout : Layout

Full name: Plotly-bar-charts.layout
Multiple items
module Layout

from XPlot.Plotly

--------------------
type Layout =
  new : unit -> Layout
  member ShouldSerializeangularaxis : unit -> bool
  member ShouldSerializeannotations : unit -> bool
  member ShouldSerializeautosize : unit -> bool
  member ShouldSerializebargap : unit -> bool
  member ShouldSerializebargroupgap : unit -> bool
  member ShouldSerializebarmode : unit -> bool
  member ShouldSerializeboxmode : unit -> bool
  member ShouldSerializedirection : unit -> bool
  member ShouldSerializedragmode : unit -> bool
  ...

Full name: XPlot.Plotly.Layout.Layout

--------------------
new : unit -> Layout
type Chart =
  static member Area : data:seq<#seq<'a1 * 'a2>> -> PlotlyChart (requires 'a1 :> key and 'a2 :> value)
  static member Area : data:seq<#key * #value> -> PlotlyChart
  static member Area : data:seq<#value> -> PlotlyChart
  static member Bar : data:seq<#seq<'a1 * 'a2>> -> PlotlyChart (requires 'a1 :> key and 'a2 :> value)
  static member Bar : data:seq<#key * #value> -> PlotlyChart
  static member Bar : data:seq<#value> -> PlotlyChart
  static member Bubble : data:seq<#key * #value * #value> -> PlotlyChart
  static member Column : data:seq<#seq<'a1 * 'a2>> -> PlotlyChart (requires 'a1 :> key and 'a2 :> value)
  static member Column : data:seq<#key * #value> -> PlotlyChart
  static member Column : data:seq<#value> -> PlotlyChart
  ...

Full name: XPlot.Plotly.Chart
static member Chart.Bar : data:seq<#seq<'a1 * 'a2>> -> PlotlyChart (requires 'a1 :> key and 'a2 :> value)
static member Chart.Bar : data:seq<#key * #value> -> PlotlyChart
static member Chart.Bar : data:seq<#value> -> PlotlyChart
static member Chart.WithLayout : layout:Layout -> chart:PlotlyChart -> PlotlyChart
static member Chart.WithHeight : height:int -> chart:PlotlyChart -> PlotlyChart
static member Chart.WithWidth : width:int -> chart:PlotlyChart -> PlotlyChart
val groupedTrace1 : Bar

Full name: Plotly-bar-charts.groupedTrace1
Multiple items
type Bar =
  inherit Trace
  new : unit -> Bar
  member ShouldSerializedx : unit -> bool
  member ShouldSerializedy : unit -> bool
  member ShouldSerializeerror_x : unit -> bool
  member ShouldSerializeerror_y : unit -> bool
  member ShouldSerializehoverinfo : unit -> bool
  member ShouldSerializelegendgroup : unit -> bool
  member ShouldSerializemarker : unit -> bool
  member ShouldSerializeopacity : unit -> bool
  ...

Full name: XPlot.Plotly.Graph.Bar

--------------------
new : unit -> Bar
property Bar.x: obj
property Bar.y: obj
val groupedTrace2 : Bar

Full name: Plotly-bar-charts.groupedTrace2
val groupedLayout : Layout

Full name: Plotly-bar-charts.groupedLayout
static member Chart.Plot : data:seq<#Trace> -> PlotlyChart
static member Chart.Plot : data:Trace -> PlotlyChart
static member Chart.Plot : data:seq<#Trace> * layout:Layout -> PlotlyChart
static member Chart.Plot : data:Trace * layout:Layout -> PlotlyChart
val stackedTrace1 : Bar

Full name: Plotly-bar-charts.stackedTrace1
val stackedTrace2 : Bar

Full name: Plotly-bar-charts.stackedTrace2
val stackedLayout : Layout

Full name: Plotly-bar-charts.stackedLayout
val styledTrace1 : Bar

Full name: Plotly-bar-charts.styledTrace1
Multiple items
type Marker =
  new : unit -> Marker
  member ShouldSerializeautocolorscale : unit -> bool
  member ShouldSerializecauto : unit -> bool
  member ShouldSerializecmax : unit -> bool
  member ShouldSerializecmin : unit -> bool
  member ShouldSerializecolor : unit -> bool
  member ShouldSerializecolorbar : unit -> bool
  member ShouldSerializecolors : unit -> bool
  member ShouldSerializecolorscale : unit -> bool
  member ShouldSerializecolorsrc : unit -> bool
  ...

Full name: XPlot.Plotly.Graph.Marker

--------------------
new : unit -> Marker
val styledTrace2 : Bar

Full name: Plotly-bar-charts.styledTrace2
val styledLayout : Layout

Full name: Plotly-bar-charts.styledLayout
Multiple items
type Xaxis =
  new : unit -> Xaxis
  member ShouldSerialize_isSubplotObj : unit -> bool
  member ShouldSerializeanchor : unit -> bool
  member ShouldSerializeautorange : unit -> bool
  member ShouldSerializeautotick : unit -> bool
  member ShouldSerializebackgroundcolor : unit -> bool
  member ShouldSerializedomain : unit -> bool
  member ShouldSerializedtick : unit -> bool
  member ShouldSerializeexponentformat : unit -> bool
  member ShouldSerializefixedrange : unit -> bool
  ...

Full name: XPlot.Plotly.Graph.Xaxis

--------------------
new : unit -> Xaxis
Multiple items
type Font =
  new : unit -> Font
  member ShouldSerializecolor : unit -> bool
  member ShouldSerializefamily : unit -> bool
  member ShouldSerializesize : unit -> bool
  member color : string
  member family : string
  member size : float
  member color : string with set
  member family : string with set
  member size : float with set

Full name: XPlot.Plotly.Graph.Font

--------------------
new : unit -> Font
Multiple items
type Yaxis =
  new : unit -> Yaxis
  member ShouldSerialize_isSubplotObj : unit -> bool
  member ShouldSerializeanchor : unit -> bool
  member ShouldSerializeautorange : unit -> bool
  member ShouldSerializeautotick : unit -> bool
  member ShouldSerializebackgroundcolor : unit -> bool
  member ShouldSerializedomain : unit -> bool
  member ShouldSerializedtick : unit -> bool
  member ShouldSerializeexponentformat : unit -> bool
  member ShouldSerializefixedrange : unit -> bool
  ...

Full name: XPlot.Plotly.Graph.Yaxis

--------------------
new : unit -> Yaxis
Multiple items
type Legend =
  new : unit -> Legend
  member ShouldSerializebgcolor : unit -> bool
  member ShouldSerializebordercolor : unit -> bool
  member ShouldSerializeborderwidth : unit -> bool
  member ShouldSerializefont : unit -> bool
  member ShouldSerializetracegroupgap : unit -> bool
  member ShouldSerializetraceorder : unit -> bool
  member ShouldSerializex : unit -> bool
  member ShouldSerializexanchor : unit -> bool
  member ShouldSerializey : unit -> bool
  ...

Full name: XPlot.Plotly.Graph.Legend

--------------------
new : unit -> Legend
property Legend.x: float
property Legend.y: float
val hoverTrace : Bar

Full name: Plotly-bar-charts.hoverTrace
val hoverLayout : Layout

Full name: Plotly-bar-charts.hoverLayout
Fork me on GitHub