Display Options

BinderScriptNotebook

Summary: This example shows how to alter the display options that control the html document that contains plotly charts

You can control the html document that gets created via Chart.Show with various functions that change a chart's DisplayOptions.

Naturally, these full html documents can not be embedded in this documentation page, so images have to suffice in this case.

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

open Plotly.NET 
  
let x  = [1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.; ]
let y = [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]

Chart description

To create a chart description to put below the chart, use ChartDescription.create to create the description, and Chart.WithDescription to add the description to the chart's display options:

let description1 =
    ChartDescription.create "Hello" "F#"
let desc1 =
    Chart.Point(x,y,Name="desc1")    
    |> Chart.withDescription(description1)
    |> Chart.show

The ChartDescription type is a bit barebones for now, but you can contain any valid html in both Heading and Text fields:

let description2 =
    ChartDescription.create "<h1>I am heading</h1>" "<ol><li>Hi</li><li>there</li></ol>"
let desc2 =
    Chart.Point(x,y,Name="desc1")    
    |> Chart.withDescription(description2)
    |> Chart.show

Adding additional head tags

You can add any number of additional html tags to the documents <head> tag using Chart.WithAdditionalHeadTags.

For example, you can load external css libraries to style the chart description:

//html for description containing bulma classes such as "hero"
let bulmaHero = """<section class="hero is-primary is-bold">
  <div class="hero-body">
    <p class="title">
      Hero title
    </p>
    <p class="subtitle">
      Hero subtitle
    </p>
  </div>
</section>
"""

// chart description containing bulma classes
let description3 =
    ChartDescription.create 
        """<h1 class="title">I am heading</h1>""" 
       bulmaHero
let desc3 =
    Chart.Point(x,y,Name="desc3")    
    |> Chart.withDescription description3
    // Add reference to the bulma css framework
    |> Chart.withAdditionalHeadTags ["""<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">"""]
    |> Chart.show

Using MathTeX

By popular request, Chart.WithMathTex is a prebuilt function to enable MathTeX for your generated plotly chart documents:

[
    Chart.Point([(1.,2.)],@"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$")
    Chart.Point([(2.,4.)],@"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$")
]
|> Chart.combine
|> Chart.withTitle @"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$"
// include mathtex tags in <head>. pass true to append these scripts, false to ONLY include MathTeX.
|> Chart.withMathTex(true)
|> Chart.show

namespace Plotly
namespace Plotly.NET
val x : float list
val y : float list
val description1 : ChartDescription
type ChartDescription = { Heading: string Text: string } static member create : heading:string -> text:string -> ChartDescription static member toHtml : d:ChartDescription -> string
static member ChartDescription.create : heading:string -> text:string -> ChartDescription
val desc1 : unit
type Chart = static member Area : x:seq<#IConvertible> * y:seq<#IConvertible> * ?Name:string * ?ShowMarkers:bool * ?ShowLegend:bool * ?MarkerSymbol:MarkerSymbol * ?Color:Color * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Dash:DrawingStyle * ?Width:float -> GenericChart + 1 overload static member Bar : values:seq<#IConvertible> * ?Keys:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?PatternShape:PatternShape * ?MultiPatternShape:seq<PatternShape> * ?Pattern:Pattern * ?Base:#IConvertible * ?Width:'a3 * ?MultiWidth:seq<'a3> * ?Opacity:float * ?MultiOpacity:seq<float> * ?Text:'a4 * ?MultiText:seq<'a4> * ?TextPosition:TextPosition * ?MultiTextPosition:seq<TextPosition> * ?TextFont:Font * ?Marker:Marker -> GenericChart (requires 'a3 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot : ?x:'a0 * ?y:'a1 * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?Fillcolor:Color * ?Opacity:float * ?Whiskerwidth:'a2 * ?Boxpoints:Boxpoints * ?Boxmean:BoxMean * ?Jitter:'a3 * ?Pointpos:'a4 * ?Orientation:Orientation * ?Marker:Marker * ?Line:Line * ?Alignmentgroup:'a5 * ?Offsetgroup:'a6 * ?Notched:bool * ?NotchWidth:float * ?QuartileMethod:QuartileMethod -> GenericChart + 1 overload static member Bubble : x:seq<#IConvertible> * y:seq<#IConvertible> * sizes:seq<int> * ?Name:string * ?ShowLegend:bool * ?MarkerSymbol:MarkerSymbol * ?Color:Color * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?StackGroup:string * ?Orientation:Orientation * ?GroupNorm:GroupNorm * ?UseWebGL:bool -> GenericChart + 1 overload static member Candlestick : open:seq<#IConvertible> * high:seq<#IConvertible> * low:seq<#IConvertible> * close:seq<#IConvertible> * x:seq<#IConvertible> * ?Increasing:Line * ?Decreasing:Line * ?WhiskerWidth:float * ?Line:Line * ?XCalendar:Calendar -> GenericChart + 1 overload static member Column : values:seq<#IConvertible> * ?Keys:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?Pattern:Pattern * ?PatternShape:PatternShape * ?MultiPatternShape:seq<PatternShape> * ?Base:#IConvertible * ?Width:'a3 * ?MultiWidth:seq<'a3> * ?Opacity:float * ?MultiOpacity:seq<float> * ?Text:'a4 * ?MultiText:seq<'a4> * ?TextPosition:TextPosition * ?MultiTextPosition:seq<TextPosition> * ?TextFont:Font * ?Marker:Marker -> GenericChart (requires 'a3 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour : data:seq<#seq<'a1>> * ?X:seq<#IConvertible> * ?Y:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Colorscale:Colorscale * ?Showscale:'a4 * ?zSmooth:SmoothAlg * ?ColorBar:'a5 -> GenericChart (requires 'a1 :> IConvertible) static member Funnel : x:seq<#IConvertible> * y:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Color:Color * ?Line:Line * ?x0:'a3 * ?dX:float * ?y0:'a4 * ?dY:float * ?Width:float * ?Offset:float * ?Orientation:Orientation * ?Alignmentgroup:string * ?Offsetgroup:string * ?Cliponaxis:bool * ?Connector:FunnelConnector * ?Insidetextfont:Font * ?Outsidetextfont:Font -> GenericChart static member Heatmap : data:seq<#seq<'a1>> * ?ColNames:seq<#IConvertible> * ?RowNames:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Colorscale:Colorscale * ?Showscale:'a4 * ?Xgap:'a5 * ?Ygap:'a6 * ?zSmooth:SmoothAlg * ?ColorBar:'a7 * ?UseWebGL:bool -> GenericChart (requires 'a1 :> IConvertible) static member Histogram : data:seq<#IConvertible> * ?Orientation:Orientation * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Color:Color * ?HistNorm:HistNorm * ?HistFunc:HistFunc * ?nBinsx:int * ?nBinsy:int * ?Xbins:Bins * ?Ybins:Bins * ?xError:'a1 * ?yError:'a2 -> GenericChart ...
static member Chart.Point : xy:seq<#System.IConvertible * #System.IConvertible> * ?Name:string * ?ShowLegend:bool * ?MarkerSymbol:StyleParam.MarkerSymbol * ?Color:Color * ?Opacity:float * ?Labels:seq<#System.IConvertible> * ?TextPosition:StyleParam.TextPosition * ?TextFont:Font * ?StackGroup:string * ?Orientation:StyleParam.Orientation * ?GroupNorm:StyleParam.GroupNorm * ?UseWebGL:bool -> GenericChart.GenericChart
static member Chart.Point : x:seq<#System.IConvertible> * y:seq<#System.IConvertible> * ?Name:string * ?ShowLegend:bool * ?MarkerSymbol:StyleParam.MarkerSymbol * ?Color:Color * ?Opacity:float * ?Labels:seq<#System.IConvertible> * ?TextPosition:StyleParam.TextPosition * ?TextFont:Font * ?StackGroup:string * ?Orientation:StyleParam.Orientation * ?GroupNorm:StyleParam.GroupNorm * ?UseWebGL:bool -> GenericChart.GenericChart
static member Chart.withDescription : description:ChartDescription -> ch:GenericChart.GenericChart -> GenericChart.GenericChart
static member Chart.show : ch:GenericChart.GenericChart -> unit
val description2 : ChartDescription
val desc2 : unit
val bulmaHero : string
val description3 : ChartDescription
val desc3 : unit
static member Chart.withAdditionalHeadTags : additionalHeadTags:seq<string> -> ch:GenericChart.GenericChart -> GenericChart.GenericChart
static member Chart.combine : gCharts:seq<GenericChart.GenericChart> -> GenericChart.GenericChart
static member Chart.withTitle : title:string * ?TitleFont:Font -> (GenericChart.GenericChart -> GenericChart.GenericChart)
static member Chart.withMathTex : ?AppendTags:bool -> (GenericChart.GenericChart -> GenericChart.GenericChart)