Components / Display & Media / Candlestick Chart

Candlestick Chart beta

Open, high, low, close as cast candles — price action for a session at a glance.

Preview 
<figure class="k-candle" role="img" aria-label="Candlestick chart: ACME rose over the last 14 sessions with more up days than down" style="max-width:430px"><figcaption>ACME Corp <span>Daily closes, last 14 sessions</span></figcaption><svg viewBox="0 0 560 190" aria-hidden="true"><line x1="0" y1="30" x2="560" y2="30" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="79" x2="560" y2="79" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="128" x2="560" y2="128" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="178" x2="560" y2="178" style="stroke:var(--k-line)" stroke-width="1"/><line x1="24" y1="152.3" x2="24" y2="173.1" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="14" y="157.5" width="20" height="9.900000000000006" rx="2" style="fill:var(--k-accent)"/><line x1="64" y1="133.7" x2="64" y2="163.9" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="54" y="139.1" width="20" height="18.400000000000006" rx="2" style="fill:var(--k-accent)"/><line x1="104" y1="135.2" x2="104" y2="152.0" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="94" y="139.1" width="20" height="6.5" rx="2" style="fill:var(--k-danger)"/><line x1="144" y1="128.7" x2="144" y2="147.3" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="134" y="134.9" width="20" height="10.699999999999989" rx="2" style="fill:var(--k-accent)"/><line x1="184" y1="126.8" x2="184" y2="139.1" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="174" y="129.5" width="20" height="5.400000000000006" rx="2" style="fill:var(--k-accent)"/><line x1="224" y1="119.6" x2="224" y2="132.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="214" y="121.1" width="20" height="8.400000000000006" rx="2" style="fill:var(--k-accent)"/><line x1="264" y1="114.1" x2="264" y2="126.5" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="254" y="120.6" width="20" height="2.4" rx="2" style="fill:var(--k-accent)"/><line x1="304" y1="114.9" x2="304" y2="125.3" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="294" y="120.6" width="20" height="2.700000000000003" rx="2" style="fill:var(--k-danger)"/><line x1="344" y1="111.7" x2="344" y2="124.5" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="334" y="113.7" width="20" height="9.599999999999994" rx="2" style="fill:var(--k-accent)"/><line x1="384" y1="94.8" x2="384" y2="116.1" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="374" y="97.1" width="20" height="16.60000000000001" rx="2" style="fill:var(--k-accent)"/><line x1="424" y1="71.6" x2="424" y2="100.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="414" y="77.5" width="20" height="19.599999999999994" rx="2" style="fill:var(--k-accent)"/><line x1="464" y1="54.3" x2="464" y2="82.7" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="454" y="58.7" width="20" height="18.799999999999997" rx="2" style="fill:var(--k-accent)"/><line x1="504" y1="52.0" x2="504" y2="65.4" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="494" y="58.7" width="20" height="2.4" rx="2" style="fill:var(--k-danger)"/><line x1="544" y1="34.9" x2="544" y2="63.2" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="534" y="41.1" width="20" height="19.1" rx="2" style="fill:var(--k-accent)"/></svg><div class="x"><span>Sep</span><span>Oct</span></div></figure>
/* KATA Candlestick Chart — precomputed OHLC candles on the line chart's frame */
.k-candle{font-family:var(--k-font);text-align:left;margin:0}
.k-candle figcaption{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:12px}
.k-candle figcaption span{font-size:12px;font-weight:500;color:var(--k-ink-3)}
.k-candle svg{width:100%;height:auto;display:block}
.k-candle .x{display:flex;justify-content:space-between;font-size:11px;color:var(--k-ink-3);margin-top:8px;padding:0 1px}

Installation

CLI

node kata-ui.mjs add candlestick-chart

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Examples

A downtrend

<figure class="k-candle" role="img" aria-label="Candlestick chart: ACME fell over 14 sessions, closing lower most days" style="max-width:430px"><figcaption>ACME Corp <span>Daily closes, a rough month</span></figcaption><svg viewBox="0 0 560 190" aria-hidden="true"><line x1="0" y1="30" x2="560" y2="30" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="79" x2="560" y2="79" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="128" x2="560" y2="128" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="178" x2="560" y2="178" style="stroke:var(--k-line)" stroke-width="1"/><line x1="24" y1="39.2" x2="24" y2="63.6" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="14" y="45.2" width="20" height="14.699999999999996" rx="2" style="fill:var(--k-danger)"/><line x1="64" y1="52.1" x2="64" y2="67.2" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="54" y="54.4" width="20" height="5.5" rx="2" style="fill:var(--k-accent)"/><line x1="104" y1="43.8" x2="104" y2="62.2" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="94" y="47.0" width="20" height="7.399999999999999" rx="2" style="fill:var(--k-accent)"/><line x1="144" y1="44.2" x2="144" y2="60.3" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="134" y="47.0" width="20" height="6.899999999999999" rx="2" style="fill:var(--k-danger)"/><line x1="184" y1="47.0" x2="184" y2="66.3" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="174" y="53.9" width="20" height="2.8000000000000043" rx="2" style="fill:var(--k-danger)"/><line x1="224" y1="51.6" x2="224" y2="90.2" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="214" y="56.7" width="20" height="29.799999999999997" rx="2" style="fill:var(--k-danger)"/><line x1="264" y1="75.0" x2="264" y2="107.7" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="254" y="86.5" width="20" height="12.900000000000006" rx="2" style="fill:var(--k-danger)"/><line x1="304" y1="92.0" x2="304" y2="109.5" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="294" y="98.5" width="20" height="2.4" rx="2" style="fill:var(--k-accent)"/><line x1="344" y1="93.0" x2="344" y2="140.8" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="334" y="98.5" width="20" height="32.599999999999994" rx="2" style="fill:var(--k-danger)"/><line x1="384" y1="124.7" x2="384" y2="136.2" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="374" y="131.1" width="20" height="2.4" rx="2" style="fill:var(--k-danger)"/><line x1="424" y1="128.4" x2="424" y2="162.8" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="414" y="133.0" width="20" height="24.30000000000001" rx="2" style="fill:var(--k-danger)"/><line x1="464" y1="150.4" x2="464" y2="168.8" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="454" y="154.6" width="20" height="2.700000000000017" rx="2" style="fill:var(--k-accent)"/><line x1="504" y1="145.4" x2="504" y2="161.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="494" y="148.1" width="20" height="6.5" rx="2" style="fill:var(--k-accent)"/><line x1="544" y1="145.8" x2="544" y2="168.3" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="534" y="148.1" width="20" height="13.400000000000006" rx="2" style="fill:var(--k-danger)"/></svg><div class="x"><span>Mar</span><span>Apr</span></div></figure>

Sideways, no story

<figure class="k-candle" role="img" aria-label="Candlestick chart: ACME moved sideways in a narrow range for 14 sessions" style="max-width:430px"><figcaption>ACME Corp <span>Daily closes, consolidation</span></figcaption><svg viewBox="0 0 560 190" aria-hidden="true"><line x1="0" y1="30" x2="560" y2="30" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="79" x2="560" y2="79" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="128" x2="560" y2="128" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="178" x2="560" y2="178" style="stroke:var(--k-line)" stroke-width="1"/><line x1="24" y1="103.0" x2="24" y2="158.0" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="14" y="117.0" width="20" height="27.0" rx="2" style="fill:var(--k-danger)"/><line x1="64" y1="103.0" x2="64" y2="153.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="54" y="112.0" width="20" height="32.0" rx="2" style="fill:var(--k-accent)"/><line x1="104" y1="80.0" x2="104" y2="121.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="94" y="94.0" width="20" height="18.0" rx="2" style="fill:var(--k-accent)"/><line x1="144" y1="69.0" x2="144" y2="109.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="134" y="79.0" width="20" height="15.0" rx="2" style="fill:var(--k-accent)"/><line x1="184" y1="72.0" x2="184" y2="123.0" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="174" y="79.0" width="20" height="27.0" rx="2" style="fill:var(--k-danger)"/><line x1="224" y1="98.0" x2="224" y2="131.0" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="214" y="106.0" width="20" height="9.0" rx="2" style="fill:var(--k-danger)"/><line x1="264" y1="98.0" x2="264" y2="127.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="254" y="105.0" width="20" height="10.0" rx="2" style="fill:var(--k-accent)"/><line x1="304" y1="85.0" x2="304" y2="118.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="294" y="92.0" width="20" height="13.0" rx="2" style="fill:var(--k-accent)"/><line x1="344" y1="83.0" x2="344" y2="124.0" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="334" y="92.0" width="20" height="26.0" rx="2" style="fill:var(--k-danger)"/><line x1="384" y1="100.0" x2="384" y2="149.0" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="374" y="118.0" width="20" height="20.0" rx="2" style="fill:var(--k-danger)"/><line x1="424" y1="91.0" x2="424" y2="151.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="414" y="102.0" width="20" height="36.0" rx="2" style="fill:var(--k-accent)"/><line x1="464" y1="60.0" x2="464" y2="108.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="454" y="74.0" width="20" height="28.0" rx="2" style="fill:var(--k-accent)"/><line x1="504" y1="54.0" x2="504" y2="82.0" style="stroke:var(--k-accent)" stroke-width="2"/><rect x="494" y="67.0" width="20" height="7.0" rx="2" style="fill:var(--k-accent)"/><line x1="544" y1="50.0" x2="544" y2="107.0" style="stroke:var(--k-danger)" stroke-width="2"/><rect x="534" y="67.0" width="20" height="28.0" rx="2" style="fill:var(--k-danger)"/></svg><div class="x"><span>Jun</span><span>Jul</span></div></figure>

Usage

For price series where the range matters as much as the close: markets, exchange rates, any OHLC data. Up sessions take the accent, down sessions the danger color; the wick is the full range, the body is open to close.

Accessibility

Nobody can read fourteen candles aloud, so the figure label states the verdict — direction, period and range — and the underlying OHLC table belongs next to the chart for anyone who needs exact values.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-candleclass
.xclass
aria-labelARIA
aria-hiddenARIA

Related parts

Aspect Ratio beta

A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.

ratiomediaresponsive

Avatar beta

Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.

userprofileinitials

Bar Chart beta

Columns for comparing a handful of values — the chart people read correctly at a glance.

chartcolumnscomparison

Card beta

The universal container: a hairline box with a header, a body and a footer that agree with each other.

containerpanel
Previous
Bar Chart