Candlestick Chart

A read-only, CSS-only OHLC candlestick chart. Each candle’s wick spans low→high and its body spans open↔close; green = close up, red = close down. The server normalizes prices to 0–100; CSS derives the body with min()/max(). No JavaScript.

ACME Corp — daily

Daily OHLC prices ($)
Date	Open	High	Low	Close
Jun 2	120	128	119	126
Jun 3	126	131	125	130
Jun 4	130	132	124	125
Jun 5	125	129	123	128
Jun 6	128	129	121	122
Jun 9	122	123	116	118
Jun 10	118	125	117	124
Jun 11	124	133	123	132

Markup

<!-- each candle's --open/--high/--low/--close are on a shared 0..100 scale;
     data-direction is up | down -->
<div class="casca-candlestick" aria-hidden="true">
  <div class="casca-candle" data-direction="up"
       style="--open: 40; --high: 56; --low: 38; --close: 52"></div>
  <div class="casca-candle" data-direction="down"
       style="--open: 60; --high: 64; --low: 48; --close: 50"></div>
  <!-- ...one .casca-candle per period... -->
</div>