Candlestick

<zyna-candlestick>

OHLC candlestick chart. Each period is drawn as a wick (high to low) with a body showing open and close. Bullish candles (close above open) use the accent colour; bearish candles use the bear colour.

Demo

Daily OHLC — synthetic price series

HTML 
<zyna-candlestick
  data='[
    {"date":"04-01","open":100,"high":104,"low":97, "close":103},
    {"date":"04-02","open":103,"high":107,"low":102,"close":106},
    {"date":"04-03","open":106,"high":108,"low":101,"close":102}
    // …
  ]'
  color="#C9A84C"
  bear-color="#FF5252"
  theme="dark"
></zyna-candlestick>
Attribute Type Default Description
dataJSON array—Array of { date, open, high, low, close } objects; date as a string.
colorhexvar(--zp-success)Fill colour for bullish candles (close ≥ open).
bear-colorhexvar(--zp-danger)Fill colour for bearish candles (close < open).
themedark | lightdarkControls gridline and axis-label colour.
heightnumber—Explicit height in px. Auto-derived from width when omitted.
show-axisbooleantrueSet to "false" to hide y-axis ticks and x-axis labels.
label-formatstring—D3-style number format for y-axis tick labels (e.g. $,.0f).
ticksnumber5Approximate number of y-axis tick marks.

Usage Tips

  • Feed data in chronological order — the chart uses the input order as the x-axis order.
  • Pre-format date strings on the server; the chart renders them as-is on the x-axis.
  • Keep series between 20 and 80 candles for best legibility. Denser series work but individual bodies get thin.
  • Don't mix timeframes in one chart (daily + hourly). The band scale gives equal width to every entry.