In [ ]:

#r "nuget: Plotly.NET, 4.0.0"
#r "nuget: Plotly.NET.Interactive, 4.0.0"

Images¶

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

There are multiple ways of generating image charts:

From 3 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 2 dimensional collection Plotly.NETs ARGB type that represents rgba values
From a base64 encoded image data source

Creating Image charts from raw color arrays¶

In [3]:

// 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"

In [ ]:

imageRaw

Out[ ]:

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

In [5]:

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

In [ ]:

imageRawHSL

Out[ ]:

Creating Image charts from ARGB arrays¶

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

In [7]:

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.LightAkyBlue ]
      |> List.map ARGB.fromKeyword ]

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

In [ ]:

imageARGB

Out[ ]:

Creating Image charts from base64 encoded images¶

In [9]:

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:"

In [ ]:

logoImage

Out[ ]: