OHLC Charts in F#

How to make interactive OHLC charts in F# with Plotly.

In [1]:

#r "nuget: Newtonsoft.Json, 12.0.3"
#r "nuget: Plotly.NET,  2.0.0-preview.10"
#r "nuget: Plotly.NET.Interactive,  2.0.0-preview.10"
#r "nuget: FSharp.Data"

Installed Packages

FSharp.Data, 4.2.4
Newtonsoft.Json, 12.0.3
Plotly.NET, 2.0.0-preview.10
Plotly.NET.Interactive, 2.0.0-preview.10

Loading extensions from Plotly.NET.Interactive.dll

Added Kernel Extension including formatters for Plotly.NET charts.

The OHLC chart (for open, high, low and close) is a style of financial chart describing open, high, low and close values for a given x coordinate (most likely time). The tip of the lines represent the low and high values and the horizontal segments represent the open and close values. Sample points where the close value is higher (lower) then the open value are called increasing (decreasing). By default, increasing items are drawn in green whereas decreasing are drawn in red.

Simple OHLC Chart¶

In [2]:

open FSharp.Data
open Plotly.NET

let data =
    CsvFile.Load("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")

let _open =
    data.Rows
    |> Seq.map (fun row -> row.GetColumn("AAPL.Open"))

let high =
    data.Rows
    |> Seq.map (fun row -> row.GetColumn("AAPL.High"))

let close =
    data.Rows
    |> Seq.map (fun row -> row.GetColumn("AAPL.Close"))

let low =
    data.Rows
    |> Seq.map (fun row -> row.GetColumn("AAPL.Low"))

let date =
    data.Rows
    |> Seq.map (fun row -> row.GetColumn("Date"))

Chart.OHLC(``open`` = _open, high = high, close = close, low = low, x = date)

Out[2]:

OHLC Chart without Rangeslider¶

In [3]:

open FSharp.Data
open Plotly.NET
open Plotly.NET.LayoutObjects

let data =
    CsvFile.Load("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")

let _open =
    data.Rows
    |> Seq.map (fun row -> row.GetColumn("AAPL.Open"))

let high =
    data.Rows
    |> Seq.map (fun row -> row.GetColumn("AAPL.High"))

let close =
    data.Rows
    |> Seq.map (fun row -> row.GetColumn("AAPL.Close"))

let low =
    data.Rows
    |> Seq.map (fun row -> row.GetColumn("AAPL.Low"))

let date =
    data.Rows
    |> Seq.map (fun row -> row.GetColumn("Date"))

Chart.OHLC(``open`` = _open, high = high, close = close, low = low, x = date)
|> Chart.withXAxisRangeSlider(rangeSlider=RangeSlider.init(Visible=false))

Out[3]:

Adding Customized Text and Annotations¶

In [4]:

let annotation =
    Annotation.init (
        X = "2016-12-09",
        Y = 0.05,
        Text = "Increase Period Begins",
        XRef = "x",
        YRef = "paper",
        ShowArrow = false
    )

let line =
    Shape.init (
        StyleParam.ShapeType.Line,
        X0 = "2016-12-09",
        X1 = "2016-12-09",
        Y0 = 0,
        Y1 = 1,
        Xref = "x",
        Yref = "paper",
        Line = Line.init (Width = 1.5)
    )

Chart.OHLC(``open`` = _open, high = high, close = close, low = low, x = date)
|> Chart.withTitle (title = "The Great Recession")
|> Chart.withAnnotations ([ annotation ])
|> Chart.withShapes ([ line ])
|> Chart.withLayout (Layout.init (PlotBGColor = Color.fromString "#e5ecf6", Width = 800))
|> Chart.withXAxisRangeSlider (RangeSlider.init (Visible = false))

Out[4]:

Custom OHLC Colors (NOT WORKING)¶

In [5]:

Chart.OHLC(
    ``open`` = _open,
    high = high,
    close = close,
    low = low,
    x = date,
    Increasing = Line.init (Color = Color.fromString "cyan"),
    Decreasing = Line.init (Color = Color.fromString "gray")
)

Out[5]:

Simple Example with DateTime Objects¶

In [6]:

let dates =
    [ for i in 1 .. 5 -> DateTime.Now.AddDays(float i) ]

let open_price = [ 10.0; 5.0; 7.0; 12.0; 10.0 ]
let close = [ 20.0; 3.0; 12.0; 21.0; 5.0 ]
let low = [ 5.0; 1.0; 5.0; 12.0; 3.0 ]
let high = [ 25.0; 10.0; 15.0; 27.0; 15.0 ]

Chart.OHLC(x=dates,``open``=open_price,close=close,low=low,high=high)

Out[6]:

Custom Hovertext¶

In [7]:

open FSharp.Data
open Plotly.NET
open Plotly.NET.LayoutObjects

let data =
    CsvFile.Load("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")

let _open =
    data.Rows |> Seq.map (fun row -> row.GetColumn("AAPL.Open"))

let high =
    data.Rows |> Seq.map (fun row -> row.GetColumn("AAPL.High"))

let close =
    data.Rows |> Seq.map (fun row -> row.GetColumn("AAPL.Close"))

let low =
    data.Rows |> Seq.map (fun row -> row.GetColumn("AAPL.Low"))

let date =
    data.Rows |> Seq.map (fun row -> row.GetColumn("Date"))

let text =
    data.Rows |> Seq.map (fun row -> "Open:"+row.GetColumn("AAPL.Open")+"<br>Close:"+row.GetColumn("AAPL.Close"))

Chart.OHLC(``open`` = _open, high = high, close = close, low = low, x = date)
|> GenericChart.mapTrace (fun t ->  //Workaround
                            t?text <- text
                            t?hoverinfo <- "text"
                            t)

Out[7]: