CandlestickChart

The CandlestickChart displays financial Open-High-Low-Close (OHLC) data, commonly used for stock prices, forex, and cryptocurrency trading. Each candlestick shows the price movement for a period, with optional volume bars below for trading activity.

Reporting props marked Svelte only (valueFormat, showDataTable, exportable, reference lines, data zoom and so on) are available in @classic-homes/charts-svelte; React support is pending.

Import​

<script>
  import { CandlestickChart } from '@classic-homes/charts-svelte';
</script>

// React
import { CandlestickChart } from '@classic-homes/charts-react';

Basic Usage​

<script>
  import { CandlestickChart } from '@classic-homes/charts-svelte';

  const data = {
    dates: ['2024-01', '2024-02', '2024-03', '2024-04'],
    data: [
      { open: 20, close: 34, low: 10, high: 38 },
      { open: 40, close: 35, low: 30, high: 50 },
      { open: 31, close: 38, low: 28, high: 48 },
      { open: 38, close: 30, low: 25, high: 44 },
    ],
    volume: [100, 120, 90, 140],
  };
</script>

<CandlestickChart title="Stock Price" {data} showVolume height={400} />

Props​

Chart-Specific Props​

Prop	Type	Default	Description
data	CandlestickData	required	OHLC data with optional volume
showVolume	boolean	false	Display volume bars below chart
zoomStart	number	80	Initial zoom window start as a percentage of the dates; 0 shows everything (Svelte only)
xAxisConfig	AxisConfig	-	Horizontal axis name, tick formatter, rotation and range
yAxisConfig	AxisConfig	-	Vertical axis name, tick formatter, rotation and range
onClick	(params: CandlestickEventParams) => void	-	Callback when clicked

Inherited Base Props​

Prop	Type	Default	Description
title	string	required	Chart title for accessibility
height	number | string	400	Chart height
theme	'light' | 'dark' | 'auto'	'auto'	Theme preference
showTooltip	boolean	true	Show tooltip on hover
showGrid	boolean	true	Show grid lines
tooltipFormatter	string | ((items: TooltipFormatterParams[]) => string)	-	Custom tooltip template or HTML function
tooltipValueFormatter	(value: number) => string	-	Format values in the default tooltip
option	EChartsOption	-	Raw ECharts option deep-merged over the generated one
description	string	-	Optional description for screen readers
minHeight	number	-	Minimum height in pixels; also bounds an 'auto' height
maxHeight	number	-	Maximum height in pixels; also bounds an 'auto' height
loading	boolean	false	Show loading skeleton; over existing data a loading overlay is shown instead (Svelte)
error	string | null	-	Error message to display
onRetry	() => void	-	Show a Retry button on the error state, calling this (Svelte only)
emptyMessage	string	-	Message shown when data is empty
valueFormat	ValueFormatPreset | Intl.NumberFormatOptions | ((value: number) => string)	-	How values are written in value axes, tooltips, labels and the data table: 'number', 'integer', 'compact', 'currency', 'currencyCents', 'percent', 'percentValue', 'days', Intl options or a function (Svelte only)
locale	string	'en-US'	Locale for valueFormat (Svelte only)
onReady	(chart: EChartsType) => void	-	Called with the ECharts instance when it is created (Svelte only)
events	Record<string, (params) => void>	-	Raw ECharts event handlers keyed by event name, e.g. datazoom (Svelte only)
showDataTable	boolean | 'sr-only'	'sr-only'	Render the data as a table: 'sr-only' for screen readers, true adds a visible "Show data" toggle, false for none (Svelte only)
exportable	boolean | ChartExportConfig	false	Show PNG and CSV download buttons; or { image, csv, filename } (Svelte only)
patterns	boolean	false	Fill series with decal patterns as well as colour, for colour-blind readers (Svelte only)
class	string	-	Custom CSS class
animation	boolean	true	Enable/disable animations (respects prefers-reduced-motion)
showLegend	boolean	-	Show chart legend

Data Structure​

interface CandlestickData {
  dates: string[]; // Date/time labels
  data: CandlestickItem[]; // OHLC data points
  volume?: number[]; // Optional volume data
}

interface CandlestickItem {
  open: number; // Opening price
  close: number; // Closing price
  low: number; // Lowest price
  high: number; // Highest price
}

Examples​

With Volume​

<CandlestickChart title="AAPL Stock" {data} showVolume height={500} />

Without Volume​

<CandlestickChart
  title="Price History"
  data={{
    dates: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    data: [
      { open: 100, close: 110, low: 95, high: 115 },
      { open: 110, close: 105, low: 100, high: 120 },
      { open: 105, close: 115, low: 102, high: 118 },
      { open: 115, close: 108, low: 105, high: 120 },
      { open: 108, close: 125, low: 105, high: 128 },
    ],
  }}
/>

Visual Indicators​

• Green/bullish candle: Close > Open (price increased)
• Red/bearish candle: Close < Open (price decreased)
• Wicks: Show the high and low prices
• Volume bars: Trading activity for each period

Show Every Date (Svelte only)​

By default the chart opens zoomed to the latest fifth of the dates. zoomStart={0} opens on the full range. showGrid={false} hides the split lines.

<CandlestickChart title="Lumber Futures" {data} zoomStart={0} showGrid={false} />

Accessibility​

• Title provides context for the data
• Tooltip shows detailed OHLC values
• Color coding indicates price direction

Related Charts​

• LineChart - Trend visualization
• BarChart - Volume comparison