Add Rangeselector

Mix.install([
  {:plotly_ex, "~> 0.3"},
  {:kino, "~> 0.18"},
  {:req, "~> 0.5"}
])

Section

layout.xaxis.rangeselector: %{buttons: [...]} adds preset-period buttons above the chart. Each button is %{count:, label:, step:, stepmode:}. step: "all" shows the full dataset. stepmode: "backward" counts back from the last date; "todate" counts back from now.

alias Plotly.{Figure, Ohlc}

csv =
  Req.get!("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv").body

[header | rows] = String.split(csv, "\n", trim: true)
headers = String.split(header, ",")

parsed =
  Enum.map(rows, fn row -> Enum.zip(headers, String.split(row, ",")) |> Map.new() end)

dates = Enum.map(parsed, & &1["Date"])
open  = Enum.map(parsed, &(elem(Float.parse(&1["AAPL.Open"]), 0)))
high  = Enum.map(parsed, &(elem(Float.parse(&1["AAPL.High"]), 0)))
low   = Enum.map(parsed, &(elem(Float.parse(&1["AAPL.Low"]), 0)))
close = Enum.map(parsed, &(elem(Float.parse(&1["AAPL.Close"]), 0)))

Figure.new()
|> Figure.add_trace(Ohlc.new(x: dates, open: open, high: high, low: low, close: close))
|> Figure.update_layout(
  title: "Apple OHLC — Rangeselector",
  xaxis: %{
    rangeselector: %{
      buttons: [
        %{count: 1, label: "1m", step: "month", stepmode: "backward"},
        %{count: 6, label: "6m", step: "month", stepmode: "backward"},
        %{count: 1, label: "YTD", step: "year", stepmode: "todate"},
        %{count: 1, label: "1y", step: "year", stepmode: "backward"},
        %{step: "all"}
      ]
    },
    rangeslider: %{visible: true},
    type: "date"
  }
)
|> Plotly.show()