ztd chartsHome

Trend · Advanced

Candlestick chart

Open, high, low and close for each period in one candle.

Open in playground
Use when
Stocks, exchange rates or coins, where the swing within each period matters
Avoid when
A trend with only one value (a line chart is cleaner)

Try it

32

Candlestick chart

Daily candles of a sample stock (KRW)
  • Up
  • Down
  • 5-day MA
  • 20-day MA
Candlestick chartCandlestick chart. Sep 1, 2025 to Nov 21, 2025, 60 candles. First open 60,800, last close 90,100 (+48.2%), high 90,400, low 59,200.
Candlestick chart data
Sep 1, 2025open 60,800, high 60,900, low 59,500, close 59,700
Sep 2, 2025open 59,700, high 60,300, low 59,600, close 60,300
Sep 3, 2025open 60,900, high 61,100, low 59,200, close 59,500
Sep 4, 2025open 60,000, high 60,900, low 59,600, close 60,500
Sep 5, 2025open 61,000, high 62,400, low 60,600, close 61,500
Sep 8, 2025open 61,600, high 62,400, low 61,500, close 62,000
Sep 9, 2025open 62,500, high 63,000, low 61,100, close 61,400
Sep 10, 2025open 62,300, high 64,200, low 62,200, close 63,200
Sep 11, 2025open 62,800, high 63,800, low 61,800, close 63,400
Sep 12, 2025open 63,200, high 63,700, low 62,900, close 63,400
Sep 15, 2025open 63,800, high 65,900, low 63,500, close 65,600
Sep 16, 2025open 65,700, high 66,300, low 65,300, close 66,200
Sep 17, 2025open 66,300, high 67,600, low 66,200, close 67,300
Sep 18, 2025open 67,600, high 67,800, low 66,200, close 66,800
Sep 19, 2025open 67,200, high 67,900, low 66,800, close 67,600
Sep 22, 2025open 67,100, high 67,700, low 66,600, close 67,700
Sep 23, 2025open 67,500, high 68,100, low 66,300, close 66,700
Sep 24, 2025open 66,500, high 67,800, low 65,700, close 67,600
Sep 25, 2025open 67,600, high 69,900, low 67,500, close 69,200
Sep 26, 2025open 69,400, high 69,800, low 68,600, close 68,900
Sep 29, 2025open 69,700, high 71,300, low 69,500, close 71,200
Sep 30, 2025open 71,600, high 71,700, low 70,800, close 71,200
Oct 1, 2025open 71,700, high 73,100, low 71,200, close 72,700
Oct 2, 2025open 73,600, high 75,200, low 72,600, close 74,700
Oct 3, 2025open 75,300, high 75,800, low 74,200, close 74,500
Oct 6, 2025open 74,700, high 75,700, low 73,600, close 73,800
Oct 7, 2025open 73,900, high 76,200, low 73,700, close 75,200
Oct 8, 2025open 75,700, high 77,400, low 75,500, close 76,100
Oct 9, 2025open 76,400, high 77,300, low 75,600, close 75,800
Oct 10, 2025open 76,800, high 77,400, low 76,100, close 77,200
Oct 13, 2025open 77,000, high 78,800, low 76,700, close 78,300
Oct 14, 2025open 77,700, high 78,100, low 77,300, close 77,600
Oct 15, 2025open 77,000, high 78,400, low 76,400, close 76,700
Oct 16, 2025open 77,000, high 77,700, low 76,300, close 76,500
Oct 17, 2025open 76,500, high 78,000, low 76,400, close 77,700
Oct 20, 2025open 77,100, high 77,200, low 76,500, close 76,700
Oct 21, 2025open 76,700, high 81,100, low 76,000, close 80,500
Oct 22, 2025open 79,600, high 80,100, low 76,100, close 77,500
Oct 23, 2025open 76,800, high 77,700, low 76,100, close 77,200
Oct 24, 2025open 77,300, high 77,600, low 77,300, close 77,300
Oct 27, 2025open 76,900, high 77,800, low 76,100, close 76,300
Oct 28, 2025open 75,900, high 75,900, low 75,500, close 75,600
Oct 29, 2025open 75,200, high 77,200, low 74,300, close 76,700
Oct 30, 2025open 77,100, high 79,100, low 76,600, close 78,000
Oct 31, 2025open 78,400, high 78,600, low 75,900, close 76,400
Nov 3, 2025open 77,300, high 77,600, low 75,000, close 76,300
Nov 4, 2025open 76,100, high 76,500, low 75,900, close 76,200
Nov 5, 2025open 75,800, high 76,600, low 75,600, close 76,000
Nov 6, 2025open 76,200, high 77,300, low 75,100, close 76,800
Nov 7, 2025open 76,100, high 78,500, low 75,300, close 77,600
Nov 10, 2025open 77,600, high 79,800, low 77,500, close 79,400
Nov 11, 2025open 79,700, high 80,800, low 79,400, close 80,400
Nov 12, 2025open 80,100, high 82,300, low 80,100, close 82,100
Nov 13, 2025open 82,300, high 82,500, low 81,100, close 81,600
Nov 14, 2025open 81,300, high 83,700, low 80,900, close 83,400
Nov 17, 2025open 83,100, high 84,200, low 83,100, close 83,300
Nov 18, 2025open 84,400, high 86,900, low 83,800, close 86,700
Nov 19, 2025open 87,000, high 89,700, low 85,900, close 88,600
Nov 20, 2025open 88,400, high 88,700, low 88,100, close 88,400
Nov 21, 2025open 88,400, high 90,400, low 87,200, close 90,100
Higher highs since mid-OctoberAdvanced

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Variants

Named looks for this chart. Each one is the example above with a few options or fields changed. The CLI (ztd-charts example candlestick --variant <id>) and the MCP server know the same names.

Candles only

Daily candles of a sample stock (KRW)
  • Up
  • Down
Sample data

Drag to zoom

Daily candles of a sample stock (KRW)
  • Up
  • Down
  • 5-day MA
  • 20-day MA
Sample data

Green up, red down

Daily candles of a sample stock (KRW)
  • Up
  • Down
  • 5-day MA
  • 20-day MA
Sample data

Code

CandlestickChart.tsx
import { ChartCard, CandlestickChart } from "ztd-charts";

const data = [
  {"date":"2025-09-01","open":60800,"high":60900,"low":59500,"close":59700,"volume":1079936},
  {"date":"2025-09-02","open":59700,"high":60300,"low":59600,"close":60300,"volume":1326769},
  {"date":"2025-09-03","open":60900,"high":61100,"low":59200,"close":59500,"volume":1430849},
  {"date":"2025-09-04","open":60000,"high":60900,"low":59600,"close":60500,"volume":1434116},
  {"date":"2025-09-05","open":61000,"high":62400,"low":60600,"close":61500,"volume":1508602},
  {"date":"2025-09-08","open":61600,"high":62400,"low":61500,"close":62000,"volume":1176118},
  // … 54 more rows
];

export function Example() {
  return (
    <ChartCard number="32" title="Candlestick chart" subtitle="Daily candles of a sample stock (KRW)" takeaway="Higher highs since mid-October" level="advanced" replay>
      <CandlestickChart
        data={data}
        x="date"
        open="open"
        high="high"
        low="low"
        close="close"
        volume="volume"
        ma={[5,20]}
        brush={true}
      />
    </ChartCard>
  );
}

Props

<CandlestickChart> takes these props. Rows marked Common work the same on every chart.

36 props

Prop
dataRequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]
xRequiredDate (period) fieldstring | (d, i) => date
openRequiredOpen price fieldstring | (d, i) => number
highRequiredHigh price fieldstring | (d, i) => number
lowRequiredLow price fieldstring | (d, i) => number
closeRequiredClose price fieldstring | (d, i) => number
volumeVolume fieldstring | (d, i) => number
maMoving average periods on the close. For example [5, 20]number[]
upColorRising candle color (token name or CSS color)stringDefault "accent"
downColorFalling candle colorstringDefault "neutralStrong"
maxCandlesAbove this count, neighboring candles merge. Defaults to plot width / 4number
brushDrag to select a range. true shows the change and the high and low, "zoom" zooms into the range (keyboard: Shift+arrows, Enter)anyDefault false
yDomainFixed price axis rangenumber[]
annotationsNotes drawn on the chart: target band, period, reference line, event, forecast, trend line on the close, weekend shading. [{ type, x, y, from, label }]annotations
dayFirstReads dates such as "05/03/2024", where either part could be the month, day first (5 March). Without it, a clear date in the column decides (25/03/2024), otherwise month first. true also reads "05.03.24" as day.month.yearboolean
heightCommonHeight in px. Without it, each chart picks a default that fits its widthnumber
widthCommonFixed width in px. Without it, the chart fits its parentnumber
highlightCommonItem to highlight. An index, a name, an array, or "max" | "min" | "first" | "last" | "none"number | string | (number|string)[] | "max" …
formatCommonValue format. "number" | "integer" | "percent" (values are already percents: 42 → "42%") | "ratio" (0.42 → "42%") | "compact" | "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) | "decimal" or Intl.NumberFormat options"number" | "percent" | "compact" | …
unitCommonUnit appended to values. For example "%" or "ms"string
localeCommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault "en-US"
animateCommonEntry and update animationbooleanDefault true
durationCommonAnimation length (ms)number
easingCommonMotion curve"spring" | "easeOut" | "easeInOut" | "linear"Default "spring"
staggerCommonDelay between items as they enter (ms)number
reducedMotionCommon"auto" follows the OS setting. true always turns motion offanyDefault "auto"
animateOnViewCommonPlay when the chart scrolls into viewbooleanDefault true
showLabelsCommonLabels drawn on the chart (values and names)booleanDefault true
tooltipCommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault true
syncIdCommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring
ariaLabelCommonName for screen readersstring
descriptionCommonDescription for screen readers. Built from the data when omittedstring
onHoverCommonRuns when hover or keyboard focus moves to another item(e: ChartEvent | null) => void
onClickCommonRuns on click, Enter or Space(e: ChartEvent) => void
replayKeyCommonReplays the entry animation when it changesstring | number
themeCommonChanges theme tokens for this chart onlyPartial<ChartTheme>

Also in Trend