CandlestickLayerConfig

Renders OHLC price data as candlesticks, with directional styling for candle bodies, wicks, and the active value marker.

Examples

JSX - Minimal configuration

<Candlesticks />

JSX - Full configuration

<Candlesticks
  id="price-candles"
  inputs={[
    { key: 'open', source: { type: 'price', field: 'open' } },
    { key: 'high', source: { type: 'price', field: 'high' } },
    { key: 'low', source: { type: 'price', field: 'low' } },
    { key: 'close', source: { type: 'price', field: 'close' } },
  ]}
  outputs={['open', 'high', 'low', 'close']}
  calculate={true}
  includeInAutoScale={true}
  series={{
    body: {
      up: { backgroundColor: '#10b981', borderColor: '#10b981', borderWidth: 0 },
      down: { backgroundColor: 'white', borderColor: '#ef4444', borderWidth: 1 },
      flat: { backgroundColor: '#999', borderColor: '#999', borderWidth: 0 },
    },
    wick: {
      up: { color: '#10b981', width: 1, style: 'solid' },
      down: { color: '#ef4444', width: 1, style: 'solid' },
      flat: { color: '#999', width: 1, style: 'solid' },
    },
  }}
  markers={{
    value: {
      mode: 'last-visible',
      showLine: true,
      showLabel: true,
      up: {
        line: { color: '#10b981', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { backgroundColor: 'white', borderColor: '#10b981', color: '#10b981' },
      },
      down: {
        line: { color: '#ef4444', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { backgroundColor: 'white', borderColor: '#ef4444', color: '#ef4444' },
      },
      flat: {
        line: { color: '#999', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { backgroundColor: 'white', borderColor: '#999', color: '#999' },
      },
    },
  }}
  legend={{
    label: 'OHLC',
    fields: [
      { output: 'open', color: '#1a1a1a' },
      { output: 'high', color: '#1a1a1a' },
      { output: 'low', color: '#1a1a1a' },
      { output: 'close', color: '#1a1a1a' },
    ],
  }}
  yAxis={{ side: 'right', width: 80 }}
/>

Configuration Object - Full configuration

{
  id: 'price-candles',
  type: 'price:candlesticks',
  inputs: [
    { key: 'open', source: { type: 'price', field: 'open' } },
    { key: 'high', source: { type: 'price', field: 'high' } },
    { key: 'low', source: { type: 'price', field: 'low' } },
    { key: 'close', source: { type: 'price', field: 'close' } },
  ],
  outputs: ['open', 'high', 'low', 'close'],
  calculate: true,
  includeInAutoScale: true,
  series: {
    body: {
      up: { backgroundColor: '#10b981', borderColor: '#10b981', borderWidth: 0 },
      down: { backgroundColor: 'white', borderColor: '#ef4444', borderWidth: 1 },
      flat: { backgroundColor: '#999', borderColor: '#999', borderWidth: 0 },
    },
    wick: {
      up: { color: '#10b981', width: 1, style: 'solid' },
      down: { color: '#ef4444', width: 1, style: 'solid' },
      flat: { color: '#999', width: 1, style: 'solid' },
    },
  },
  markers: {
    value: {
      mode: 'last-visible',
      showLine: true,
      showLabel: true,
      up: {
        line: { color: '#10b981', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { backgroundColor: 'white', borderColor: '#10b981', color: '#10b981' },
      },
      down: {
        line: { color: '#ef4444', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { backgroundColor: 'white', borderColor: '#ef4444', color: '#ef4444' },
      },
      flat: {
        line: { color: '#999', width: 1, style: 'dashed', dashes: [5, 5] },
        label: { backgroundColor: 'white', borderColor: '#999', color: '#999' },
      },
    },
  },
  legend: {
    label: 'OHLC',
    fields: [
      { output: 'open', color: '#1a1a1a' },
      { output: 'high', color: '#1a1a1a' },
      { output: 'low', color: '#1a1a1a' },
      { output: 'close', color: '#1a1a1a' },
    ],
  },
  yAxis: { side: 'right', width: 80 },
}

Properties

Base Props

BaseLayerConfig

type

• Type: 'price:candlesticks'

series

• Type: { body?: false | DirectionalBarConfig; wick?: false | DirectionalLineConfig }

Visual series configuration for candle body and wick.

markers

• Type: { value?: false | DirectionalValueMarkerConfig }

Directional value marker configuration for candlesticks.

Defaults

Property	Default
id	'candlestick-layer'
inputs	open, high, low, close price fields
outputs	['open', 'high', 'low', 'close']
scale	{ key: 'price_auto', domain: 'price', range: { type: 'auto' } }
scalePolicy	'fixed'
includeInAutoScale	true
offset	0
period	1
lookback	0
valueLabelFormatter	(value) => value.toFixed(2)
series.body	Uses theme.layers.candlesticks.series.body
series.wick	Uses theme.layers.candlesticks.series.wick
markers.value	Uses theme.layers.candlesticks.markers.value
legend	Uses theme.layers.candlesticks.legend
yAxis	Uses theme.layers.candlesticks.yAxis

TypeScript

interface CandlestickLayerConfig extends BaseLayerConfig {
  type: 'price:candlesticks';
  series?: {
    body?: false | DirectionalBarConfig;
    wick?: false | DirectionalLineConfig;
  };
  markers?: {
    value?: false | DirectionalValueMarkerConfig;
  };
}