Add Rangeselector

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

Section

xaxis.rangeselector: %{buttons: [...]} adds preset time-period buttons above the chart. Each button needs step: ("month", "year", "all"), stepmode: ("backward" counts back from today; "todate" goes to start of current period), count:, and label:. step: "all" shows the full dataset.

alias Plotly.{Figure, Candlestick}

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(
  Candlestick.new(
    x: dates, open: open, high: high, low: low, close: close,
    increasing: %{line: %{color: "black"}},
    decreasing: %{line: %{color: "red"}}
  )
)
|> Figure.update_layout(
  title: "AAPL — With Rangeselector",
  showlegend: false,
  xaxis: %{
    title: %{text: "Date"},
    rangeselector: %{
      x: 0, y: 1.2,
      xanchor: "left",
      font: %{size: 8},
      buttons: [
        %{step: "month", stepmode: "backward", count: 1, label: "1 month"},
        %{step: "month", stepmode: "backward", count: 6, label: "6 months"},
        %{step: "all", label: "All dates"}
      ]
    }
  }
)
|> Plotly.show()