#r "nuget: Plotly.NET, 2.0.0"
#r "nuget: Plotly.NET.Interactive, 2.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

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

imageRaw

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"

imageRawHSL

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

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

imageARGB

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

logoImage