Candlestick Chart without Rangeslider
Mix.install([
{:plotly_ex, "~> 0.3"},
{:kino, "~> 0.18"}
])
Section
layout.xaxis.rangeslider: %{visible: false} removes the default rangeslider. This example
uses a larger AAPL dataset fetched from GitHub. CSV parsing uses String.split — no extra
dependencies needed.
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 — No Rangeslider",
showlegend: false,
xaxis: %{rangeslider: %{visible: false}}
)
|> Plotly.show()