Display Options

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

You can control the html output that gets created (e.g. documents created with Chart.Show or the output of GenericChart.toChartHTML) with various functions that change a chart's DisplayOptions.

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. ]

Referencing PlotlyJS

For rendering plotly.js charts in a html document, the document needs to reference plotly.js in some form.

Plotly.NET has two fundamentally different html outputs:

Full html documents, containing <head> tags.

Functions that generate these files are:
html fragments, containing only some html tags (e.g. a <div> containing a chart generation script). This is usually meant to included into another document that contains a reference to plotly.js.

Functions that generate these fragments are:
- GenericChart.toChartHTML

Plotly.NET provides multiple ways to reference plotly.js in generated html via the PlotlyJSReference type. These differ in their effect depending on if the output is a full html document or a fragment:

PlotlyJSReference Option	Description	Document	Fragment
`Full`	Include the full plotly.js source.	HTML documents created using this option are self-contained and can be used offline.	No effect
`CDN`	(default) Include a reference to plotly.js from a CDN.	HTML documents created using this option will contain a reference in their `<head>` tag	No effect
`Require`	Use requirejs to load plotly.	HTML documents created using this option will programmatically add a reference to require.js in their `<head>` tag which will then be used to load plotly.js	Fragments created using this option will programmatically add a reference to require.js when embedded into a html document which will then be used to load plotly.js.
`NoReference`	Don't include any plotly.js reference. Useful if you want to embed the output into another page that already references plotly - the documentation pages you are reading now are generated with this option.	No effect	No effect

You can control this on a per-chart basis via Chart.withDisplayOptionsStyle, for example if you want to include a script tag with the full plotly.js source:

Chart.Point(x = x, y = y)
|> Chart.withDisplayOptionsStyle (PlotlyJSReference = Full)

Writing HTML tags and including Chart descriptions

Plotly.NET uses Giraffe.ViewEngine internally to generate HTML documents, which means you can also use that DSL to add additional content to the output.

For example, use Chart.withDescription to append a list of html tags below the rendered chart:

open Giraffe.ViewEngine

let desc1 =
    Chart.Point(x = x, y = y, Name = "desc1")
    |> Chart.withDescription
        [ h1 [] [ str "Hello" ]
          p [] [ str "F#" ]
          ol [] [ li [] [ str "Item 1" ]; li [] [ str "Item 2" ] ] ]

Hello

Item 1
Item 2

Adding additional head tags

Note: the example here is shown via an image, as the docs themselves are html pages that cannot load additional head tags.

You can add any number of additional html tags to document <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" ] [ str "Hero title" ]
                p [ _class "subtitle" ] [ str "Hero subtitle" ] ] ]
// chart description containing bulma classes
let description3 = [ h1 [ _class "title" ] [ str "I am heading" ]; bulmaHero ]

let desc3 =
    Chart.Point(x = x, y = y, Name = "desc3")
    |> Chart.withAdditionalHeadTags
        [ link
              [ _rel "stylesheet"
                _href "https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css" ] ]
    |> Chart.withDescription description3

Using MathTeX

Chart.WithMathTex is a prebuilt function to enable MathTeX for your generated plotly chart documents.

It will add a MathJax script reference to your document based on which version (either 2 or 3) you want to use:

let mathtex_chart =
    [ Chart.Point(xy = [ (1., 2.) ], Name = @"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$")
      Chart.Point(xy = [ (2., 4.) ], Name = @"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$") ]
    |> Chart.combine
    |> Chart.withTitle @"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$"
    |> Chart.withMathTex (AppendTags = true, MathJaxVersion = 3)

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: XmlNode list * ?Description: 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

val x: float list

val y: float list

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.Point: xy: seq<#System.IConvertible * #System.IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'c * ?MultiText: seq<'c> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol * ?MultiMarkerSymbol: seq<StyleParam.MarkerSymbol> * ?Marker: TraceObjects.Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: StyleParam.Orientation * ?GroupNorm: StyleParam.GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'c :> System.IConvertible)
static member Chart.Point: x: seq<#System.IConvertible> * y: seq<#System.IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'c * ?MultiText: seq<'c> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: StyleParam.Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: StyleParam.MarkerSymbol * ?MultiMarkerSymbol: seq<StyleParam.MarkerSymbol> * ?Marker: TraceObjects.Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: StyleParam.Orientation * ?GroupNorm: StyleParam.GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'c :> System.IConvertible)

argument x: seq<float>
<summary> Creates a Point chart, which uses Points in a 2D space to visualize data. </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="Opacity">Sets the opactity of the trace</param>
<param name="MultiOpacity">Sets the opactity of individual datum markers</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="MarkerColor">Sets the color of the marker</param>
<param name="MarkerColorScale">Sets the colorscale of the marker</param>
<param name="MarkerOutline">Sets the outline of the marker</param>
<param name="MarkerSymbol">Sets the marker symbol for each datum</param>
<param name="MultiMarkerSymbol">Sets the marker symbol for each individual datum</param>
<param name="Marker">Sets the marker (use this for more finegrained control than the other marker-associated arguments)</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="StackGroup">Set several traces (on the same subplot) to the same stackgroup in order to add their y values (or their x values if `Orientation` is Horizontal). Stacking also turns `fill` on by default and sets the default `mode` to "lines" irrespective of point count. ou can only stack on a numeric (linear or log) axis. Traces in a `stackgroup` will only fill to (or be filled to) other traces in the same group. With multiple `stackgroup`s or some traces stacked and some not, if fill-linked traces are not already consecutive, the later ones will be pushed down in the drawing order</param>
<param name="Orientation">Sets the stacking direction. Only relevant when `stackgroup` is used, and only the first `orientation` found in the `stackgroup` will be used.</param>
<param name="GroupNorm">Sets the normalization for the sum of this `stackgroup. Only relevant when `stackgroup` is used, and only the first `groupnorm` found in the `stackgroup` will be used</param>
<param name="UseWebGL">If true, plotly.js will use the WebGL engine to render this chart. use this when you want to render many objects at once.</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>

argument y: seq<float>
<summary> Creates a Point chart, which uses Points in a 2D space to visualize data. </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="Opacity">Sets the opactity of the trace</param>
<param name="MultiOpacity">Sets the opactity of individual datum markers</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="MarkerColor">Sets the color of the marker</param>
<param name="MarkerColorScale">Sets the colorscale of the marker</param>
<param name="MarkerOutline">Sets the outline of the marker</param>
<param name="MarkerSymbol">Sets the marker symbol for each datum</param>
<param name="MultiMarkerSymbol">Sets the marker symbol for each individual datum</param>
<param name="Marker">Sets the marker (use this for more finegrained control than the other marker-associated arguments)</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="StackGroup">Set several traces (on the same subplot) to the same stackgroup in order to add their y values (or their x values if `Orientation` is Horizontal). Stacking also turns `fill` on by default and sets the default `mode` to "lines" irrespective of point count. ou can only stack on a numeric (linear or log) axis. Traces in a `stackgroup` will only fill to (or be filled to) other traces in the same group. With multiple `stackgroup`s or some traces stacked and some not, if fill-linked traces are not already consecutive, the later ones will be pushed down in the drawing order</param>
<param name="Orientation">Sets the stacking direction. Only relevant when `stackgroup` is used, and only the first `orientation` found in the `stackgroup` will be used.</param>
<param name="GroupNorm">Sets the normalization for the sum of this `stackgroup. Only relevant when `stackgroup` is used, and only the first `groupnorm` found in the `stackgroup` will be used</param>
<param name="UseWebGL">If true, plotly.js will use the WebGL engine to render this chart. use this when you want to render many objects at once.</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>

static member Chart.withDisplayOptionsStyle: ?AdditionalHeadTags: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?Description: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?PlotlyJSReference: PlotlyJSReference -> (GenericChart.GenericChart -> GenericChart.GenericChart)

union case PlotlyJSReference.Full: PlotlyJSReference
<summary> Full plotly.js source code (~3MB) is included in the output. HTML files generated with this option are fully self-contained and can be used offline </summary>

namespace Giraffe

namespace Giraffe.ViewEngine

val desc1: GenericChart.GenericChart

static member Chart.withDescription: description: XmlNode list -> ch: GenericChart.GenericChart -> GenericChart.GenericChart

val h1: (XmlAttribute list -> XmlNode list -> XmlNode)

val str: (string -> XmlNode)
<summary> An alias for the `encodedText` function. </summary>

val p: (XmlAttribute list -> XmlNode list -> XmlNode)

val ol: (XmlAttribute list -> XmlNode list -> XmlNode)

val li: (XmlAttribute list -> XmlNode list -> XmlNode)

module GenericChart from Plotly.NET
<summary> Module to represent a GenericChart </summary>

val toChartHTML: gChart: GenericChart.GenericChart -> string

val bulmaHero: XmlNode

val section: (XmlAttribute list -> XmlNode list -> XmlNode)

val _class: (string -> XmlAttribute)

val div: (XmlAttribute list -> XmlNode list -> XmlNode)

val description3: XmlNode list

val desc3: GenericChart.GenericChart

static member Chart.withAdditionalHeadTags: additionalHeadTags: XmlNode list -> ch: GenericChart.GenericChart -> GenericChart.GenericChart

val link: attr: XmlAttribute list -> XmlNode

val _rel: (string -> XmlAttribute)

val _href: (string -> XmlAttribute)

val mathtex_chart: GenericChart.GenericChart

static member Chart.combine: gCharts: seq<GenericChart.GenericChart> -> GenericChart.GenericChart

static member Chart.withTitle: title: Title -> (GenericChart.GenericChart -> GenericChart.GenericChart)
static member Chart.withTitle: title: string * ?TitleFont: Font -> (GenericChart.GenericChart -> GenericChart.GenericChart)

static member Chart.withMathTex: ?AppendTags: bool * ?MathJaxVersion: int -> (GenericChart.GenericChart -> GenericChart.GenericChart)