Images

Summary: This example shows how to create image charts in F#.

There are multiple ways of generating image charts:

From three-dimensional color collections, where the inner arrays contain 3 (color dimensions without alpha channel) or 4 (color dimensions and alpha channel) values. The color model can be set separately as shown below.
From a two-dimensional collection Plotly.NETs ARGB type that represents rgba values
From a base64 encoded image data source

Creating Image charts from raw color arrays

// 3d collection containing color values
open Plotly.NET

let colors =
    [ [ [ 0; 0; 255 ]; [ 255; 255; 0 ]; [ 0; 0; 255 ] ]
      [ [ 255; 0; 0 ]; [ 255; 0; 255 ]; [ 255; 0; 255 ] ]
      [ [ 0; 255; 0 ]; [ 0; 255; 255 ]; [ 255; 0; 0 ] ] ]

let imageRaw =
    Chart.Image(Z = colors)
    |> Chart.withTitle "Image chart from raw color component arrays"

To change the color model to HSL, for example, add the ColorModel argument:

let imageRawHSL =
    Chart.Image(Z = colors, ColorModel = StyleParam.ColorModel.HSL)
    |> Chart.withTitle "HSL color model"

Creating Image charts from ARGB arrays

Note that this way of creating image charts uses the RGBA color model.

let argbs =
    [ [ ColorKeyword.AliceBlue; ColorKeyword.CornSilk; ColorKeyword.LavenderBlush ]
      |> List.map ARGB.fromKeyword
      [ ColorKeyword.DarkGray; ColorKeyword.Snow; ColorKeyword.MidnightBlue ]
      |> List.map ARGB.fromKeyword
      [ ColorKeyword.LightSteelBlue
        ColorKeyword.DarkKhaki
        ColorKeyword.LightSkyBlue ]
      |> List.map ARGB.fromKeyword ]

let imageARGB = Chart.Image(z = argbs) |> Chart.withTitle "ARGB image chart"

Creating Image charts from base64 encoded images

open System
open System.IO

let imageSource = __SOURCE_DIRECTORY__}/../img/logo.png"

let base64String = imageSource |> File.ReadAllBytes |> System.Convert.ToBase64String

let logoImage =
    Chart.Image(Source = ($"data:image/jpg;base64,{base64String}"))
    |> Chart.withTitle "This is Plotly.NET:"

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 colors: int list list list

val imageRaw: 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.Image: z: #seq<ARGB> seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Ids: #System.IConvertible seq * ?ZMax: StyleParam.ColorComponentBound * ?ZMin: StyleParam.ColorComponentBound * ?ZSmooth: StyleParam.SmoothAlg * ?UseDefaults: bool -> GenericChart
static member Chart.Image: ?Z: #seq<'b> seq * ?Source: string * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Ids: #System.IConvertible seq * ?ColorModel: StyleParam.ColorModel * ?ZMax: StyleParam.ColorComponentBound * ?ZMin: StyleParam.ColorComponentBound * ?ZSmooth: StyleParam.SmoothAlg * ?UseDefaults: bool -> GenericChart (requires 'b :> int seq)

argument Z: int list list seq option
<summary> Display an image, i.e. data on a 2D regular raster. By default, when an image is displayed in a subplot, its y axis will be reversed (ie. `autorange: 'reversed'`), constrained to the domain (ie. `constrain: 'domain'`) and it will have the same scale as its x axis (ie. `scaleanchor: 'x,`) in order for pixels to be rendered as squares. </summary>
<param name="Z">A 2-dimensional array in which each element is an array of 3 or 4 numbers representing a color.</param>
<param name="Source">Specifies the data URI of the image to be visualized. The URI consists of "data:image/[<media subtype>][;base64],<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 Opacity otf the trace.</param>
<param name="Ids">Assigns id labels to each datum. These ids for object constancy of data points during animation. Should be an array of strings, not numbers or any other type.</param>
<param name="ColorModel">Color model used to map the numerical color components described in `z` into colors. If `source` is specified, this attribute will be set to `rgba256` otherwise it defaults to `rgb`.</param>
<param name="ZMax">Sets the upper bound of the color domain. Value should have the same units as in `z` and if set, `zmin` must be set as well.</param>
<param name="ZMin">Sets the lower bound of the color domain. Value should have the same units as in `z` and if set, `zmax` must be set as well.</param>
<param name="ZSmooth">Picks a smoothing algorithm use to smooth `z` data.</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>

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

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 imageRawHSL: GenericChart

module StyleParam from Plotly.NET

union case StyleParam.ColorModel.HSL: StyleParam.ColorModel

val argbs: ARGB list list

union case ColorKeyword.AliceBlue: ColorKeyword

union case ColorKeyword.CornSilk: ColorKeyword

union case ColorKeyword.LavenderBlush: ColorKeyword

Multiple items
module List from Microsoft.FSharp.Collections

--------------------
type List<'T> = | op_Nil | op_ColonColon of Head: 'T * Tail: 'T list interface IReadOnlyList<'T> interface IReadOnlyCollection<'T> interface IEnumerable interface IEnumerable<'T> member GetReverseIndex: rank: int * offset: int -> int member GetSlice: startIndex: int option * endIndex: int option -> 'T list static member Cons: head: 'T * tail: 'T list -> 'T list member Head: 'T member IsEmpty: bool member Item: index: int -> 'T with get ...

val map: mapping: ('T -> 'U) -> list: 'T list -> 'U list

type ARGB = { A: byte R: byte G: byte B: byte } static member create: a: int -> r: int -> g: int -> b: int -> ARGB static member fromHex: s: string -> ARGB static member fromKeyword: c: ColorKeyword -> ARGB static member fromRGB: r: int -> g: int -> b: int -> ARGB static member fromWebHex: s: string -> ARGB static member toHex: prefix: bool -> c: ARGB -> string static member toString: c: ARGB -> string static member toWebHex: c: ARGB -> string
<summary> Represents an ARGB (alpha, red, green, blue) color </summary>

static member ARGB.fromKeyword: c: ColorKeyword -> ARGB

union case ColorKeyword.DarkGray: ColorKeyword

union case ColorKeyword.Snow: ColorKeyword

union case ColorKeyword.MidnightBlue: ColorKeyword

union case ColorKeyword.LightSteelBlue: ColorKeyword

union case ColorKeyword.DarkKhaki: ColorKeyword

union case ColorKeyword.LightSkyBlue: ColorKeyword

val imageARGB: GenericChart

argument z: ARGB list seq
<summary> Display an image, i.e. data on a 2D regular raster. By default, when an image is displayed in a subplot, its y axis will be reversed (ie. `autorange: 'reversed'`), constrained to the domain (ie. `constrain: 'domain'`) and it will have the same scale as its x axis (ie. `scaleanchor: 'x,`) in order for pixels to be rendered as squares. </summary>
<param name="z">A 2-dimensional array containing Plotly.NETs ARGB color object.</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 Opacity otf the trace.</param>
<param name="Ids">Assigns id labels to each datum. These ids for object constancy of data points during animation. Should be an array of strings, not numbers or any other type.</param>
<param name="ZMax">Sets the upper bound of the color domain. Value should have the same units as in `z` and if set, `zmin` must be set as well.</param>
<param name="ZMin">Sets the lower bound of the color domain. Value should have the same units as in `z` and if set, `zmax` must be set as well.</param>
<param name="ZSmooth">Picks a smoothing algorithm use to smooth `z` data.</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>

namespace System

namespace System.IO

val imageSource: string

val base64String: string

type File = static member AppendAllBytes: path: string * bytes: byte array -> unit + 1 overload static member AppendAllBytesAsync: path: string * bytes: byte array * ?cancellationToken: CancellationToken -> Task + 1 overload static member AppendAllLines: path: string * contents: string seq -> unit + 1 overload static member AppendAllLinesAsync: path: string * contents: string seq * encoding: Encoding * ?cancellationToken: CancellationToken -> Task + 1 overload static member AppendAllText: path: string * contents: ReadOnlySpan<char> -> unit + 3 overloads static member AppendAllTextAsync: path: string * contents: ReadOnlyMemory<char> * encoding: Encoding * ?cancellationToken: CancellationToken -> Task + 3 overloads static member AppendText: path: string -> StreamWriter static member Copy: sourceFileName: string * destFileName: string -> unit + 1 overload static member Create: path: string -> FileStream + 2 overloads static member CreateSymbolicLink: path: string * pathToTarget: string -> FileSystemInfo ...
<summary>Provides static methods for the creation, copying, deletion, moving, and opening of a single file, and aids in the creation of <see cref="T:System.IO.FileStream" /> objects.</summary>

File.ReadAllBytes(path: string) : byte array

type Convert = static member ChangeType: value: obj * conversionType: Type -> obj + 3 overloads static member FromBase64CharArray: inArray: char array * offset: int * length: int -> byte array static member FromBase64String: s: string -> byte array static member FromHexString: utf8Source: ReadOnlySpan<byte> -> byte array + 5 overloads static member GetTypeCode: value: obj -> TypeCode static member IsDBNull: value: obj -> bool static member ToBase64CharArray: inArray: byte array * offsetIn: int * length: int * outArray: char array * offsetOut: int -> int + 1 overload static member ToBase64String: inArray: byte array -> string + 4 overloads static member ToBoolean: value: bool -> bool + 17 overloads static member ToByte: value: bool -> byte + 18 overloads ...
<summary>Converts a base data type to another base data type.</summary>

Convert.ToBase64String(inArray: byte array) : string
Convert.ToBase64String(bytes: ReadOnlySpan<byte>, ?options: Base64FormattingOptions) : string
Convert.ToBase64String(inArray: byte array, options: Base64FormattingOptions) : string
Convert.ToBase64String(inArray: byte array, offset: int, length: int) : string
Convert.ToBase64String(inArray: byte array, offset: int, length: int, options: Base64FormattingOptions) : string

val logoImage: GenericChart

static member Chart.Image: z: #seq<ARGB> seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Ids: #IConvertible seq * ?ZMax: StyleParam.ColorComponentBound * ?ZMin: StyleParam.ColorComponentBound * ?ZSmooth: StyleParam.SmoothAlg * ?UseDefaults: bool -> GenericChart
static member Chart.Image: ?Z: #seq<'b> seq * ?Source: string * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Ids: #IConvertible seq * ?ColorModel: StyleParam.ColorModel * ?ZMax: StyleParam.ColorComponentBound * ?ZMin: StyleParam.ColorComponentBound * ?ZSmooth: StyleParam.SmoothAlg * ?UseDefaults: bool -> GenericChart (requires 'b :> int seq)