PhiaUi.Components.CandlestickChart (phia_ui v0.1.17)

Copy Markdown View Source

Candlestick chart for financial OHLC data — pure SVG, zero JS.

Each candle has a vertical wick (high-low range) and a body (open-close range). Bullish candles (close >= open) are rendered in green; bearish candles (close < open) are rendered in red. Bullish bodies use a stroke-only style, while bearish bodies are filled solid.

Examples

<.candlestick_chart data={[
  %{label: "Mon", open: 100, high: 110, low: 95, close: 108},
  %{label: "Tue", open: 108, high: 115, low: 105, close: 103},
  %{label: "Wed", open: 103, high: 112, low: 100, close: 111}
]} />

<.candlestick_chart
  data={ohlc_data}
  bullish_color="oklch(0.70 0.18 145)"
  bearish_color="oklch(0.60 0.25 0)"
  animate={true}
/>

Summary

Functions

candlestick_chart(assigns)

Functions

candlestick_chart(assigns)

Attributes

  • data (:list) - OHLC data: [%{label, open, high, low, close}]. Defaults to [].
  • colors (:list) - Override default palette (unused for candlestick, use bullish/bearish_color). Defaults to [].
  • bullish_color (:string) - Color for bullish candles (close >= open). Defaults to "oklch(0.70 0.18 145)".
  • bearish_color (:string) - Color for bearish candles (close < open). Defaults to "oklch(0.60 0.25 0)".
  • body_width (:any) - Override candle body width in px (auto-sized if nil). Defaults to nil.
  • show_grid (:boolean) - Show Y-axis grid lines. Defaults to true.
  • show_labels (:boolean) - Show axis tick labels. Defaults to true.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 600.
  • theme (:map) - Chart theme overrides (see ChartTheme). Defaults to %{}.
  • id (:string) - Unique ID for the chart (auto-generated if not provided). Defaults to nil.
  • title (:string) - Chart title rendered above the visualization. Defaults to nil.
  • description (:string) - Chart description for context (rendered below title). Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.